前后端数据交互（三）ajax封装及调用

　　有很多框架已经将ajax封装，需要的时候只需要调用就好，比如jquery是最常用的。我们为什么还需要学习ajax的封装呢？首先加强我们对ajax的认识，其次如果只是因为ajax请求需要引入框架，我们可以自己封装一个，这样就不需要引入多余的框架了。一、封装的注意点
　　封装是为了把相同的部分都实现公用，节省资源，提高代码复用性，工作效率也高，所以需要把不同的参数事件类型等通过调用的时候传入，需要注意点有：
　　1。1、传参
　　发送ajax请求时，主要参数有：请求url请求类型请求参数成功回调失败回调超时时间
　　以上六个参数必须设置成动态传入的，便于控制任意ajax请求。超时时间可以统一设置，如果作为传参可以更方便地控制任意一个请求超时。
　　1。2、请求类型分别处理
　　请求类型有get和post两种，get类型传值的时候，数据跟在url地址后，post传值时在请求体内携带，还需设置请求数据类型。所以需要判断分别处理。if（typeGET）｛xhr。open（GET，url？strData，true）shr。send（）｝else｛xhr。open（POST，url，true）xhr。setRequestHeader（contenttype，applicationxwwwformurlencoded）xhr。send（strData）｝
　　1。3、请求超时处理
　　网络服务异常或者接口异常的时候，请求发送出去没有响应，页面也不会做出任何反应，需要全局加一个超时处理，超出时间还没有返回时，自动结束请求，返回异常。
　　使用语法如下：设置时间为2sxhr。timeout2000；超时回调xhr。ontimeoutfunction（）｛console。log（网络异常，稍后重试）｝
　　1。4、错误处理
　　网络中断，请求无法发送到服务器时，需要对请求失败进行处理。使用onerror事件处理。
　　使用语法如下：xhr。onerrorfunction（）｛console。log（网络异常，请检查网络）｝
　　二、封装ajax代码
　　根据ajax的请求流程，封装代码如下：便于以后使用，建议收藏。functionajax（option）｛method，url，data，timeout，success，errorvarxhr；varstrdata2str（option。data）；if（window。XMLHttpRequest）｛xhrnewXMLHttpRequest（）；｝else｛xhrnewActiveXObject（Microsoft。XMLHTTP）；｝if（option。type。toLowerCase（）post）｛xhr。open（option。type，option。url，true）；xhr。setRequestHeader（Contenttype，applicationxwwwformurlencoded）；xhr。send（str）；｝elseif（option。type。toLowerCase（）get）｛xhr。open（option。type，option。url？str，true）；xhr。send（）；｝xhr。onreadystatechangefunction（）｛if（xhr。readyState4）｛clearTimeout（timer）；if（xhr。status200xhr。status300xhr304）｛option。success（xhr）；｝else｛option。error（xhr）；｝｝｝；if（option。timeout）｛vartimersetTimeout（function（）｛xhr。abort（）；clearTimeout（timer）；｝，option。timeout）｝｝将对象转化成用于传输的字符串functiondata2str（data）｛varres〔〕；data。tnewDate（）。getTime（）；for（varkeyindata）｛res。push（encodeURIComponent（key）encodeURIComponent（data〔key〕））；｝returnres。join（）；｝
　　使用的时候调用代码如下：ajax（｛method：GET，url：1。txt，data：｛请求数据｝，timeout：2000，success：（res）｛console。log（成功返回，res。response）｝，error：err｛console。log（错误信息，err）｝｝）