jQuery第六章

jQuery与Ajax应用

一、Ajax的优势和不足

1.Ajax的优势：

（1）不需要插件支持：不需要任何浏览器插件就可以被绝大多数浏览器支持

（2）优秀的用户体验：能在不刷新整个页面的前提下更新数据

（3）提高web程序的性能：按需发送数据

（4）减轻服务器和带宽的负担：在客户端创建Ajax引擎，把一些工作转移到客户端。

2.Ajax的不足

（1）浏览器对XMLHttpRequest对象的支持度不足：许多浏览器不支持XMLHttpRequest

（2）破坏浏览器前进、“后退”按钮的正常功能：这些按钮会失效

（3）对搜索引擎的支持的不足：爬虫程序无法理解javascript代码

（4）开发和调试工具的缺乏：缺少javascript开发和调试工具

二、Ajax的XMLHttpRquest

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

三、安装Web环境——Appserv

1.下载AppServ

下载地址为：http://www.appservnetwork.com

2.安装AppServ

安装AppServ非常简单，只要连续轻松的单击“next”按钮，就可以

四、第一个Ajax例子

在解除jQuery的Ajax操作之前，先看一个用传统的javascript实现的Ajax例子。例子描述：单击一个按钮，然后通过传统javascript的Ajax的方式从服务器端取回一个“Hello Ajax!”的字符串并显示在页面上。

首先在前台页面中书写HTML代码，代码如下：

<input type = “button” value = “Ajax提交” onclick = ”Ajax() ;”/>

<div id = “resText”></div>

<button>按钮用来触发Ajax，id为“resText”的元素用来显示从服务器返回的HTML文本。接下来完成Ajax()函数。代码如下：

$(function(){

$("#send").click(function(){

$("#resText").load("1.html");

});

})

五、jQuery中的Ajax

jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是load()、$.get()和$post()方法，第3层是$.getScript()和$getJSON()方法。首先介绍第2层的方法，因为使用频率很高

1.load()方法

（1）载入HTML文档

load()方法的结构为：

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

它接受3个参数：

第一个是string类型的url，表示请求HTML页面的URL地址

第二个是object类型的data（可选），表示发送至服务器的key/value数据

第三个是function类型的callback（可选），表示请求完成时回调的函数，无论请求成功或失败

首先构建一个被load()方法加载并追加到页面中的HTML文件，名字为test.html，HTML代码如下：

<div class = “comment”>

<h6>张三：</h6>

<p class = “para”>沙发.</p>

</div>

<div class = “comment”>

<h6>李四：</h6>

<p class = “para”>板凳.</p>

</div>

<div class = “comment”>

<h6>王五：</h6>

<p class = “para”>地板.</p>

</div>

然后新建一个空白页面，在上面添加两个元素：<button>按钮用来触发Ajax事件，id为“resText”的元素用来显示追加的HTML内容。HTML代码如下：

<input type="button" value="Ajax获取" id = “send">

<div class="comment">已有评论：</div>

<div id = “resText”></div>

接下啦开始编写jQuery代码。等DOM元素加载完毕后，通过单击id为“send”的按钮来调用load()方法，然后将test.html的内容加载到id为“resText”的元素里。

jQuery代码如下：

$(function(){

$(“#send”).click(function(){

$(“#resText”).load(“test.html”) ;

});

});

（2）筛选载入的HTML文档

上面例子是将test.html页面中的内容都加载到id为“resText”的元素里。如果只需要test.html页面内的某些元素，那么可以使用load()方法的URL参数来达到目的。

load方法的URL参数的语法结构为：“url selector”。例如，需要加载test.html页面中class名为“para”的内容，可以使用如下代码：

$(“#resText”).load(“test.html  .para”) ;

（3）传递参数

load()方法的传递方式根据参数data来自动指定，如果没有参数传递，则采用GET方式传递，反之则会自动转换为POST方式。

（4）回调参数

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

$(“#resText”).load(“test.html” , function(responseText , textStatus , XMLHttpRequest){

//  responseText ：  请求返回的内容

//     testStatus ：  请求状态：success、error、notmodified、timeout4种

//  XMLHttpRequest ： XMLHttpRequest对象

})

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

