分享ajax的三种解析模式

2024-09-01 08:28:15

字体：大中小

来源：转载

供稿：网友

一、Ajax中的JSON格式

html代码：

<html><body> <input type="button" value="Ajax" id="btn"> <script>  var btn = document.getElementById("btn");  btn.onclick = function(){    var xhr = getXhr();    xhr.open("post","10.php");    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    /*     * 在客户端如何构建JSON格式     * * 构建符合JSON格式的字符串     */    var user = '{"name":"zhangwuji","pwd":"123456"}';    xhr.send("user="+user);    xhr.onreadystatechange = function(){      if(xhr.readyState==4&&xhr.status==200){        var data = xhr.responseText;        /*         * 使用eval()函数进行转换         * * 使用"()"将其包裹,eval()函数强制将其转换为JSON格式(javascript代码)         * * 不使用"()"将其包裹,eval()函数将其识别为一个空的代码块         */        var json = eval("("+data+")");        console.log(json);      }    }  }  function getXhr(){    var xhr = null;    if(window.XMLHttpRequest){      xhr = new XMLHttpRequest();    }else{      xhr = new ActiveXObject("Microsoft.XMLHttp");    }    return xhr;  } </script> </body></html>

PHP代码：

<?php  // 接收客户端发送的请求数据  $user = $_POST['user'];  // 就是一个JSON格式的string字符串  //var_dump($user);  $json_user = json_decode($user,true);  //var_dump($json_user['name']);  $json = '{"a":1,"b":2,"c":3,"d":4,"e":5}';  //var_dump(json_decode($json));  // 响应数据符合JSON格式的字符串  // 1. 手工方式构建  //echo '{"name":"zhouzhiruo","pwd":"123456"}';  // 2. 使用json_encode()函数  echo json_encode($json_user);?>

二 Ajax中的XML格式

html页面：

<html>   <body> <input type="button" value="Ajax" id="btn"> <script>  var btn = document.getElementById("btn");  btn.onclick = function(){    // 实现Ajax的异步交互    var xhr = getXhr();    xhr.open("post","07.php");    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    /*     * 如何构建符合XML格式的请求数据     * * 注意     *  * 请求数据的格式 - key=value 不能改变的     * * 将value值构建成符合XML格式的数据     *  * 数据类型 - 字符串(string)     *  * 格式符合XML的语法要求     * * 编写注意     *  * 定义变量 - 专门构建XML格式的数据     *  * 在send()方法进行拼串     */    var user = "<user><name>zhangwuji</name><pwd>123456</pwd></user>";    xhr.send("user="+user);    xhr.onreadystatechange = function(){      if(xhr.readyState==4&&xhr.status==200){        // 接收服务器端的响应数据        var xmlDoc = xhr.responseXML;        var nameEle = xmlDoc.getElementsByTagName("name")[0];        var txtEle = nameEle.childNodes[0];        console.log(txtEle.nodeValue);      }    }  }  function getXhr(){    var xhr = null;    if(window.XMLHttpRequest){      xhr = new XMLHttpRequest();    }else{      xhr = new ActiveXObject("Microsoft.XMLHttp");    }    return xhr;  } </script> </body></html>

上一篇：编写轻量ajax组件02--浅析AjaxPro

下一篇：Ajax请求session失效该如何解决