Ajax 使用实例

在介绍实例之前，先就AJAX的几种便捷形式作出说明。

Ajax传输Data时有四种常用的数据类型，分别是html文档、Json数据、js文件和Xml文档，四种数据类型对应着如下方法：

　　ps：其中参数中a对应文件路径，b对应对文件的处理方法。

下面以Json数据为例，简要介绍此用法。

假设有b.json文件，其中的json数据如下：

[
　　{
　　　　"term": "BACCHUS",
　　　　"part": "n.",
　　　　"definition": "A convenient deity invented by the...",
　　　　"quote": [
　　　　　　"Is public worship, then, a sin,",
　　　　　　"That for devotions paid to Bacchus",
　　　　　　"The lictors dare to run us in,",
　　　　　　"And resolutely thump and whack us?"
　　　　],
　　　　"author": "Jorace"
　　},
　　{
　　　　"term": "BACKBITE",
　　　　"part": "v.t.",
　　　　"definition": "To speak of a man as you find him when..."
　　},
　　{
　　　　"term": "BEARD",
　　　　"part": "n.",
　　　　"definition": "The hair that is commonly cut off by..."
　　},
　　... file continues ...

则相应的读取文件的jquery语句如下：

 1 $(function(){
 2     $(‘a‘).click(function(event){
 3         event.preventDefault();
 4         //载入b.json文件，并以function(data){}方法进行处理
 5         $.getJSON(‘b.json‘,function(data){
 6             var html="";
 7             //$.each()方法以数组或对象作为第一个参数，以回调函数作为第二个参数
 8             //回调函数中第一个参数为每次循环中数组或对象的当前项的索引，第二个参数是当前项
 9             $.each(data,function(entryIndex,entry){
10                  html+=‘<div class = "entry">‘;
11                  html += ‘<h3 class="term">‘ + entry.term + ‘</h3>‘;
12                  html += ‘<div class="part">‘ + entry.part + ‘</div>‘;
13                  html += ‘<div class="definition">‘;
14                  html += entry.definition;
15                  html += ‘</div>‘;
16                  html+=‘</div>‘;
17             });
18             //将$("#dictionary")中原有的html语言用html变量中的内容代替
19             $("#dictionary").html(html);
20         });
21     });
22 });  

也可将这段代码和json数据一并整合在一个js文件c.js中：

 1 var entries = [
 2     {
 3         "term": "CALAMITY",
 4         "part": "n.",
 5         "definition": "A more than commonly plain and..."
 6     },
 7     {
 8         "term": "CANNIBAL",
 9         "part": "n.",
10         "definition": "A gastronome of the old school who..."
11     },
12     {
13         "term": "CHILDHOOD",
14         "part": "n.",
15         "definition": "The period of human life intermediate..."
16     }
17         //省略的内容
18 ];
19
20 var html = ‘‘;
21 $.each(entries, function() {
22     html += ‘<div class="entry">‘;
23     html += ‘<h3 class="term">‘ + this.term + ‘</h3>‘;
24     html += ‘<div class="part">‘ + this.part + ‘</div>‘;
25     html += ‘<div class="definition">‘ + this.definition + ‘</div>‘;
26     html += ‘</div>‘;
27     });
28
29 $(‘#dictionary‘).html(html);

在html文档或是js中插入语句

　　$.getScript(‘c.js‘);

即可实现以上js文件中的代码。

以上是对js文件和json数据调用方法的简单举例，大家如果有兴趣也可以自己查一下另两种方式的使用方法。

$.ajax()方法

1.简述

上文中提到的四种不同的方法，其实都是对$.ajax()进行简化封装后实现的简便方法，而这四种加载文件的方法通常适用于没有网络交互的单机操作。若需要实时更新，如jqGrid表格的编辑操作和动态更新状态下，需要与后台进行数据交互，则不宜使用文件形式。类似的情况还有很多，因此学会使用$.ajax()方法有着一定的必要性。

2.基本实例

　　在.NET中，前端的$.ajax()方法通常与后台的Handler文件（.ashx）进行交互。

　　前端代码：

1 //一个简单的ajax请求
2 $.ajax({
3      url: "/Scripts/AjaxHandler.ashx",
4      type: "post",
5      dataType: "json",
6      data: null,
7      success: function (data, textStatus, jqXHR) {
8      //对数据的处理操作
9 }

　　对应的后台代码是：

 1 private StringBuilder Json = new StringBuilder ();
 2 private int num=0;
 3
 4 //Handler核心代码
 5 public void ProcessRequest(HttpContext context)
 6 {
 7      context.Response.ContentType = "text/plain";
 8      string[,] waiting = { { "aabc", "ddd" }, { "aacc", "eee" }, { "aadc", "sss" } };
 9      arrayToJson(waiting);
10      context.Response.Write(Json.ToString());
11 }
12 //将二维字符串数组转换为json数据格式的字符串
13 private void arrayToJson(string[,] array)
14 {
15      string temp = "";
16      Json.Append("[{");
17      for (int i = 0; i < 3; i++)
18      {
19           num = i;
20           temp = turnToJson(array[i, 0], array[i, 1]);
21           Json.Append( temp );
22           if (i != 2)
23               Json.Append(",");
24      }
25      Json.Append("}]");
26 }
27 //将传入的两个字符串转换为json中键值对的形式
28 private string turnToJson(string str1,string str2)
29 {
30     string json = "";
31     json+="\"";
32     json += str1 + "\":\"";
33     json += str2 + "\"";
34     return json;
35 }

此时完成的操作是，前台向相对路径为/Scripts/AjaxHandler.ashx的Handler文件以post传输方式发送json请求，定义传输数据类型为json数据，并定义了数据传输成功后对应的操作数据的方法。后台接受到前台的ajax请求后，以自定义的二维数组转成json格式的字符串回发。前台的data变量中保存着后台回发的数据内容，可使用$.each(data, function (entryIndex, entry) {});语句进行对json数据的操作。

3.参数介绍

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

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

语法:

jQuery.ajax([settings])

可选参数列表：

4. AJAX get() 和 post() 方法

HTTP 请求：GET vs. POST

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

• GET - 从指定的资源请求数据
• POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

下面的表格比较了两种 HTTP 方法：GET 和 POST。

Ajax 使用实例