readyState的取值如下:
0 (未初始化)
1 (正在装载)
2 (装载完毕)
3 (交互中)
4 (完成)
所以只有当readyState=4时,一个完整的服务器响应已经收到了,函数才可以处理该响应。
function callbackfunc(){
if(req.readyState == 4){
if(req.status == 200){ //req.status==200表示状态正常
var resultStr = req.responseText;
var divDisplay = document.getElementById("showDiv");
divDisplay.innerHTML = "";
divDisplay.innerHTML = resultStr;
}
}
}
if (req.readyState == 4)
{
// 收到完整的服务器响应
}
else
{
// 没有收到完整的服务器响应
}
当HTTP服务器响应的值为200时(即req.status==200时),表示状态正常。
在检查完请求的状态值和响应的HTTP状态值后,就可以处理从服务器得到的数据了。有两种方式可以得到这些数据:
(1)以文本字符串的方式返回服务器的响应
(2)以XMLDocument对象方式返回响应
var req; // 创建XMLHTTPRequest对象
function createXMLHttpRequest() {
if (window.ActiveXObject) { // 判断是否支持ActiveX控件
req = new ActiveXObject("Microsoft.XMLHTTP"); // 通过实例化ActiveXObject的一个新实例来创建XMLHTTPRequest对象
} else if (window.XMLHttpRequest) { // 判断是否把XMLHTTPRequest实现为一个本地javascript对象
req = new XMLHttpRequest();// 创建XMLHTTPRequest的一个实例(本地javascript对象)
}
}
req.open("GET", url, true);//open是个函数,打开一个网址为url的网站链接,传递方式是GET型
第三个参数设置请求是否为异步模式。如果是TRUE,JavaScript函数将继续执行,而不等待服务器响应。这就是"AJAX"中的"A"。
同步与异步:
举个例子:普通B/S模式(同步)AJAX技术(异步)
同步(false):提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事
异步(true): 请求通过事件触发->服务器处理(这是浏览器仍然可以作其他事情)->处理完毕
ajax.open方法中,第3个参数是设同步或者异步。prototype等js类库一般都默认为异步,即设为true。先说下同步的情况下,js会等待请求返回,获取status。不需要onreadystatechange事件处理函数。而异步则需要onreadystatechange事件处理,且值为4再正确处理下面的内容。
同步传输模式:
function RequestByGet(nProducttemp,nCountrytemp)
{
var xmlhttp
if (window.XMLHttpRequest)
{
//isIE = false;
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
//isIE = true;
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//Web page location.
var URL="http://www.baidu.com/;
xmlhttp.open("GET",URL, false);
//xmlhttp.SetRequestHeader("Content-Type","text/html; charset=Shift_JIS")
xmlhttp.send(null);
var result = xmlhttp.status;
//OK
if(result==200)
{
document.getElementById("div_RightBarBody").innerHTML=xmlhttp.responseText;
}
xmlhttp = null;
}
异步传输模式:
var xmlhttp
function RequestByGet(nProducttemp,nCountrytemp)
{
if (window.XMLHttpRequest)
{
//isIE = false;
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
//isIE = true;
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//Web page location.
var URL="http://www.baidu.com/";
xmlhttp.open("GET",URL, true);
xmlhttp.onreadystatechange = handleResponse;
//xmlhttp.SetRequestHeader("Content-Type","text/html; charset=UTF-8")
xmlhttp.send(null);
}
function handleResponse()
{
if(xmlhttp.readyState == 4 && xmlhttp.status==200)
{
document.getElementById("div_RightBarBody").innerHTML=xmlhttp.responseText;
xmlhttp = null;
}
}