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

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 ，否则获取不到传递过去的
数据
})

});