1)获取(创建)Ajax对象:获取XMLHttpRequest对象
2)创建请求:调用xhr的open方法
3)在发送请求之前需要设置回调函数:绑定指定xhr的onreadystatechange事件
4)调用send()方法发送请求
//创建XMLHttpReuquest 对象
function createXhr() {
var xhr = null;
//浏览器判断
if (window.XMLHttpRequest) {
//可以直接new出来对象的说明是IE7、8、9 Chrome、FireFox等浏览器
xhr = new XMLHttpRequest();
} else {
//这样的就是IE 5.5、 IE 6等低版本的浏览器
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
//创建异步请求方法get
function getServerText() {
//获取xhr
var xhr = createXhr();
//创建请求
xhr.open("get", "server.php", "true");//true表示异步请求
//设置回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
//服务器已经正确处理请求且正确响应数据到客户端
var resText = xhr.responseText;//返回服务器响应文本
//获取服务器响应给客户端的文本即server.php中的文本内容
document.getElementById("showText").innerHTML = resText;
}
}
//发送请求
xhr.send(null);//请求方式为get,所以请求体必须是null
} 实例:模拟服务器发送请求
ajax提交数据(get方法):
$(document),ready(function(){
$("#txtName").blur(function(){
1)获取xhr
var xhr =createxhr();
2)创建请求
var name = $("#txtName").val();
var url = "checkname.jsp?name="+name;
xhr.open("get",url,true);
3)设置回调函数 xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
//服务器已经正确处理请求且正确响应数据到客户端
var resText= xhr.responseText;//返回服务器响应文 本
$("#txtNameTip").html(resText);//获取响应回来的 数据
}
}
4)发送请求
xhr.send (null);//get发送请求的方法
});
});
//创建异步请求方法post
$(document),ready(function(){
$("#txtName").blur(function(){
1)获取xhr
var xhr =createxhr();
2)创建请求
var name = $("#txtName").val();
var url = "checkname.jsp";
xhr.open("post",url,true);
xhr.setRequestHeader("Content-Type","application/x-www-
form-urlencoded");
3)设置回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){ //注意顺序
//服务器已经正确处理请求且正确响应数据到客户端
var resText= xhr.responseText;//返回服务器响应文
本
$("#txtNameTip").html(resText);//获取响应回来的
数据
}
}
4)发送请求
xhr.send ("name="+name);//Post方法发送方法
注意:必须在创建请求之后,发送请求之前使用setRequestHeader
()显示更改Content-Type消息头的值为
application/x-www-form-urlencoded ,否则获取不到传递过去的
数据
})
});