6 《锋利的jQuery》Ajax的应用

浏览数：39 / 时间：2015年06月09日

Ajax的优势

1、不需要插件支持

2、优秀的用户体验

3、提高web程序的性能（传输数据的方式，按需发送）

4、减轻服务器和带宽的负担

Ajax的不足

1、浏览器对XMLHttpRequest对象支持度不足

2、破坏浏览器前进、“后退”的正常功能

3、对搜索引擎的支持不足

4、开发和调试工具的缺乏

Ajax的核心是XMLHttpRequest对象，它是通过Ajax实现的关键——发送异步请求、接收响应及执行回调都是通过它来完成的。

    $(function () {
        var xmlHttpReq = null;
//        创建对象
//        IE5,6是以ActiveXObject方式引入XMLHttpRequest
        if (window.ActiveXObject) {
            xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
        }
//        其他浏览器XMLHttpRequest是window的子对象
        else if (window.XMLHttpRequest) {
            xmlHttpReq = new XMLHttpRequest();
        }
        xmlHttpReq.open("GET", "data.txt", true);
        xmlHttpReq.onreadystatechange = RequestCallBack;  //当readyState值改变时，会激发onreadystatechange事件，
                                                          //使用该属性来注册回调事件处理器
        xmlHttpReq.send(null);   //发送请求
        function RequestCallBack() {
            if (xmlHttpReq.readyState == 4) {     //请求完成加载
                if (xmlHttpReq.status == 200) {   //响应已经成功
                    $("#mes").html(xmlHttpReq.responseText);
                }
            }
        }
    });

1、load()方法

load(url [,data] [,callback])

a、载入HTML文档：$("#resText").load("test.html");

b、筛选载入的HTML文档：$("#resText").load("test.html .para");

c、传递方式：如果没有参数则采用GET方式传递，反之，则会自动转换为POST方式

d、回调参数：该回调函数有三个参数，分别是

        $("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){
//            responseText: 请求返回的内容
//            textStatus:  请求状态：success、error、notmodified、timeout四种
//            XMLHttpRequest:  XMLHttpRequest对象
        })

tip：在load()方法中无论Ajax请求是否成功，只要当请求完成（complete）后，回调函数就被触发

2、$get()和$pos()方法

load()方法通常用来从web服务器上获取静态的数据文件，而$get()或者$post()是传参数给服务器中的页面。

$get()和$pos()方法是jquery中的全局函数，而在此之前的jquery方法都是对jquery对象进行操作的。

$.get(url [,data] [,callback] [,type])

参数名称	类型	说明
url	String	请求的HTML页的地址
data(可选)	Object	发送至服务器的key/value数据会作为QueryString附加到请求URL中
callback(可选)	Function	载入成功时回调函数(当为success)自动将请求结果和状态传递给该方法
type(可选)	String	服务器返回内容的格式，包括xml,html,script,json,text和_default

回调函数跟load()方法不同的是，只有当数据成功返回（success）后才被调用。

function(data,textStatus){
        //data           返回的内容，可以是XML文档，JSON文件,HTML片段等
       //textStatus      请求状态：success，error，notmodified，timeout 四种
    }

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

6 《锋利的jQuery》Ajax的应用