$.get()和$.post()方法是jQuery的全局函数。

（1）$.get()方法

$.get()方法使用GET方式来进行异步请求。

它的结构为：$.get(url [ , data] [ , callback ] [ , type ])

$.get()方法参数解释：

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

下面是一个评论页面的HTML代码，通过该段代码来介绍$.get()方法的使用

<form id="form1" action="#">

<p>评论：</p>

<p>姓名：<input type="text" name="username" id="username"></p>

<p>内容：<textarea name="content" id="content" rows="2" cols="20"></textarea></p>

<p><input type="button" id="send" value="提交"></p>

</form>

<div class="comment">已有评论：</div>

<div id="resText"></div>

（1）使用参数：

首先要确定请求页面的URL地址。代码如下：

$(“#send”).click(function(){

$.get(“get1.php” data参数，回调函数) ;

}) ;

然后，在提交之前，需要获取“姓名”和“内容”的值作为data参数传递给后台。

代码如下：

$(“#send”).click(function(){

$.get(“get1.php” , {

username : $(“#username”).val() ,

content : $(“#content”).val()

} ，回调函数) ;

}) ;

如果服务器端接收到传递的data数据并成功返回，那么就可以通过会调换函数将返回的数据显示到页面上。

$.get()方法的回调函数只有两个参数，代码如下：

fuction(data , textStatus){

//data : 返回的内容，可以是XML文档、JSON文档、HTML片段等等

//textStatus : 请求状态：success、error、notmodified、timeout4种

}

回调函数只有当数据成功返回后才能被调用。

（2）数据格式：

①HTML片段

由于服务器端返回的数据格式是HTML片段，因此并不需要经过处理就可以将新的HTML片段数据插入到主页中。jQuery代码如下：

$(function(){

$("#send").click(function(){

$.get("get1.php",{

username : $("#username").val(),

content : $("#content").val()

}, function(data , textStatus){

$("#resText").html(daga);  //将返回的数据添加到页面上

});

});

})

②XML文档

由于服务器端返回的数据格式是XML文档，因此需要对返回的数据进行处理，处理XML文档与处理HTML文档一样，也可以使用常规的attr()、find()、filter()以及其他方法。jQuery代码如下：

$(function(){

$("#send").click(function(){

$.get("get1.php",{

username : $("#username").val(),

content : $("#content").val()

}, function(data , textStatus){

var username = $(data).find("comment").attr("username");

var content = $(data).find("comment content").text();

var txtHtml = "<div class = 'comment'><h6>"

+ username + ":</h6><p class='para'>"

+ content + "</p></div>";

$("#resText").html(txtHtml);

});

});

})

XML文档的体积相对较大，解析和操作它们的速度要慢一些。

③JSON文件

JSON文件非常简洁易读，与XML文档一样可以方便的被重用。

由于服务器端返回的数据格式是JSON文件，因此需要对返回的数据进行处理之后，才可以将新的HTML数据添加到主页中。jQuery代码如下：

$(function(){

$("#send").click(function(){

$.get("get1.php",{

username : $("#username").val(),

content : $("#content").val()

}, function(data , textStatus){

var username = data.username;

var content = data.content;

var txtHtml = "<div class = 'comment'><h6>"

+ username + ":</h6><p class='para'>"

+ content + "</p></div>";

$("#resText").html(txtHtml);

},"json");

});

})

将$.get()方法的第4个参数设置为“json”来代表期待服务器端返回的数据格式。

通过对3中数据格式的优缺点进行分析，可以得知在不需要与其他应用程序共享数据的时候，使用HTML片段来返回数据一般来说是最简单的；如果数据需要重用，那么JSON文件是不错的选择，它在性能和文件大小方面具有优势；而当远程应用程序未知时，XML文档时明智的选择。

2.$ .post()方法

$.get()方法与$.post()方法的区别：

GET请求	POST请求
GET请求会将参数跟在URL后进行传递	POST请求则是作为HTTP消息的实体内容发送给Web服务器
GET方式对传输的数据有大小限制（通常不能大于2KB）	POST方式传递的数据量要比GET方式大得多（理论上不受限制）
GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号密码等。在某种情况下，GET方式会带来严重的安全性问题	POST方式相对来说可以避免这些问题
在PHP中，GET方式的数据可以用$_GET[]获取，也可以用$_REQUEST[]获取	POST方式可以用$_POST[]获取，也可以用$_REQUEST[]获取

由于POST和GET方式提交的数据可以通过$_REQUEST[]获取，因此只需要改变jQuery函数就可以将程序在GET和POST请求之间切换。代码如下：

$(function(){

$("#send").click(function(){

$.post("post1.php" ,{

username : $("#username").val() ,

content : $("#content").val()

} , function(data , textStatus){

$("#resText").append(data);

});

});

})

另外，当load()方法带有参数传递时，会使用POST方式发送请求。因此也可以使用load()方法来完成同样的功能。代码如下：

$(function(){

$("#send").click(function(){

$("#resText").load("post1.php",{

username : $("#username").val(),

content : $("#content").val()

})

});

})

3.$.getScript()方法和$.getJson()方法

（1）$.getScript()

有时候，在页面初次加载时就取得所需的全部javascript文件是完全没有必要的。为此jQuery提供了$.getScript()方法来直接加载.js文件，与加载一个HTML片段一样简单方便，并且不需要对javascript文件进行处理，javascript文件会自动执行。

jQuery代码如下：

$(function(){

$(“#send”).click(function(){

$.getScript(‘test.js’);

});

})

