Ajax开发步骤和对5种readyState的理解

    xiaoxiao2022-07-13  134

    Ajax

    Ajax是一种不用刷新整个页面就能与服务器完成通讯的技术,由Ajax引擎创建的XMLHttpRequest对象完成与服务器的通信。 把Ajax应用开发分为以下三步:

    创建ajax引擎 需要注意的是:不同的浏览器的创建方式不同,为了能体现更好的兼容各种浏览器,我们 一般选择用分支来编写各种浏览器的创建XMLHttpRequest对象的方式。 function getXHRObject(){ var xhr; //不同的浏览器获取xhr对象的方法不一样 if(window.ActiveXObject){ //一般用于低版本浏览器,IE5,IE6 xhr= new ActiveXObject("Microsoft.XMLHTTP"); alert("这是旧版本"); }else{ // IE7+,fireFox,chrome xhr= new XMLHttpRequest(); alert("这是新版本"); } return xhr; } 发送Ajax请求 myXHR.open(method,url[,async]); myXHR.send([null]);

    open(): 正在发送请求到服务器

    melthod: 提交方式 get /post;url : 请求到服务器的资源地址async: 是否为异步发送,默认是true,大多数情况下都是异步,要不用他干啥。

    send():正在发送参数到服务器

    当提交方式为get时,参数为null提交。get携带参数是通过url地址url?param1=value1¶m2=value2 的方式进行传参。(这种情况下为了防止从cookie在中取数据,保证数据是真正从服务器端接受的数据,一般会携带一个时间戳保证每次取到的数据都是新的或者在浏览器直接禁用缓存)。

    当提交的方式为post,上文中定义好的变量名会作为参数名传递。

    处理服务器响应

    myXHR.onreadystatechange=callbackFunction;

    重点来了!

    onreadystatechange (事件处理函数)触发器函数,每当readyState状态发生改变的时候都会调用回调函数(callbackFunction),当然是在对xmlHttpRequest对象绑定事件之后,一般将该语句放在open(),send()方法之后,这样会少一次回调函数(这次调用没有任何意义,数据还没发出去,服务端就不可能作出响应),但是任何一次ajax请求都会经过0–1--2–3--4的readyState状态的变化。

    readyState

    readyState=0 请求未初始化,但是现在XMLHttpRequest已经创建完毕。等待调用open()方法

    readyState=1 调用了open()方法,与服务器端建立了连接,send()方法触发,状态处于正在发送中

    readyState=2 send()方法已经完成使命,服务器完成了数据的接受,但只是接受的原始数据,还不能直接在客户端使用,此阶段为数据的解析做了准备。

    readyState=3 客户端接受服务器已经解析过的数据,包括responseText、responseXML…格式。

    readyState=4 客户端解析数据完毕。

    readyState= =4 和status= =200的区别

    readyState 用于检验ajax的整个发送请求到接受请求的完整性; status 是HTTP状态码,状态码的改变是从send()方法执行开始, readyState描述的是整个大的状态,Status细分到某个小状态。 二者作为判断条件联合使用,缺一不可。

    附:Http响应状态码

    最新回复(0)