Ajax——异步基础知识
Posted 站错队了同志
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax——异步基础知识相关的知识，希望对你有一定的参考价值。
XML数据格式
- 首行必须是版本号和格式等信息
<?xml version="1.0" encoding="utf-8" ?>
- 最外层需要一个根节点进行包裹
- 标签有开头有结尾，效率低下
- php中设置header需要将content-type设置成text/xml
header("content-type:text/xml;charset=utf-8");
- 浏览器读取XML文件是用ajax.responseXML
- 浏览器接收到的是文档树，可以用访问节点的方式获取值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ text-align: center; } div{ width: 500px; height: 100px; margin: 0 auto; text-align: center; } td{ border: 1px solid #000; } table{ text-align: center; width: 500px; border-collapse: collapse; } </style> </head> <body> <div></div> <button>获取xml文件数据</button> <script> var btn = document.getElementsByTagName("button")[0]; btn.onclick = function () { var ajax = new XMLHttpRequest(); ajax.open(\'get\', \'03.php\'); ajax.send(); ajax.onreadystatechange = function (ev) { if (ajax.readyState=4&&ajax.status==200) { var msg=ajax.responseXML; console.log(msg); var str=""; str+="<table>"; var persons=msg.querySelectorAll(\'person\'); for (var i = 0; i < persons.length; i++) { str+="<tr>"; str+="<td>"+persons[i].children[0].innerHTML+"</td>"; str+="<td>"+persons[i].children[1].innerHTML+"</td>"; str+="<td>"+persons[i].children[2].innerHTML+"</td>"; str+="</tr>"; } str+="</table>" var div=document.getElementsByTagName("div")[0]; div.innerHTML=str; } } } </script> </body> </html>
<?php header("content-type:text/xml;charset=utf-8"); echo file_get_contents(\'files/01.xml\'); ?>
<?xml version="1.0" encoding="utf-8" ?> <personXML> <person> <name>zs1</name> <age>17</age> <sex>nan</sex> </person> <person> <name>zs2</name> <age>18</age> <sex>nan</sex> </person> <person> <name>zs3</name> <age>19</age> <sex>nan</sex> </person> </personXML>
JSON数据格式
- 格式上可以是标准的json字符串，也可以组成数组
[ {"name":"zs1","age":17,"sex":"nan"}, {"name":"zs2","age":17,"sex":"nan"}, {"name":"zs3","age":17,"sex":"nan"} ]
- 基本上所有语言都可以将JSON字符串转化为该语言的对象进行访问
var msg = JSON.parse(ajax.responseText);//将json字符串转化为js对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { text-align: center; } div { width: 500px; height: 100px; margin: 0 auto; text-align: center; } td { border: 1px solid #000; } table { text-align: center; width: 500px; border-collapse: collapse; } </style> </head> <body> <div></div> <button>点击获取json数据</button> <script> var btn = document.getElementsByTagName("button")[0]; btn.onclick = function () { var ajax = new XMLHttpRequest(); ajax.open(\'post\', \'04.php\'); ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); ajax.send(); ajax.onreadystatechange = function (ev) { if (ajax.readyState == 4 && ajax.status == 200) { console.log(ajax.responseText); var msg = JSON.parse(ajax.responseText); var str = ""; str += "<table>"; for (var i = 0; i < msg.length; i++) { str += "<tr>"; str += "<td>" + msg[i]["name"] + "</td>"; str += "<td>" + msg[i]["age"] + "</td>"; str += "<td>" + msg[i]["sex"] + "</td>"; str + "</tr>"; } str += "</table>"; var div = document.getElementsByTagName("div")[0]; div.innerHTML = str; } } } </script> </body> </html>
<?php header("content-type:text/html;charset=utf-8"); echo file_get_contents(\'files/02.json\'); ?>
[ {"name":"zs1","age":17,"sex":"nan"}, {"name":"zs2","age":17,"sex":"nan"}, {"name":"zs3","age":17,"sex":"nan"} ]
以上是关于Ajax——异步基础知识的主要内容，如果未能解决你的问题，请参考以下文章