轻松掌握AJAX（jQuery）异步通信

jack

上篇博客谈了AJAX，下面再说说它的优缺点，我们知道不管是什么技术一般都是因为有它的利用价值才出现的，也就是它们都是有优点的，而有老句话说的是“是药三分毒”，技术也一样，什么样的技术一般也都会有它的缺陷的。项目中只要是它的优点大于它的缺点我们就会去使用它。AJAX的缺点相对于它的优点来说基本上可以忽略，因为它的优点真的是很优秀。

AJAX优点：

1、 使用异步方式与服务器通信，不需要打断用户正在进行的操作，具有更加迅速的响应能力。

2、 可以在不更新整个页面的前提下维护数据（不刷新页面），给用户的体验非常棒。这也是它最大的优点。

3、 AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求，充分利用了客户端闲置的处理能力，降低服务器的负荷。

AJAX缺点：

1、破坏浏览器后退按钮的正常行为。在动态更新页面后，用户无法回到前一个页面的状态，这是因为浏览器只能记下历史记录中的静态页面。

2、使用JavaScript作Ajax的引擎，JavaScript的兼容性和Debug需要特别注意。

AJAX让用户页面丰富起来,增强用户体验.AJAX也是所有Web开发的必修课.虽然说AJAX技术并不复杂,但是实现方式还是会因为每个开发人员而有所差异。看着它如此之好，是不是感觉使用起来还是不太方便，不太好控制而烦恼呢？不要着急，下面就再介绍一种技术，让AJAX的异步通信技术更加方便的应用到我们的程序中，那就是Jquery。

jQuery提供一系列AJAX函数来帮助我们统一这种差异, 并且让调用AJAX更加简单.jQuery提供了几个用于发送AJAX请求的函数. 其中最核心的也是最复杂的是jQuery.ajax()，所有的其他AJAX函数都是它的一个简化调用.当我们想要完全控制AJAX时可以使用此方法, 否则还是使用简化方法如get, post, load等更加方便。下面我们就来逐一认识这些个方法。

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

载入远程 HTML 文件代码并插入至 DOM 中，默认使用 GET 方式传递，附加参数时自动转换为 POST 方式。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。

参数：

示例：

描述: 加载 feeds.html 文件内容。

jQuery 代码:

• $("#feeds").load("feeds.html");
  

2.    jQuery.get(url, [data], [callback], [type] )

通过远程 HTTP GET 请求载入信息，这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

参数：前面的解释参见1

type (可选)String

返回内容格式，xml,html, script, json, text, _default。

示例：

描述: 显示 test.php 返回值(HTML 或 XML，取决于返回值)。

jQuery 代码:

• $.get("test.php",function(data){  
•   alert("Data Loaded: " + data);  
• });
  

描述: 显示 test.cgi 返回值(HTML 或 XML，取决于返回值)，添加一组请求参数。

jQuery 代码:

• $.get("test.cgi",{ name: "John", time: "2pm" },  
•   function(data){  
•     alert("Data Loaded: " + data);  
•   });
  

3.    jQuery.getJSON(url, [data], [callback] )

通过 HTTP GET 请求载入 JSON 数据，在 jQuery 1.2 中，您可以通过使用JSONP 形式的回调函数来加载其他网域的JSON数据，如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 注意：此行以后的代码将在这个回调函数执行前执行。

参数：解释参见1

示例：

描述: 从 test.js 载入 JSON 数据，附加参数，显示 JSON 数据中一个 name 字段数据。

jQuery 代码:

• $.getJSON("test.js",{ name: "John", time: "2pm" }, function(json){  
•   alert("JSON Data: " +json.users[3].name);  
• });
  

4.    jQuery.getScript(url, [callback] )

通过 HTTP GET 请求载入并执行一个 JavaScript 文件，jQuery 1.2 版本之前，getScript 只能调用同域 JS 文件。 1.2中，您可以跨域调用 JavaScript 文件。注意：Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本，请加入延时函数。

参数：参见1

示例：

描述：加载并执行 test.js ，成功后显示信息。

jQuery 代码:

• $.getScript("test.js",function(){  
•   alert("Script loaded andexecuted.");  
• });
  

5.    jQuery.post(url, [data], [callback], [type] )

通过远程 HTTP POST 请求载入信息，这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

参数：参见2

示例：

描述1：请求 test.php 网页，忽略返回值

• $.post("test.php");
  

描述2：请求 test.php 页面，并一起发送一些额外的数据（同时仍然忽略返回值）

• $.post("test.php",{ name: "John", time: "2pm" } );
  

描述3：输出来自请求页面 test.php 的结果（HTML 或 XML，取决于所返回的内容）

• $.post("test.php",function(data){  
•    alert("Data Loaded: " + data);  
• });
  

6.    jQuery.ajax(options )

通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

最简单的情况下，$.ajax()可以不带任何参数直接使用。

注意：所有的选项都可以通过 $.ajaxSetup()函数来全局设置。

一些参数介绍请参见：

http://www.cnblogs.com/zengen/archive/2011/03/25/1995761.html

关于jQuery.ajax百度文库里介绍的非常全面（还有示例）：

http://baike.baidu.com/view/6278307.htm

总结：

各种功能的实现随着技术的不断革新将会变得越来越简单，我们只需要掌握某些主流技术的基本原理和学习的方法即可，有了一套完整的思想，学习什么技术基本上都一样，有时候遇到一门新技术我们可能用两三天的时间就能明白其大概的框架，参考说明就能将其应用到我们的项目中来。

原文链接：http://blog.csdn.net/smszhuang168/article/details/7749881