与其他方法一样，$.getScript()方法也有回调函数，它会在javascript文件成功载入后运行。例如想载入jQuery官方颜色动画插件，成功后给元素绑定颜色变化动画可以用到$.getScript()方法的回调函数。代码如下：

$(function(){

$.getScript(‘jquery.color.js’,function(){

$(‘#go’).click(function(){

$(“.block”).animate({backgroundColor : ‘pink’} , 1000)

.animate({backgroundColor : ‘blue’} , 1000) ;

});

});

});

（2）$.getJSON()方法

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

jQuery代码如下：

$(function(){

$(“#send”).click(function(){

$.getJSON(‘test.json’) ;

}) ;

})

加载JSON文件之后，javascript对返回的数据要进行处理就要调用回调函数。代码如下：

$(function(){

$(“#send”).click(function(){

$.getJSON(‘test.json’ , function(data){

// data ：返回的数据

}) ;

}) ;

})

jQuery使用了一个通用的遍历方法$.each()，可以用于遍历对象和和数组。$.each()函数不同于jQuery对象的each()方法，它是一个全局函数，不操作对象，而是以一个数组或者对象作为第1个参数，以一个回调函数作为第2个参数。回调函数拥有两个参数：第1个为对象的成员或数组的索引，第2个为对应变量或内容。代码如下：

$(function(){

$(“#send”).click( function(){

$.getJSON(‘test.json’ , function(data){

$(“#resText”).empty();

var html = ‘ ‘ ;

$.each(data , function(commentIndex , comment){

html += ‘<div class = “comment”><h6>’

+ comment[‘username’] + ‘:</h6><p class = “para”>’

+ comment[‘content’] + ‘</p></div>’ ;

}) ;

$(‘#resText’).html(html) ;

});

});

})

4.$.ajax()方法

$.ajax()方法是jQuery最底层的Ajax实现，它们的结构是：

$.ajax(options)

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

六、序列化元素

1.serialize()方法

与jQuery其他方法一样，serialize()方法也是作用于一个jQuery对象，它能够将DOM元素的内容序列化为字符串，用于Ajax请求。

$(“#send”).click(function(){

$.get(“get1.php” , $(“#form1”).serialize() , function(data , textStatus){

$(“#resText”).html(data) ;

}) ;

}) ;

2.serializeArray()方法

该方法不是返回字符串而是将DOM元素序列化之后返回JSON格式的数据。jQuery代码如下：

var fields = $(“: checkbox , : radio”).serializeArray() ;

console.log(fields) ;

3.$.param()方法

它是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化。比如将一个普通的对象序列化：

var obj = {a : 1 , b : 2 , c : 3} ;

var k = $.param(obj) ;

alert(k) ;