ajax----发送异步请求的步骤

1）获取（建立）Ajax对象：获取XMLHttpRequest对象
2）建立请求：调用xhr的open方法
3）在发送请求以前须要设置回调函数：绑定指定xhr的onreadystatechange事件
4）调用send()方法发送请求

 

//建立XMLHttpReuquest 对象
function createXhr() {
 var xhr = null;
 //浏览器判断
 if (window.XMLHttpRequest) {
 //能够直接new出来对象的说明是IE七、八、9 Chrome、FireFox等浏览器
 xhr = new XMLHttpRequest();
 } else {
 //这样的就是IE 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 ，不然获取不到传递过去的
数据
})

});