1.Ajax介绍
同步与异步的区别：
同步的理解: 同步就是指一个进程在执行某个谓求的时候。若该请求需要一段时间才能返回信贽。那么这个进程将会一直等待下去,直到收到返仓信息才继绫执行下去;
同步就相当于是当客户端发送请求给服务岩。在等待服务端喇应的请求时，客户岩不做其他的事情。当服务端做完了才返回到客户缓。这样的话客户端需要一直等待。用户使用起来会有不友好。
异步的理解: 异步是指进程不需要一直等下去，而是继续执行下面的操怍，不管其他进程的状态。当有海息返回时系统会通知进程进行处理,这样可以提高执行的效率。
异步就相当于当客户端发送给服务剃请求时。在等待服务曦喇应的时候，客户橐可以做其他的事情，这样节约了时间。提高了效率,
同步是阻塞模式。异步是非阻塞模式
Ajax特点
优点;
可以无需刷新页面，与服务器进行通信
允许依据用户事件来更新部分页面内容
缺点:
· 没有浏览历史，不能回退·
存在跨域问题(同源)
. SEO不友好(搜索引擎优化，对爬虫不友好)
2.Ajax原理
客户端发送请求，请求交给XMLHttpRequest，XMLHttpRequest 把请求提交给服务，服务器进行业务处理，服务器响应数据交给XMLHttpRequest对象，XMLHttpRequest对象接收数据，由javascript把数据写到页面上。
3.原生Ajax
Ajax工作流程
（1）创建Ajax对象（XmlHttpRequest）
var xmlhttp = new XMLHttpRequest()（2）告诉浏览器以什么方式发送请求 以及请求发送到哪
xmlhttp.open("get","http://127.0.0.1:8090",true)| 方法 | 描述 |
| open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。<br />method:请求的类型;GET 或 POST<br/> url:文件在服务器上的位置<br/> async: true(异步)或false(同步) |
（3）设置响应服务器端数据处理
xmlhttp.onreadystatechange=function(){//做数据处理document.querySelector("#div1").innerHTML = xmlhttp.responseText}（4）发送请求
xmlhttp.send()XMIHttpRoquest对象一共会经历以下5中状态。
未初始化状态 初始化状态 发送数据状态 接收数据状态 完成状态
Ajax原生步骤练习
<body>点击按钮，显示对应的内容<hr><input type="button" name="btn1" id="btn1" value="发送"><div id="div1"></div><script>document.querySelector("#btn1").onclick = function(){//第一步：创建一个对象var xmlhttp = new XMLHttpRequest()//第二步：告诉浏览器以什么方式发送请求 以及请求发送到哪xmlhttp.open("get","http://127.0.0.1:8090",true)//第三步：设置响应服务器端数据处理xmlhttp.onreadystatechange=function(){//做数据处理document.querySelector("#div1").innerHTML = xmlhttp.responseText}//第四步：发送请求xmlhttp.send()}</script>
</body>4.json和js对象的关系
JSON是JS对象的字符串表示法，它使用文本表示一个对象的信息，本质是一个字符串。
json和js对象的相互转换
要实现从JSON字符串转换为JS对象，使用JSON.parse()方法;
var obj = JSON.parse(' {"a" : "he11o", ""b": "wor1d"1"}');
//结果为{a: "He11o" ,b: " wor1d'}
要实现从JS对象转换为JSON字符串，使用JSON.stringify()方法。
var obj = JSON . stringify(a: "He1lo' ,b: 'wor1d');
//结果为"["a" : "he11o", "b": "wor1d"]'
序列化与反序列化
把数据对象转换为字符串的过程，叫做序列化，例如:调用JSON.stringify0)函数的操作，叫做|SON序列化。因此JSON.stringify0函数就叫做序列化函数。
把字符串转换为数据对象的过程，叫做反序列化，例如:调用)SON.parse()函数的操作，叫做JSON反序列化。因此JSON.parse()函数就叫做反序列化函数。
json练习
HTML部分
<body>点击按钮，显示对应的内容<hr><input type="button" name="btn1" id="btn1" value="发送"><div id="div1"></div><script>document.querySelector("#btn1").onclick = function(){//第一步：创建一个对象var xmlhttp = new XMLHttpRequest()//第二步：告诉浏览器以什么方式发送请求 以及请求发送到哪// xmlhttp.open("get","http://127.0.0.1:8090",true)xmlhttp.open("get","data/student.json",true)//第三步：设置响应服务器端数据处理xmlhttp.onreadystatechange=function(){//做数据处理var students = JSON.parse(xmlhttp.responseText)// console.log(students[0].stuID);var table = "<table border='1' bordercolor='red'><tr><th>学号</th><th>姓名</th><th>年龄</th></tr>";for(var i=0;i<students.length;i++){var stuid = students[i].stuIDvar stuname = students[i].stuNamevar stuage = students[i].stuAgetable += "<tr><td>"+stuid+"</td><td>"+stuname+"</td><td>"+stuage+"</td></tr>"}table +="</table>"document.querySelector("#div1").innerHTML = table}//第四步：发送请求xmlhttp.send()}</script>
</body>json部分
[{"img":"img/img_1.jpg","title":"免烫高支棉衬衫","price":"120"},{"img":"img/img_2.jpg","title":"免烫高支棉衬衫","price":"130"},{"img":"img/img_3.jpg","title":"免烫高支棉衬衫","price":"120"},{"img":"img/img_4.jpg","title":"免烫高支棉衬衫","price":"160"}
]5.$.ajax()
定义与用法
ajax()方法用于执行AJAX(异步 HTTP)请求。
所有的jQuery AJAX方法都使用ajax()方法。该方法通常用于其他方法不能完成的请求。
语法
$.ajax({name:value,name:value，...})
该参数规定AJAX请求的一个或多个名称/值对。
下面的表格中列出了可能的名称/值:
| 名称 | 值/描述 |
| async | 布尔值,表示请求是否异步处理。默认是true. |
| type | 规定请求的类型(GET 或POST). |
| url | 规定发送请求的URL。默认是当前页面。 |
| success(result,status,xhr) | 当请求成功时运行的函数。 |
| dataType | 预期的服务器响应的数据类型。 |
| beforeSend(xhr) | 发送请求前运行的函数。 |
| complete(xhr,status) | 请求完成时运行的函数(在请求成功或失败之后均调用，即在success和error函数之后)。 |
| data | 规定要发送到服务器的数据。 |
| error(xhr,status,error) | 如果请求失败要运行的函数。 |
练习
<body><input type="button" name="" id="btn1" value="请求数据"><div id="myDiv"></div><script>$(function(){$("#btn1").click(function(){$.ajax({type:"get", //请求方式url:"data/student.json",//请求的urlasync:true,//异步dataType:"text", //响应式的数据类型success:function(data){var students = JSON.parse(data)/* var table = "<table border='1' bordercolor='red'><tr><th>学号</th><th>姓名</th><th>年龄</th></tr>"; */for(var i=0;i<students.length;i++){console.log(students[i].stuID);/* var stuid = students[i].stuIDvar stuname = students[i].stuNamevar stuage = students[i].stuAgetable += "<tr><td>"+stuid+"</td><td>"+stuname+"</td><td>"+stuage+"</td></tr>" */}/* table +="</table>"document.querySelector("#myDiv").innerHTML = table */}})})})</script>
</body>
