了解Ajax的由来、概念和特点。这项技术的起源是在1998年左右应用的。第一个允许客户端脚本发送HTTP请求(XMLHTTP)的组件是由OutlookWebAccess团队编写的。该组件最初属于MicrosoftExchangeServer，并很快成为InternetExplorer4.0的一部分。根据一些观察家的说法，OutlookWebAccess是第一个成功实施Ajax技术的商业应用程序，并成为许多产品的领导者，包括Oddpost的网络邮件产品。2005年初，许多事件让Ajax流行起来。Google在其著名的交互式应用程序中使用异步通信，例如GoogleDiscussionGroups、GoogleMaps、GoogleSearchSuggest、Gmail等。对Mozilla/Gecko的支持使技术成熟且更易于使用。概念Ajax是一种技术解决方案，但不是新技术。它依赖于现有的CSS/HTML/Javascript，核心依赖是浏览器提供的XMLHttpRequest对象，使浏览器能够发送HTTP请求和接收HTTP响应。特点（以今日头条为例）更新数据不刷新√AJAX最大的优点是可以在不刷新整个页面的情况下与服务器通信维护数据。这使得Web应用程序可以更快地响应用户交互，避免在网络上发送那些没有变化的信息，减少了用户的等待时间，带来了非常好的用户体验。与服务器异步通信√AJAX以异步方式与服务器通信，不会中断用户的操作，具有更快的响应能力。优化浏览器和服务器之间的通信，减少网络上不必要的数据传输、时间和数据流量。前后端负载均衡√AJAX可以将之前服务器端负担的部分工作转移到客户端，利用客户端的闲置能力进行处理，减轻服务器端和带宽的负担，节省空间和宽带租用费用。并减轻服务器的负担，AJAX的原理是“按需取数据”，可以最大程度地减少冗余请求和响应对服务器造成的负担，提高站点性能。不可能回到之前的页面状态，因为浏览器只能记住历史上的静态页面安全问题，伪造ajax请求。[缺点]如果使用身份验证，请务必在请求页面上进行检查！将业务逻辑保留在服务器上以进行SQL注入检查！不要假设每个请求都是真实的！数据校验和合理的加解密更支持搜索引擎弱理解Ajax通信的原理和兼容性。总结一句话描述：使用XMLHttpRequest发送http请求并接收响应。知识点XMLHttpRequest是一个js对象，可以使用js对象的方法，eventprocesstoinitiatearequest发起一个http请求，方法GET,POST,PUT,DELETE,UPDATE发送数据客户端发送数据给服务端Monitorstatus监听整个连接的状态接收响应接收服务器返回的数据兼容IE等浏览器的实现XMLHttpRequestActiveXObject("Microsoft.XMLHTTP")升级XMLHttpRequest规范[Level1]受同源策略限制，不能发送跨域请求；[Level1]不能发送二进制文件（如图片、视频、音频等）只能发送纯文本数据；【等级1】发送和获取数据过程中，无法实时获取进度信息，只能判断是否完成；[Level2]可以跨域发送Request，如果服务器允许的话；[Level2]支持发送和接收二进制数据；[Level2]增加一个formData对象，支持发送表单数据；【Level2】可以在发送和获取数据时获取进度信息；[Level2]可以设置请求的超时时间；掌握XmlHttpRequest的属性和方法【要点】希望大家在本期备好纸笔，听编译笔记。这一节过后，再让大家回顾一下顺序和重点。属性onreadystatechange设置状态监听函数readyState连接状态[状态值为1,2,3,4之一]responseText响应文本responseXML响应XMLstatus状态码，如404、200statusText状态文本描述，如NOTFOUND方法abort()cancelRequestgetAllResponseHeaders()获取所有响应头getResponseHeader(headerName)获取指定响应头open(method,URL,async,userName,password)建立连接send(content)发送请求。如果请求是异步模式（默认），这个方法会立即返回。相反，如果请求是同步模式，则该方法将在请求的响应被完全接受之前不会返回。【注意】所有事件的绑定都需要在send之前绑定，才可以setRequestHeader(label,value)发送请求Headbeforesendeventloadstartprogressaborterrorloadtimeoutloadendreadystatechange困难事件触发条件readystatechange每当xhr.readyState改变时触发；但当xhr.readyState从非零值变为0时不会触发。Loadstart在调用xhr.send()方法后立即触发。如果没有调用xhr.send()，则不会触发该事件。progressxhr.upload.onprogress在上传阶段触发（即xhr.send()之后，xhr.readystate=2之前），每50ms触发一次；xhr.onprogress在下载阶段（即xhr.readystate=3时）触发，每50ms触发一次。load在请求成功完成时触发，此时xhr.readystate=4loadend在请求结束（包括请求成功和请求失败）时触发abort，调用xhr.abort()后触发timeoutxhr.timeout不等于0，而从request的onloadstart开始，当到达xhr.timeout设置的时间，request还没有onloadend的时候，就会触发这个事件，会先触发xhr.upload.onerror，再触发xhr.onerror；如果发生网络错误并且上传已结束，则只会触发xhr.onerror）。请注意，只有在网络层级别发生异常时才会触发此事件。对于应用层层面的异常，如果response返回的xhr.statusCode为4xx，则不是Networkerror，所以不会触发onerror事件，而是会触发onload事件，事件触发顺序触发xhr.onreadystatechange（后面每次readyState变化时触发一次）triggerxhr.onloadstarttriggerxhr.upload.onloadstart[uploadstart]triggerxhr.upload.onprogresstriggerxhr.upload.onloadtriggerxhr.upload.onloadend【上传结束】触发xhr。onprogressTriggerxhr.onloadTriggerxhr.onloadend示例使用原生JavaScript构建Ajax实例varajax=function(param){varxhr=XMLHttpRequest?newXMLHttpRequest():newActiveXObject("Microsoft.XMLHTTP");vartype=(param.type||'get').toUpperCase();varurl=param.url;if(!url){return}vardata=param.data,dataArr=[];for(varkindata){dataArr.push(k+'='+data[k]);}dataArr.push('_='+Math.random());if(type=='GET'){url=url+'?'+dataArr.join('&');xhr.open（类型，网址）；xhr.发送();}else{xhr.open(type,url);xmlhttp.setRequestHeader("内容类型","application/x-www-form-urlencoded");xhr.send(dataArr.join('&'));}xhr.onload=function(){if(xhr.status==200||xhr.status==304){varres;if(param.success&¶m.successinstanceofFunction){res=xhr.responseText;if(typeofres==='string'){res=JSON.parse(res);param.success.call(xhr,res);}}}};};思考与实践请使用XMLHttpRequest实现与服务器通信的例子。请思考如何结合XMLHttpRequest来实现JavaScript文件的加载。
