步骤一:创建XMLHttpRequest对象
XMLHttpRequest对象是Ajax的应用的基础,所有主流浏览器的支持该对象。IE7开始提供对XMLHttpRequest对象的支持。
function CreateRequestObject() {
var ajaxRequest;
try {
ajaxRequest = new XMLHttpRequest();
} catch (e) {
try {
ajaxRequest = new ActiveXObject('Msxm12.XMLHTTP');
} catch (e) {
try {
ajaxRequest = ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {
return false;
}
}
}
return ajaxRequest;
}
根据浏览器的不同创建XMLHttpRequest对象。
XMLHttpRequest 的主要属性有与方法:
stauts | 请求响应头的HTTP状态码,例如200或400 |
statusText | 状态码的字符串形式 |
readyState | 当前对象状态的数字 |
responseText | 服务器返回的字符串信息 |
responseXML | 服务器返回的xml |
onreadystatechange | 当readyState状态改变时调用的事件处理函数 |
onerror | 发生错误时当用的函数 |
onprogress | 内容加载中调用的函数 |
onload | 内容加载完调用的 |
方法 | |
abort() | |
getAllResponseHeaders() | |
getResponseHeader('ser') | |
open(‘post/get’, url, bool) | 等初始化XMLHttpRequest对象 |
send() | 发送请求 |
setRequestHeader() |
步骤二:初始化XMLHttpRequest对象,并向服务器发送请求。
//GET
ajaxRequest.open('GET', 'url?param=' + paramvalue, true);//true代表异步响应,不锁定屏幕。false代表同步,要等到服务器返回结构才能继续操作
ajaxRequest.send();
//POST
ajaxRequest.open('POST', 'url', true);
ajaxRequest.send('param='+paramvalue); //用于传递post方法的参数,如果没有就传递null
步骤三:监控服务器相应状态
要监控服务器状态应该给XMLHttpRequest对象的onreadystatechange事件处理函数赋予函数,该函数会在readyState状态改变时被触发。
ajaxRequest.onreadystatechange = function() {
if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200) { //当readyState为4 且status为200时,表示请求成功
document.getElementById('message').innerHTML = ajaxRequest.responseText;
}
}