XMLHTTPRequest对象

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;
 }
} 

Web 2.0中AJAX技术应用详解

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值