创建XMLHttpRequest步骤详解


    AJAX即“Asynchronous JavaScript and XML”(异步JavaScript和XML),AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词,是指一种创建交互式网页应用的网页开发技术。

    Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。

第一步:在Javascript中写一个可以获得XmlHttpRequest对象的函数。

function getXmlHttpRequest() {
	var xmlHttpRequest = null;
	try {
		// Firefox, Opera 8.0+, Safari
		xmlHttpRequest = new XMLHttpRequest();
	} catch (e) {
		try {
			// Internet Explorer
			xmlHttpRequest = new ActiveXObject('Msxml2.XMLHTTP');
		} catch (e) {
			try {
				xmlHttpRequest = new ActiveXObject('Microsoft.XMLHTTP');
			} catch (e) {
				alert('Your browser does not support AJAX!');
				return false;
			}
		}
	}
	return xmlHttpRequest;
}

第二步:调用getXmlHttpRequest()获取一个XmlHttpRequest对象。

var xhr=getXmlHttpRequest();


第三步:使用XmlHttpRequest发送请求。

(1)发送get请求

var url="some.do?name=zs";
xhr.open("get",url,true);
xhr.onreadystatechange=function(){
    if(xhr.readyState==4){
        var text = xhr.reponseText;//返回的是文本
        var xml = xhr.responseXML;//返回的是xml数据
        //使用返回的数据更新页面
        document.getElementById('a1').innerHTML=text;
    }
};
xhr.send(null);

(2)发送post请求

var url="some.do?name=zs";
xhr.open("post",url,true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.onreadystatechange=function(){
    if(xhr.readyState==4&&xmlHttpRequest.status == 200){
        var text = xhr.reponseText;//返回的是文本
        var xml = xhr.responseXML;//返回的是xml数据
        //使用返回的数据更新页面
        document.getElementById('a1').innerHTML=text;
    }
};
xhr.send("id=1");//参数列表

附注:

    readyState属性:XmlHttpRequest与服务器通讯的状态。
        0(创建完毕) :XmlHttpRequest对象已经创建好, 但没有调用open方法。
        1(初始化):XmlHttpRequest没有调用send()方法。
        2(发送):XmlHttpRequest开始发送数据给服务器。
        3(获取数据):XmlHttpRequest,正获取服务器返回的数据
        4(获取数据完毕):此时,可以通过XmlHttpRequest获得服务器返回的所有数据。

    status属性:返回服务器的状态码(200,500,404)。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值