认识Ajax

Ajax是动态JavaScript和XML技术的简称。主要作用是异步请求。

1.异步请求过程

（1）Ajax对象创建

        var request;
        if(window.XMLHttpRequest){
            request = new XMLHttpRequest(); //IE7+,Firefox,Chrome,Opera,Safari...
        } else {
            request = new ActiveObject("Microsoft.XMLHTTP"); //IE6,IE5
        }

下面不考虑那么老旧的兼容性了。

（2）发起请求

        //GET请求
        request.open("GET","get.php",true);
        request.send();
        //POST请求 
        request.open("POST","post.php",true);
        request.setRequestHeader("Content-Type","application/x-wwww-form-urlencoded"); //告诉服务器要发送表单，设置Conten-type
        request.send("name=xiaohua&age=3");

GET请求一般用于信息获取，url上传递参数，不够安全，信息限制在2000字节。

POST请求一般用于修改服务器资源，发送大小无限制，内容在send()方法中发送。JavaScript中需要设置请求头的Content-Type。

（3）状态监听

        request.onreadystatechange = function(){
            if(request.readyState===4 && request.status===200){
                //做些事 request.responseText
            }
        }

这个事件用来监听request.readystate的：

                    0：请求未初始化，open还没调用
                    1：服务器连接已建立，open已经调用
                    2：请求已接收，接收到头信息了
                    3：请求处理中，接收响应主体了
                    4：请求已完成，且响应已就绪，响应完成了

request.status代表HTTP响应状态码。

响应信息一般用到request.responseText。request.responseXML是XML形式的不常用。

 

2.超时

 

xhr = new XMLHttpRequest();

xhr.abort(); //取消请求

xhr.timeout = 1000;  //设置超时，如果超过1s将自动取消请求

 

3.事件

• onloadstart
• onload
• onloadend
• onprogress
• onerror
• onabort
• ontimeout
• onreadystatechange

 

jQuery中的Ajax

相比js就简洁的多：

$.ajax({                           
　　url:'check.php',
　　data: { num: value },
　　dataType:"text",
　　success: function (data) {
　　　　// ...
　　},
   error: function(jqXHR){
       // ...jqXHR.status
   }
});

$.ajax是jQuery中Ajax的底层方法，很多方法都间接调用了它，如：

$.getJSON('url',[data],function(data){   //异步获取JSON数据
　　//data["name"]
})

$.getScript('url',[data],[callback])    //异步加载js

$.get('url',function(data){})  //用GET方式异步请求服务器端数据

$.post('url',{num:$("#id").val()},function(data){}) //用POST方式异步请求服务器端数据

 

其他相关的方法：

load('url',[data],[callback])   //异步加载资源

serialize() //序列化，把表单中有name属性的元素值变成标准url编码文本字符串

$.ajaxSetup([options]) //设置Ajax全局默认选项

$(selector).ajaxStart(callback) //Ajax请求发出前触发函数

$(selector).ajaxStop(callback) //Ajax请求发出前触发函数