> 软件应用
ajax解析jso(怎么用ajax将jso的数据读取出来)
导语：如何用Ajax解析json，XML数据格式
1，了解json, xml数据格式：
xml数据格式是利用标签对数据就行组装，标签必须成对出现，且必须以<?xml version= encoding= ?>开头 但是因为标签必须成对出现导致文件体积大，标签数量太多，实在是影响传输效率，因此使用频率不高，下面是xml数据格式的例子
<?xml version= encoding=?><students><student><name>张三</name><age>30</age><sex>男</sex></student><student><name>李四</name><age>25</age><sex>男</sex></student><student><name>王五</name><age>27</age><sex>女</sex></student></students>json数据格式他类似于js对象的组装方式，具有体积小，传输快的特点，这里我们拿常见的数据格式对象数组的形式来举例
[ { :, :[,] }, { :, :[,] }]2，Ajax如何对这俩种数据进行解析
首先弄清楚ajax使用步骤（4步,get,还是post 检测数据是什么，数据格式是什么，这要看后端人员给我们的接口文档，文档内会有详细的说明在，这里我也嫖了一份简单的接口文档供大家学习了解）
get方法：
var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject(); } //1，创建对象 并对IE6做兼容性处理 xhr.open(, &39; + uname, true); //2，准备发送，true代表异步 //模拟地址栏请求，得到check.php页面的数据 xhr.send(null); //3，开始发送 xhr.onreadystatechange = function() {//4，回调函数 if (xhr.readyState == 4) { //xhr状态正常 if (xhr.status == 200) { //服务器状态正常 var result = xhr.responseText; console.log(result); } } };post方法 ：
var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject(); } //1，创建对象 并对IE6做兼容性处理 xhr.open(, &39;, true); //2，准备发送，true代表异步 //模拟地址栏请求，得到check.php页面的数据 xhr.setRequestHeader(, &39;); var param = &39; + uname; //注意uname一点都不能动，这是接口文档定义好的，服务器根据这个来判别用户输入是否合法 xhr.send(param); //3，开始发送 xhr.onreadystatechange = function() {//4，回调函数 if (xhr.readyState == 4) { //xhr状态正常 if (xhr.status == 200) { //服务器状态正常 var result = xhr.responseText; console.log(result); } } };3,Ajax对xml, json数据解析
对xml数据解析渲染
//getBooks.php<?php header();//这里设置响应头信息，保证浏览器可以把相应内容识别为xml文件类型 $arr = array(); $arr[0] = array(=>,=>,=>); $arr[1] = array(=>,=>,=>); $arr[2] = array(=>,=>,=>); $arr[3] = array(=>,=>,=>); ?><?xml version= encoding= ?><booklist> <?php foreach ($arr as $key => $value) { ?> <book> <name><?php echo $value[&39;] ?></name> <author><?php echo $value[&39;] ?></author> <desc><?php echo $value[&39;] ?></desc> </book> <?php } ?></booklist><script> window.onload = function() { var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject(); } xhr.open(&39;, &39;, true); xhr.send(null); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { var result = xhr.responseXML; var books = result.getElementsByTagName()[0].getElementsByTagName(&39;); var newHtml = &39;; for (var i = 0; i < books.length; i++) { var itemBook = books[i]; var name = itemBook.getElementsByTagName(&39;)[0].textContent; var author = itemBook.getElementsByTagName(&39;)[0].textContent; var desc = itemBook.getElementsByTagName(&39;)[0].textContent; var table = document.getElementsByTagName(&39;)[0]; // table.insertAdjacentHTML(, &39; + name + &39; + author + &39; + desc + &39;) 第一种方法 var Html = &39; + name + &39; + author + &39; + desc + &39;; newHtml += Html; } table.innerHTML += newHtml; } } } }</script> <div> <table> <tr> <th>书名</th> <th>作者</th> <th>描述</th> </tr> </table> </div>这样就将xml格式的数据渲染到页面上了
对json数据解析渲染//getStudent.php<?php $arr = array(); $arr[0] = array(=>,=>,=>); $arr[1] = array(=>,=>,=>); $arr[2] = array(=>,=>,=>); echo json_encode($arr); ?><script> //json数据格式的数据获取 window.onload = function() { var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject(); } xhr.open(&39;, &39;, true); xhr.send(null); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { var result = xhr.responseText; var Html = &39;; result = JSON.parse(result); //得到的是数组对象 var table = document.querySelector(&39;); for (var i = 0, l = result.length; i < l; i++) { var item = result[i]; var name = item.name; var sex = item.sex; var age = item.age; // Html += &39; + name + &39; + sex + &39; + age + &39; table.insertAdjacentHTML(&39;, &39; + name + &39; + sex + &39; + age + &39;); //方法二 } // table.innerHTML += Html; 方法一：字符串连接 } } } }</script> <div> <table> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </table> </div>这样就可以渲染到页面上去了
免责声明:本站部份内容由优秀作者和原创用户编辑投稿，本站仅提供存储服务，不拥有所有权,不承担法律责任。若涉嫌侵权/违法的，请反馈，一经查实立刻删除内容。本文内容由快快网络小舻创作整理编辑！