使用Ajax异步调用

使用Ajax异步调用

一、Ajax介绍

1. Ajax指异步Javascript和XML，Ajax带来用户体验的改变，页面进行局部的异步刷新；
2. AJAX = DHTML (HTML、CSS、JavaScript ) + XMLHttpRequest 对象 ；
3. 传统web交互模型，浏览器直接将请求发送给服务器，服务器响应直接发给浏览器；而Ajax交互模型，浏览器首先将请求发送Ajax引擎（以XMLHttpRequest为核心），Ajax引擎再将请求发送给服务器，服务器响应先发给Ajax引擎，再由引擎传给浏览器显示。

二、Ajax的使用

1. 创建XMLHttpRequest对象；
2. 将状态触发器绑定到一个函数；
3. 使用open方法建立与服务器的连接；
4. 向服务器发送数据；
5. 在回调函数中对返回数据进行处理。

//get方式发送数据，参数已经在url上
xmlHttpReq.open("GET", "url?key=value");
//post方式发送数据，需要设置编码格式
xmlHttpReq.open("POST", "url");
xmlHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttpReq.send("name=xxx&pwd=xxx");
//回调函数编写
if(xmlHttpReq.readyState == 4) {
    if(xmlHttpReq.status == 200) {
        //响应有效
    }
}

三、Ajax案例

1. 通过离开焦点发送Ajax请求验证用户名是否存在；

var xmlHttpReq = createXMLHttpRequest();
xmlHttpReq.onreadystatechange = function() { //状态回调函数
    //readyState属性说明请求是否发送成功
    //0-请求未初始化（在调用open方法之前） 
    //1-请求已提出（调用send方法之前） 
    //2-请求已发送（可以从响应中得到内容头部）
    //3-请求处理中（响应中部分数据可用，服务器还没有完成响应）
    //4-请求已完成（可以访问服务器响应）
    if(xmlHttpReq.readyState == 4) { 
        //status服务器响应状态
        //200-服务器响应成功 404-资源错误 500-服务器内部错误
        if(xmlHttpReq.status == 200) { 
            //响应成功
        }
    }
};
xmlHttpReq.open("GET", "checkUser?username=" + username);
xmlHttpReq.send(null);

四、jQuery的Ajax

1. jQuery库提供了方便的Ajax实现

//方式1
load(url, [data], [callback])
//方式2
jQuery.get(url, [data], [callback])
jQuery.post(url, [data], [callback])
//方式3
jQuery.ajax(options)
//方式4
jQuery.getJSON(url, [data], [callback])

2. 简单示例

$(function(){
   $("#mybutton").bind("click", function(){
       $("#mydiv").load("URL地址");
   }); 
});