简单ajax的封装

      好久没有这么勤快的写过这么多东西了,嘿嘿,今天做一个简单的ajax封装,还涉及到IE的一些兼容问题,可以帮助小伙伴们更深一层的理解ajax,废话不多说了,现在进入正题:

     XMLHttpRequest在绝大多数浏览器下都支持。而IE第版本下(ie6)不支持该构造函数,需要使用ActiveXObject该构造函数需要使用对应的参数构造通信对象[“MSXML.XMLHttp.6.0”,”MSXML.XMLHttp.3.0”,”MSXML.XMLHttp”]

首先创建对象函数


简单ajax的封装_第1张图片

以上代码可能对于一些初学者还有有些困难,这边把我认为的难点再详细说一下,关于IE低浏览器的ActiveXObject对象有好几个版本,不能确定,所以用try...catch(e)来做了处理,一旦出了差错就扔到try....catch(e)里面来处理,就不会报错,这样就不会对程序造成影响,要是符合的直接返回,拿来用就可以了,为了以防万一要是个别的浏览器不支持ajax,直接输出 浏览器不支持ajax请求  就可以了。

上面所述都是ajax的准备工作,开始正式封装ajax :


postRequest函数中参数分别代表的含义:

data代表向后台发送要请求什么数据;

type代表的请求方式 请求方式有两种“get”,”post”;

url代表文件的地址

isAsyn代表是同步还是异步

callback代表回调函数,等数据请求完毕,然后执行这个函数


这是刚开始忙活了一半天的createXhr()对象函数


简单ajax的封装_第2张图片

     监听数据的变化,一旦status状态吗发送正常且成功,就用readyState属性 等于4的时候,来用responseText接受数据,之后用回调函数来处理数据渲染到页面;注意:为什么说必须在open()之前指定onreadystatechange事件?因为onchangestatechang事件只有在open()之前调才能确保跨浏览器兼容性。Onreadystatechage事件处理程序中使用了xhr对象,没有使用this对象,原因是onreadystatechange事件处理程序的的作用域问题,如果使用this对象,在有的浏览器中使用会导致函数执行失败,或者导致错误发生。因此,使用实际的xhr对象实例变量是较为可靠的一种方式。


简单ajax的封装_第3张图片

用if语句来区分type是get还是post,因为get和post的传参格式是不同的


初始化通信open里面的参数同上


      发送请求send里面的参数同上,既要作为请求主体发送的数据,如果不需要通过请求主题发送数据,则必须传入null,因为这个参数对有些浏览器来说是必须的



       Ajax一个简单的封装完成了,有什么不足的地方或者有疑问可以评论和相互沟通

你可能感兴趣的:(简单ajax的封装)