[随记]锋利的jQuery 第六章 jQuery与Ajax的应用

第六章 jQuery与Ajax的应用

6.1 Ajax的优势和不足

6.1.1 Ajax的优势

1. 不需要插件支持

Ajax不需要任何浏览器插件，就可以被绝大多数主流浏览器所支持，用户只需要允许JavaScript在浏览器上执行即可。

2. 优秀的用户体验

Ajax能在不刷新整个页面的前提下更新数据，这使得Web应用程序能更为迅速地回应用户的操作。

3. 提高Web程序的性能

与传统模式相比，Ajax模式在性能上的最大区别就在于传输数据的方式，在传统模式中，数据提交是通过表单来实现的，而数据获取是靠页面刷新来重新获取整页的内容。而Ajax模式只是通过XMLHttpRequest对象向服务器端提交希望提交的数据，即按需发送。

4. 减轻服务器的带宽的负担

Ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器 响应异步化。它在客户端创建Ajax引擎，把传统方式下的一些服务器负担的工作转移到客户端，便于客户端资源来处理，减轻服务器和带宽的负担。

6.1.2 Ajax的不足

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

Ajax的不足之一首先来自于浏览器。程序员必须花费大量的精力编码以兼顾各个浏览器之间的差别，来让Ajax应用能够很好地兼容各个浏览器。

2. 破坏浏览器前进、后退按钮的正常功能

在Ajax中前进和后退按钮的功能都会失效。

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

对于搜索引擎的支持也是Ajax的一项缺憾。搜索相关的爬虫程序现在还不能理解那些奇怪的JavaScript代码和因此引起的页面内容的变化。

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

JavaScript是Ajax的重要组成部分，在目前，缺少很好的JavaScript开发和调试工具。

6.2 Ajax的XMLHttpRequest对象

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

XMLHttpRequest对象提供了一个相对精简易用的API。

6.4 编写第1个Ajax例子

IE5、IE6是以ActiveXObject的方式引入XMLHttpRequest对象的，而其他浏览器的XMLHttpRequest对象是window的子对象。

使用open()方法初始化XMLHttpRequest对象，指定HTTP方法和要使用的服务器URL。open(method,url,async) 规定请求的类型、URL以及是否异步处理请求。

参数说明：

method：请求的类型；GET 或 POST

url：文件在服务器上的位置

async：true（异步）或 false（同步）

默认情况下，使用XMLHttpRequest对象发送的HTTP请求是异步进行的，但是可以显式地把async参数设置为true。

因为要做一个异步调用，所以需要注册一个XMLHttpRequest对象将调用的回调事件处理器当它的readyState值改变时调用。当readyState值被改变时，会激发一个readystatechange事件，可以使用onreadystatechange属性来注册该回调事件处理器。

使用send()方法发送该请求，因为这个请求使用的是HTTP的GET方式，所以可以在不指定参数或使用null参数的情况下调用send()方法。

当请求状态改变时，XMLHttpRequest对象调用onreadystatechange属性注册的事件处理器。因此，在处理该响应之前，事件处理器应该首先检查readyState的值和HTTP状态。当请求完成加载(readyState值为4)并且响应已经成功(HTTP状态值为200)时，就可以调用一个JavaScript函数来处理该响应内容。

步骤：

1. 创建XMLHttpRequest对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

例：

var xmlhttp;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

2. 向服务器发送XMLHttpRequest请求

方法

描述

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST

url：文件在服务器上的位置

async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。

string：仅用于 POST 请求

例：

xmlhttp.open("GET","test1.txt",true);

xmlhttp.send();

3. XMLHttpRequest响应

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

方法

描述

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

status

200: "OK"

404: 未找到页面

例：

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()

{

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

  {

    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

  }

}

4. 服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

方法

描述

responseText

获得字符串形式的响应数据。

responseXML

获得 XML 形式的响应数据。

例：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

6.5 jQuery中Ajax

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

6.5.1 load()方法

1. 载入HTML文档

load()方法是jQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入DOM中。它的结构为：

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

 

2. 筛选载入的HTML文档

load()方法的URL参数的语法结构为："url selector"。注意，URL和选择器之间有一个空格。

例如：

$("#msg").load("ajax.html .para");

3. 传递方式

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

4. 回调函数

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

请求状态包括：success、error、notmodified和timeout4种

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

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

$.get()方法使用GET方式来进行异步请求。它的结构为：

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

$.get()方法的回调函数只有两个参数：返回内容data和请求状态status。

 

返回内容data的格式有：

1)HTML片段

2)XML文档

由于期待服务器返回的数据格式是XML文档，因此需要在服务端设置Content-Type类型，代码如下：

header("content-type:text/xml;charset=utf-8"); //PHP

3)JSON文件

2. $.post()方法

1)GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器。

2)GET方式对传输的数据有大小限制(通常不能大于2KB)，而使用POST方式传递的数据量要比GET方式大得多。

3)GET方式请求的数据会被浏览器缓存起来，这会带来严重的安全性问题，而POST则不会。

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

1. $.getScript()

有时，在页面初次加载时就取得所需的全部JavaScript文件是完全没有必要的。可以在需要哪个JavaScript文件时，动态创建<script>标签。jQuery代码如下：

$(document.createElement("script")).attr("src","test.js").appendTo("head");

或者

$("<script type='text/javascript' src='test.js'></script>").appendTo("head");

2. $.getJSON()

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

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

6.5.4 $.ajax()方法

它是jQuery最底层的Ajax实现。它的结构为：

$.ajax(options)

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

前面用到的$.load()、$.get()、$.post()、$.getScript()和$.getJSON()这些方法，都是基于$.ajax()方法构建的，$.ajax()方法是jQuery最底层的Ajax实现，因此可以用它来代替前面的所有方法。

例如，采用如下代码代替$.getScript()方法：

$(function()

{

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

{

$.ajax

({

type:"GET",

url:"test.js",

dataType: "script"

});

});

})

 

6.6 序列化元素

1. serialize()方法

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

例如：

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

{

$.get("get1.php", $("#form1").serialize(), function(data, status)

{

$("#msg").html(data);

});

});

因为serialize()方法作用于jQuery对象，所以不光只有表单能使用它，其他选择器的元素也都能使用它。

2. serializeArray()方法

该方法不是返回字符串，而是将DOM元素序列化后，返回JSON格式的数据。

3. $.param()方法

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

例如：

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

var k = $.param(obj);

alert(k); //输出a=1&b=2&c=3

6.7 jQuery中的Ajax全局事件

通过jQuery提供了一些自定义全局函数，能够为各种上与Ajax相关的事件注册回调函数。例如当Ajax请求开始时，会触发ajaxStart()方法的回调函数；当Ajax请求结束时，会触发ajaxStop()方法的回调函数。

例如：某个网站图片过多，在Ajax请求过程中，只要图片还未加载完毕，就会一直显示“加载中...”的提示信息。可以极大地改善用户的体验。

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

$("#loading").ajaxStart(function()

{

$(this).show();

});

$("#loading").ajaxStop(function()

{

$(this).hide();

});

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

$.ajax()

{

url: "test.html",

global: false //不触发全局Ajax事件

}