ajax

1. 同步与异步区别

• 同步：按顺序，依次执行，向服务器发送请求-->客户端做其他操作

• 异步：分别执行，向服务器发送请求==>同时执行其他操作

原生ajax

• 四步骤

1. 创建ajax对象

• var a=new xmlhttprequest();

1. 设定数据的传输方式（get、post），打开连接（open()）

• ajax对象.open("method"，"url"，"同步false/异步true")

1. 获得响应数据

1. 发送https请求：ajax.send（）

原生ajax四步骤代码：

<button>获取ajax</button><div></div><script>document.getElementsByTagName("button")[0].onclick=function(){//创建ajax对象var ajax=new XMLHttpRequest();//请求地址ajax.open("get","http://127.0.0.1:5500/work4.html",false); //获得响应数据ajax.onreadystatechange=function(){//判断请求是否正常运行if(ajax.readyState==4&&ajax.status==200){//赋值到当前页面document.getElementsByTagName("div")[0].innerHTML=ajax.responseText;}else{alert("没请求成功")alert(ajax.readyState)alert(ajax.status)}}//发送请求ajax.send()}</script>

• 数据交换格式【不能跨域】：

• 获取xml文件的内容，美观的渲染到页面

<button>获取数据</button><table></table><script>document.getElementsByTagName("button")[0].onclick=function(){varajax=newXMLHttpRequest;ajax.open("get","work1.xml",true);ajax.onreadystatechange=function(){if(ajax.status==200&&ajax.readyState==4){xixi(ajax.responseXML);}}ajax.send()}functionxixi(obj){vartable="<table><tr><th>姓名</th><th>年龄</th><th>地址</th></tr>"varxml=obj.getElementsByTagName("xi");for(i=0;i<xml.length;i++){table+=`<tr><td>${xml[i].getElementsByTagName("name")[0].childNodes[0].nodeValue}</td><td>${xml[i].getElementsByTagName("age")[0].childNodes[0].nodeValue}</td><td>${xml[i].getElementsByTagName("address")[0].childNodes[0].nodeValue}</td></tr>`}document.getElementsByTagName("table")[0].innerHTML=table;}</script>

• 获取json文件的内容，美观的渲染到页面

<button>获取数据</button><table></table><script>document.getElementsByTagName("button")[0].onclick=function(){//原生ajax，4个步骤// 1.创建ajax对象varajax=newXMLHttpRequest;// 2.设置请求方式，地址，同步或异步ajax.open("get","work.json",true);// 3.获得相应数据// 如果请求状态改变触发函数ajax.onreadystatechange=function(){// 如果请求状态是4代表请求成功，并返回数据，并且正常访问服务器端页面if(ajax.readyState==4&&ajax.status==200){// 调用函数，传递实参，字符串格式的ajax对象数据xixi(ajax.responseText);}}// 4.发送请求ajax.send()}functionxixi(obj){vartable="<table><tr><th>姓名</th><th>年龄</th><th>爱好</th></tr>"//反序列化==>把json格式转化成js对象格式varxml=JSON.parse(obj);//是以数组里面写对象方式存储json数据的，所以循环数组，遍历每个对象for(iinxml){table+=`<tr><td>${xml[i].name}</td><td>${xml[i].age}</td><td>${xml[i].ah}</td></tr>`}//将拼接好的表格放在本页面上展示document.getElementsByTagName("table")[0].innerHTML=table;}</script>

1. 数据结构：

• 对象结构：{"key":"value","key":"value"}

• 数组结构：[value,value]

1. json语法注意事项：

• 属性名必须使用双引号包裹;

• 字符串类型的值必须使用双引号包裹;

• JSON 中不允许使用单引号表示字符串;

• JSON 中不能写注释;

• JSON 的最外层必须是对象或数组格式，

• 不能使用 undefined 或函数作为 JSON 的值。

1. json与js对象的关系

• JSON 是JS 对象的字符串表示法，它使用文本表示一个JS 对象的信息，本质是一个字符串。

• js对象：var obj = {a: 'Hello', b: 'world'}

• json：var json = '{"a": "Hello","b": "wor1d"}'

1. json和js相互转换

• 要实现从 JSON 字符串转换为 JS 对象，使用 JSON.parse() 方法:

varobj=json.parse('{"a": "he11o","b": "world"}');
//结果为{a:'He11o'，b:'wor1d'}

• 要实现从JS 对象转换为 JSON 字符串，使用 JSON.stringify() 方法:

varobj=json.stringify({a: 'Hello'. b:'world'}):
//结果为'{"a": "hello","b": "world"}

1. 序列化与反序列化

• 把js-->json的过程，叫做序列化，json.stringify()函数就叫做序列化函数。

• 把json-->js的过程，叫做反序列化，json.parse()函数就叫做反序列化函数。

1. json比较xml的优点：方便，小，快