request对象的创建

对于request对象的创建，我们总会第一时间反映到下列语句

var request=new XMLHttpRequest();

不过因为各大浏览器之间的相互斗殴行为，事情是不会这么简单的。

比如非常经典的：IE浏览器没有XMLHttpRequest函数。

但这难不倒我们聪明机智的程序员，我们也有经典的应对措施：

function createRequest(){
    try{
        request=new XMLHttpRequest();
    }catch(tryMS){
        try{
            request=new ActiveXObject("Msxml2.XMLHTTP");
        }catch(otherMS){
            try{
                request=new ActiveXObject("Microsoft.XMLHTTP");
            }catch(failed){
                request=null;
            }
        }
    }
    return request;
}
var request=createRequest();

此方法兼容各大浏览器，可收藏至自己的utils.js当中。

request对象与服务器的几次“握手”

其实就本质而言，request对象是先向浏览器请求，然后浏览器再向服务器请求；然后服务器做出反馈，浏览器接收到返回后对request对象做出修改。

首先是checkName.php的代码：

<?php

$takenUsernames = array (‘bill‘, ‘ted‘);

sleep(2);

if (!in_array( $_REQUEST[‘username‘], $takenUsernames )) {
	echo ‘okay‘;
} else {
	echo ‘denied‘;
}

?>

注意sleep(2)这个语句。

然后是JavaScript的代码：

function checkUsername(){
    var url="checkName.php?username="+userName;
    request.onreadystatechange=showUsernameStatus;
    request.open("GET",url,true);
    request.send(null);
}
function showUsernameStatus(){
    console.info((new Date)+"request.readyState : "+request.readyState+"request.responseText : "+request.responseText);
}

当checkUsername被执行且username不为“bill”或“ted”时，可在控制台看到：

Mon Aug 25 2014 21:37:01 GMT+0800 (中国标准时间)request.readyState : 1 request.responseText :  
Mon Aug 25 2014 21:37:03 GMT+0800 (中国标准时间)request.readyState : 2 request.responseText :  
Mon Aug 25 2014 21:37:03 GMT+0800 (中国标准时间)request.readyState : 3 request.responseText :  
Mon Aug 25 2014 21:37:03 GMT+0800 (中国标准时间)request.readyState : 4 request.responseText : okay

可以看到request.onreadystatechange事件被触发了4次。这4次具体是这样子的：

第一次：request.open("GET",url,true)执行完毕，request.readyState为1，请求已准备好可以发送

第二次：request.readyState为2，表示服务器已接收到请求并正在处理

第三次：request.readyState为3，数据下载到请求对象，但相应数据还没有完全准备好，还不能使用

第四次：request.readyState为4，服务器处理完请求，数据可以使用，可以看到，此时request.responseText已有“okay”这个值

以上就是request和服务器的4次“握手”。

如果我们在进行ajax编程时无法得到返回的数据，可以看看请求对象的readyState属性的值，便可以知道服务器那边的处理是进行到哪一步再出现问题。

ajax之请求对象的创建以及它与服务器之间的4次“握手”（好吧其实只有3次）