首页 > 代码库 > Ajax 使用实例

Ajax 使用实例

2024-07-13 06:29:01   224人阅读

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

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

数据形式方法适用情况
HTML 形式$().load(a,b)  适用于对数据没什么操作的情况，如简单的文本拼接等
Json 形式$.getJSON(a,b)特点是格式清晰，数据较少，但对结构要求很精确，人工编写时要特别注意。适用于数据需要重用的情况，能在性能上得到显著提高。
JS 形式$.getScript(a,b)某些不是很常用的js语句，不必再页面load一开始就加载，则可将其置于外部js文件中，设置一个调用的触发事件，可减少初始代码加载量
Xml 形式$.get(a,b) 当远程应用程序未知时，基于其广泛适用性的特点，使用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])

参数描述
settings

可选。用于配置 Ajax 请求的键值对集合。

可以通过 $.ajaxSetup() 设置任何选项的默认值。

可选参数列表：

参数名类型默认值表示作用
urlString

当前页地址。

发送请求的地址。

typeString"GET"请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
dataTypeStringjQuery 自动根据 HTTP 包 MIME 信息来智能判断预期服务器返回的数据类型。

可用值:

  • "xml": 返回 XML 文档，可用 jQuery 处理。
  • "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
  • "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
  • "json": 返回 JSON 数据 。
  • "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
  • "text": 返回纯文本字符串
asyncBooleantrue设定HTTP请求是同步请求还是异步请求，默认是异步请求。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
cacheBoolean

true，

dataType 为 script 和 jsonp 时默认为 false。

设置为 false 将不缓存此页面。
contentTypeString"application/x-www-form-urlencoded"发送信息至服务器时内容编码类型。
timeoutNumber 设置请求超时时间（毫秒）。此设置将覆盖全局设置。
successFunction 

请求成功后的回调函数。

参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。

beforeSend(XHR)Function 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。如果返回 false 将取消本次 ajax 请求。
complete(XHR, TS)Function 

请求完成后回调函数 (请求成功或失败之后均调用)。

参数： XMLHttpRequest 对象和一个描述请求类型的字符串。

dataString 

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。必须为 Key/Value 格式。

如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 ‘&foo=bar1&foo=bar2‘。

errorFunction自动判断 (xml 或 html)

请求失败时调用此函数。

有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。

如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 "timeout", "error", "notmodified" 和 "parsererror"。

jsonpString 

在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分

比如 {jsonp:‘onJsonPLoad‘} 会导致将 "onJsonPLoad=?" 传给服务器。

jsonpCallbackString 

为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。

这主要用来让 jQuery 生成独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。

usernameString 用于响应 HTTP 访问认证请求的用户名。
passwordString 

用于响应 HTTP 访问认证请求的密码。

xhrFunction 需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。
traditionalBoolean 如果你想要用传统的方式来序列化数据，那么就设置为 true。
scriptCharsetString 只有当请求时 dataType 为 "jsonp" 或 "script"，并且 type 是 "GET" 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。
processDataBooleantrue默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
globalBooleantrue是否触发全局 AJAX 事件。
ifModifiedBooleanfalse仅在服务器数据改变时获取新数据。
dataFilterFunction 给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数：data 是 Ajax 返回的原始数据，type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。

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

HTTP 请求：GET vs. POST

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

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

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

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

 

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

 GETPOST
后退按钮/刷新无害数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
书签可收藏为书签不可收藏为书签
缓存能被缓存不能缓存
编码类型application/x-www-form-urlencodedapplication/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
历史参数保留在浏览器历史中。参数不会保存在浏览器历史中。
对数据长度的限制是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。无限制。
对数据类型的限制只允许 ASCII 字符。没有限制。也允许二进制数据。
安全性

与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。

在发送密码或其他敏感信息时绝不要使用 GET ！

POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
可见性数据在 URL 中对所有人都是可见的。数据不会显示在 URL 中。


联系
我们