jQuery（7）——jQuery与Ajax的应用

---恢复内容开始---

jQuery与Ajax的应用

【Ajax的优势和不足】

优势

（1）不需要插件支持；

（2）优秀的用户体验；

（3）提高Web程序的性能；

（4）减轻服务器和宽带的负担；

不足

（1）浏览器对XMLHttpRequest对象的支持度不足；

（2）破坏浏览器前进、“后退”按钮的正常功能；

（3）对搜索引擎的支持的不足；

（4）开发和调试工具的缺乏；

【Ajax的XMLHttpRequest对象】

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

安装Web环境——AppServ

【jQuery中的Ajax】

load()方法：能载入远程HTML代码并插入DOM中。结构为：load( url [,data] [,callback])

参数解释：url：string类型，请求HTML页面的URL地址；

　　　　　data（可选）：object类型，发送至服务器的key/value数据；

　　　　　callback（可选）：function类型，请求完成时的回调函数，无论请求成功或失败。

 载入HTML文档：开发人员只需要使用jQuery选择器为HTML片段指定目标位置，然后将要加载的文件的URL作为参数传给load()方法即可。主页面的样式会立即应用到新加载的内容上。

筛选载入的HTML文档：load()方法的URL参数的语法结构为："url selector"。如：$("#resText").load("test.html .para");

传递方法：根据参数data来自动指定。如果没有参数传递，则采用GET方式传递；反之，则会自动转换成POST方式。

//无参数传递，即GET方式
$("resText").load("test.php",function(){
    //....
});
//有参数传递，即POST方式
$("resText").load("test.php",{name:"rain",age:"22"}.function(){
    //....
});

回调参数：对于必须在加载完成后才能继续的操作，load()方法提供了回调函数（callback），该函数有三个参数，分别代表请求返回的内容、请求状态和XTMLHttpRequest对象

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

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

$.get()方法和$.post()方法

这两个方法是jQuery中的全局函数。可以传递一些参数给服务器中的页面。

$.get()方法：使用GET方法来进行异步请求。结构为：$.get(url [,data] [,callback] [,type])

data（可选）：object类型，发送至服务器的key/value数据会作为QueryString附加请求到URL中。

callback（可选）：function类型，载入成功时回调函数（只有当Response的返回状态是success才调用该方法）自动将请求结果和状态传递给该方法。

type（可选）:string类型，服务器端返回内容的格式，包括xml、html、script、json、text和_default。

（1）使用参数

$("#send").click(function(){
    $.get("get1.php",{
            username:$("#username").val(),
            content:$("#content").val()
    },回调函数);
});

$.get()方法的回调函数只有两个参数，且只有当数据成功返回后才会被调用。代码如下

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

（2）数据格式：HTML片段、XML文档、JSON文件。

$.post()方法：与$.get()方法结构和使用方法都相同，其不同点：

（1）GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器。在Ajax请求中，这种区别对用户不可见。

（2）GET方式对传输的数据大小限制，而POST方式比GET方式大得多。

（3）GET方式请求的数据会被浏览器缓存起来，可以取得浏览器的历史记录，但也具有严重的安全问题。

（4）GET方式和POST方式传递的数据在服务器端的获取不相同。但是两种方式都可以用$_REQUEST[]来获取。

$.getScript()方法和$.geetJson()方法

$.getScript()方法：直接加载.js文件。

$(function(){
    $('#send').click(function(){
        $getScript('test.js');
    });
})

 $.getScript()方法也有回调函数，会在JavaScript文件成功载入之后运行。

$.geetJson()方法：用于加载JSON文件，与$.getScript()方法用法相同。

$.each()函数：用于遍历对象和数组。是一个全局函数，不操作jQuery对象，而是以一个数组或者对象作为第一个参数，以一个回调函数作为第二个参数。其中回调函数拥有两个参数：第一个是对象成员或数组索引，第二个为对应变量或内容。

$.ajax()方式

结构为：$.ajax(options)。只有一个参数，但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息，参数以key/value形式存在，且所有参数都是可选的。

$.ajax()方法是jQuery最底层烦人Ajax实现，因此可以用它来代替前面提及的所有方法。

【序列化元素】

serialize()方法：作用于一个jQuery对象，能将DOM元素内容序列化为字符串，用于Ajax请求。使用该方法可以将以下代码

$("#send").click(function(){
    $.get("get1.php",{
            username:$("#username").val(),
            content:$("#content").val()
    },function(data,textStatus){
        $("#resText").html(data);    //将返回的数据添加到页面上
    });
});

简化为

$("#send").click(function(){
    $.get("get1.php",$("#form1").serialize(),function(data,textStatus){
        $("#resText").html(data);    //将返回的数据添加到页面上
    });
});

serialize()方法在其他选择器选取的元素也都能使用该方法：

serializeArry()方法：将DOM元素序列化后，返回JSON格式的数据。

$(function(){
    var fields=$(":checkbox.:radio").serializeArry();
    console.log(fields);   //用Firebug输出
    $.each(fields,fuction( i , field ){
        $("#results").append(field.value+",");
    });
})

$.param()方法：是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化。

【jQuery中的Ajax全局事件】

<div id="loading">加载中...</div>

当Ajax请求开始时，将此元素显示，当Ajax请求结束后，将此元素隐藏。

$("#loading").ajaxStart(function(){
    $(this).show();
});
$("#loading").ajaxStop(function(){
    $(this).hide();
});  //也可以用链式写法

如果想使某个Ajax请求不受全局方法的影响，那么可以在使用$.ajax(options)方法时，将参数中的global设置为false。

---恢复内容结束---