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)。