8.7　jQuery与Ajax

学习目标

了解Ajax技术，熟悉load、get、post方法。

近年来，自从google地图将XMLHttpRequest对象异步应用推广进而形成Ajax应用技术后，Ajax技术就几乎已经应用到了目前所有网站中。传统js操作Ajax代码编写非常麻烦，代码量也多，不易调试。而使用jQuery自身提供的方法解决了以上所有问题，对于Ajax操作，jQuery提供了常用的$.load、$.get、$.post函数方法，还提供了完整Ajax应用的$.ajax函数。

8.7.1　什么是Ajax

Ajax，即异步JavaScript和XML（Asynchronous JavaScript and XML），是一种现有网页技术的又一种灵活应用。Ajax通过XMLHttpRequest对象在后台与服务器交换少量数据的方式，允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下，对网页部分数据进行更新。所以也把Ajax技术称为Web页面异步刷新技术。

8.7.2　Ajax和jQuery

jQuery确实是一个挺好的轻量级的JS框架，能帮助开发人员快速地开发JS应用，并在一定程度上改变了编写JavaScript代码的习惯。当然传统Ajax应用也不例外，jQuery提供了用于Ajax开发的丰富函数（方法）库。

通过jQuery Ajax函数库，使用HTTP Get和HTTP Post等，可以异步获取服务器端数据信息，只是代码非常简洁，省去了传统复杂的DOM编程代码。另外jQuery Ajax函数库也可以从远程服务器请求TXT、HTML、XML或JSON，并可以直接把远程数据载入网页的指定HTML元素中。

总之，使用jQuery提供的Ajax函数库就是为了简化传统Ajax操作代码，而jQuery框架也的确做到了这一点。

8.7.3　使用load方法

在jQuery框架中，load()方法通过Ajax请求从服务器加载数据，并把返回的数据放置到指定的元素中。使用load()方法可以加载文本文件、网页文件、程序文件中的数据信息。

1．使用load()获取文本.txt数据

使用load()获取文本数据信息，文本文件名最好不要使用中文，要不获取的汉字可能是乱码，另外文本文件默认创建的格式是ANSI编码，一定要重新另存为UTF-8编码，否则获取的文本数据中的汉字也是乱码。

在明白了这些问题后，程序代码其实就很简单了，主要代码如下。

$("#b1").click(function () {
  $("#box").load("JS/chuhanchuanqi.txt");
});

获取网页数据和获取文本数据的代码基本一致，主要代码如下。

$("#b2").click(function () {
  $("#box").load("JS/HtmlPage01.html?m="+Math.random());
});

网页文件后面增加了一个JavaScript随机数的传入，是为了防止页面缓冲而添加的，这是Web页面的通病，特别是开发人员在本地调试时，缓冲让人很头痛，代码修改了，可是运行的还是以前的结果，此时就可以使用这种方法改变URL，由于随机数的传入每次几乎都是不同的，这样每次都会和服务器交互一次而不是使用本地缓冲的数据库。

3．使用load()获取网页.html部分数据

获取网页部分数据和获取文本数据的代码基本一致，主要是使用网页文件中的元素的id定义来获取部分数据，比如HtmlPage01.html中有下面的定义：

...;
<p id="p2">
  刘季找来萧何调查其身份，<a href="#">原来黑衣人是司马令</a>。…
</p>
...

那么就可以使用#p2来获取网页中的部分数据信息，主要代码如下：

$("#b3").click(function () {
  $("#box").load("JS/HtmlPage01.html?m="+Math.random()+" #p2");
});

需要说明的是，代码中#p2前面有一个空格，否则就被认为是文件名的一部分了，传入随机数的目的就是为了防止本地缓冲，在前文已经详细讲述了。

4．使用load()获取网页.aspx数据

获取程序文件的数据信息也和获取文本文件的代码基本一致，主要代码如下：

$("#b4").click(function () {
  $("#box").load("JS/GetData.aspx?m="+Math.random());
});

完整程序代码可以参见Ajax_load.aspx。

8.7.4　使用get方法

在jQuery中提供了一个简单的get异步请求方法以取代复杂的$.ajax。请求成功时可调用回调函数。如果需要在出错时执行函数，可以使用$.ajax。处理多数异步数据请求，get方法已经足够用了。

语法格式：$.get( url, [data], [callback] )

参数说明：

url (String)：发送请求的URL地址。

data：（可选）要发送给服务器的数据，以key/value的键值对形式表示，会作为查询字符串（QueryString）的方式附加到请求URL中。

callback (function)：（可选）异步请求成功时调用的回调函数。

举例：

$.get("getinfo.aspx",{name："zhangsan",city："beijing"}, function (data){
  alert(data);
  $("#box").html(data);
});

完整代码参见Ajax_get.aspx及getinfo.aspx。

8.7.5　使用post方法

post方法和get方法的使用基本类似，区别主要在于异步传递给服务器端数据的方式不同，导致服务器端接收数据的代码不同，基于ASP.NET来说，使用post方式，服务器端就要使用Request.Form[]来接收数据；使用get方式，服务器端就要使用Request.QueryString[]来接收数据。

举例：只要把Ajax_get.aspx中的$.get修改为$.post，另外把getinfo.aspx中的Request.QueryString修改为Request.Form就可以看到效果了。完整代码参见Ajax_post.aspx。