什么是ajax？AJAX是浏览器提供的一组API，可以通过JavaScript调用，从而通过代码控制请求和响应。实现网络编程1.使用AJAX的过程可以类比我们平时访问网页的过程//1.创建一个XMLHttpRequest类型的对象——相当于打开浏览器varxhr=newXMLHttpRequest()//2.打开withaURL之间的连接-相当于在地址栏输入访问地址xhr.open('GET','./time.php')//3.通过连接发送请求-相当于回车或者点击访问并发送请求xhr.send(null)//4.指定xhr状态变化事件处理函数——相当于处理网页渲染后的操作xhr.onreadystatechange=function(){//判断是否响应通过xhr的readyState接收本次请求的if(this.readyState===4){//通过xhr的responseTextconsole.log(this)}}获取responsebodyconsole.log(this)}}2、readyState因为当xhr对象的状态发生变化时（不仅是whentheresponse），也就是说这个事件会被多次触发，所以我们有必要了解一下各个状态值的含义：时间轴：varxhr=newXMLHttpRequest()console.log(xhr.readyState)//=>0//初始化请求代理对象xhr.open('GET','time.php')console.log(xhr.readyState)//=>1//已调用open方法建立连接与服务器的特定端口连接xhr.send()xhr.addEventListener('readystatechange',function(){switch(this.readyState){case2://=>2//已经收到响应的响应头message//可以得到header//console.log(this.getAllResponseHeaders())console.log(this.getResponseHeader('server'))//但是还没有得到bodyconsole.log(this.responseText)breakcase3://=>3//正在下载响应消息的响应体，响应体可能为空，也可能不完整//在这里处理响应体是不安全的（不可靠的）console.log(this.responseText)breakcase4://=>4//一切正常（整个响应报文已经完全下载完毕）//这里通过理解对响应体进行处理console.log(this.responseText)break}})每个状态值的含义得出一个结论：一般情况下，当readyState值为4时，我们执行响应的后续逻辑xhr.onreadystatechange=function(){if(this.readyState===4){//后续逻辑……}}3.遵循HTTP从本质上讲，XMLHttpRequest是JavaScript在Web平台上发送HTTP请求的手段，所以我们发出的请求仍然是HTTP请求，也符合HTTP格式：//设置请求消息的请求行xhr.open('GET','./time.php')//设置请求头xhr.setRequestHeader('Accept','text/plain')//设置请求体xhr.send(null)xhr.onreadystatechange=function(){if(this.readyState===4){//获取响应状态码console.log(this.status)//获取响应状态描述console.log(this.statusText)//获取响应头信息console.log(this.getResponseHeader('Content-Type'))//指定响应头console.log(this.getAllResponseHeader())//所有响应头//获取响应体console.log(this.responseText)//textformconsole.log(this.responseXML)//XML格式，不需要懂}}4.GET请求通常在GET请求中，参数通过？URL地址中的参数。varxhr=newXMLHttpRequest()//GET请求参数一般使用问号传递//这里可以在请求地址后添加参数，向服务器传输数据xhr.open('GET','./delete.php?id=1')//GET请求中一般不需要设置responsebody，可以传null也可以不传xhr.send(null)xhr.onreadystatechange=function(){if(this.readyState===4){console.log(this.responseText)}}//一般是url传递类似参数的数据，而POST一般是业务数据。5、POST请求在POST请求过程中，请求体用于携带提交的数据。varxhr=newXMLHttpRequest()//open方法第一个参数的作用是设置请求方式xhr.open('POST','./add.php')//设置Content-Type中的requestheadertoapplication/x-www-form-urlencoded//将本次请求的请求体格式标记为urlencoded，以便服务器接收数据xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')//需要提交给服务器的数据可以通过send方法的参数传入//格式：key1=value1&key2=value2xhr.send('key1=value1&key2=value2')xhr.onreadystatechange=function(){if(this.readyState===4){console.log(this.responseText)}}6.同步与异步同步：一个人一次只能做一件事，执行的同时不要做其他事情sometime-consumedoperations(noneedtomonitor),justasynchronouswait:在执行一些耗时操作的同时做其他事情（不需要监视），而不是等待对于xhr.open()方法的第三个参数传入一个bool值，其作用是设置这个请求是否异步执行，默认为true，如果需要同步执行，可以通过传false来实现:console.log('beforeajax')varxhr=newXMLHttpRequest()//第三个参数默认为true，表示异步使用Executexhr.open('GET','./time.php',true)xhr.send(null)xhr.onreadystatechange=function(){if(this.readyState===4){//这里代码最后执行console.log('requestdone')}}console.log('afterajax')如果是同步执行，代码会卡在xhr.send()这一步：console.log('beforeajax')varxhr=newXMLHttpRequest()//同步方式xhr.open('GET','./time.php',false)//同步方式执行需要先注册事件再调用send，否则readystatechange不能triggerxhr.onreadystatechange=function(){if(this.readyState===4){//这里的代码终于执行完了console.log('requestdone')}}xhr.send(null)console.log('ajax'之后）演示同步和异步的区别。在发送请求send()之前一定要注册readystatechange（不管是同步的还是异步的）。为了让这个事件更可靠（必须被触发），你必须先注册了解同步模式。切记不要使用同步模式。至此，我们已经大致了解了AJAX的基本API。7、响应数据格式问题：如果想让服务器返回一个复杂的数据，如何处理？关心的问题是服务端发送什么格式的数据，客户端如何用JavaScript解析这种格式。XML是一种数据描述方式，目前项目中基本不用。淘汰原因：数据冗余过多。JSON也是一种数据描述的手段，类似于JavaScript字面量，服务端以JSON格式返回数据，客户端以JSON格式解析数据。不管是JSON还是XML，都只是在AJAX请求过程中用到，并不代表它们之间有必然联系。它们只是数据协议。兼容方案XMLHttpRequest兼容旧浏览器（IE5/6）问题，你可以用另一种方式来代替varxhr=window.XMLHttpRequest吗？newXMLHttpRequest():newActiveXObject('Microsoft.XMLHTTP')8.封装AJAX请求封装函数可以理解为你要做的事情，函数体文档中规定了做这个的过程，并没有开始工作直到它被调用。将函数作为参数传递就像把事情交给别人，这就是委托的概念/***发送AJAX请求*@param{String}method请求方法*@param{String}url请求地址*@param{Object}params请求参数*@param{Function}done请求完成后需要做什么（delegate/callback）*/functionajax(method,url,params,done){//统一转为大写后续判断method=method.toUpperCase()//object形式的参数转为urlencoded格式varpairs=[]for(varkeyinparams){pairs.push(key+'='+params[key])}varquerystring=pairs.join('&')varxhr=window.XMLHttpRequest?newXMLHttpRequest():newActiveXObject('Microsoft.XMLHTTP')xhr.addEventListener('readystatechange',function(){if(this.readyState!==4)return//尝试解析JSON格式的响应体try{done(JSON.parse(this.responseText))}catch(e){done(this.responseText)}})//如果是GET请求，设置URL地址问号参数if(method==='GET'){url+='?'+querystring}xhr.open(method,url)//如果是POST请求，设置请求体vardata=nullif(method==='POST'){xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')data=querystring}xhr.send(data)}ajax('get','./get.php',{id:123},function(data){console.log(data)})ajax('post','./post.php',{foo:'posteddata'},function(data){console.log(data)})9.jQuery$.ajax$.ajax({url:'./get.php',type:'get',dataType:'json',data:{id:1},beforeSend:function(xhr){console.log('beforesend')},成功:function(data){console.log(data)},error:function(err){console.log(err)},complete:function(){console.log('requestcompleted')}})常用选项参数介绍：url:请求地址type:请求方法，默认为getdataType:服务器响应数据类型ajax('get','./get.php',{id:123},function(data){console.log(data)})ajax('post','./post.php',{foo:'posteddata'},函数（数据）{console.log（数据）}）$.ajax（{url：'./get.php'，类型：'get'，数据类型：'json'，数据：{id：1}，beforeSend：function(xhr){console.log('beforesend')},成功:function(data){console.log(data)},error:function(err){console.log(err)},complete:function(){console.log('要求estcompleted')}})常用选项参数介绍：url：请求地址type：请求方式，默认为getdataType：服务器响应数据类型contentType：请求体内容类型，默认application/x-www-form-urlencodeddata：需要传递给服务器的数据，如果是GET，通过URL传递，如果是POST，通过请求体传递timeout：请求超时时间beforeSend：发起请求前触发success：请求成功后触发（响应状态码200）error：请求失败时触发complete：请求完成时触发（无论成功与否）not)安全策略，所谓同源是指相同的域名、协议、端口。只有同源的地址才能通过AJAX互相请求。同源或异源指的是两个地址之间的关系，不同源地址之间的关系我们称之为跨域请求的请求什么是同源？例如：http://www.example.com/detail...对比以下地址JSONPJSONwithPadding是一种借助脚本标签发送跨域请求的技术。原理是客户端使用script标签在服务器端请求一个动态网页（php文件），服务器端动态网页返回一个带有函数调用的JavaScript全局函数调用脚本，传入原本需要的数据返回给客户端。以后大部分情况下，都会使用JSONP来完成不同源地址之间的跨域请求foo(['I','Yes','You','Original','This','Need','To','of','Number','Data'])总结：由于XMLHttpRequest不能在不同源地址之间发送跨域请求，只好另辟蹊径。脚本方案是我们最终选择的方式。我们称这种方式为JSONP。不懂原理的记得howtoUse，用一段时间再看原理。
