jQuery中的Ajax

关于

jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第二层是$.load(),$.get(),和$.post()方法，第三层是$.getScript()和$.getJSON()方法。首先介绍第二层的方法，因为其使用频率很高.

load()方法

　　1.载入HTML文档
　　

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

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

load()方法参数解释如下

load()方法参数解释
参数名称类型说明
urlString请求HTML页面的URL地址
data(可选)Object发送至服务器的key/value数据
callback(可选)Function请求完成时的回调函数

2.筛选载入的HTML文档

　　load()方法的URL参数的语法结构为:”url selector”.注意，URL和选择器之间有一个空格.
例如,只需要加载test.html页面中class为para的内容,可以使用下面的代码来完成:

　　

1
    $("resText").load("test.html  .para");

3.传递方式

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

//无参数传递,则是GET方式.

$(“#resText”).load(“test.php”,function(){
//…
});

//有参数传递,则是POST方式

$(“#resText”).load(“test.php”,{name:”rain”,age:”22″},function(){
//…
});

4.回调参数
　

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

1
2
3
4
5
$("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){
    //responseText: 请求返回的内容
    //textStatus:请求状态:success,error,notmodified,timeout
    //XMLHttpRequest:XMLHttpRequest对象
});

注意:在load()方法中，无论Ajax请求是否成功，只要当请求完成(complete)后,回调函数(callback)就被触发.对应下面将介绍的$.ajax()方法中的complete回调函数

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

load()方法通常用来从WEB服务器上获取静态的数据文件，然而这并不能体现Ajax的全部价值.在项目中，如果需要传递一些参数给服务器中的页面，那么可以使用$.get()或者$.post()方法(或者是后面要讲解的$.ajax(）方法).

注意:$.get()和$.post()方法是jQuery中的全局函数,而在此之前讲的jQuery方法都是对jQuery对象进行操作的. 1.$.get()方法

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

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

示例

1
$("#feeds").load("feeds.html");//加载feeds.html的内容

$.get()方法参数解释如下:

$.get()方法参数解释
参数名称类型说明
urlString请求的HTML页的URL地址
data(可选)Object发送至服务器的key/value数据会作为QueryString附加到请求的URL中
callback(可选)Function载入成功时回调函数(只有当Response的返回状态是success才调用该方法)自动将请求结果和状态传递给该方法
type(可选)String服务器端返回内容的格式,包括xml,html,script,json,text和_default

示例

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

jQuery LOGO
image-1931

2.$.post()方法

它与$.get()方法的结构和使用方式相同，不过它们之间仍然有以下区别:

  • GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然， 在Ajax请求中，这种区别对用户是不可见的。
  • GET方式对传输的数据有大小限制（通常不能大于2KB），而使用POST方式传递的数据量要比GET方式大得多（理论上不受限制）。
  • GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全性问题，而POST方式相对来说就可以避免这些问题。
  • GET方式和POST方式传递的数据在服务器端的获取也不相同，在PHP中，GET方式的数据可以用$_GET[]获取,而POST方式可以用$_POST[]获取。两种方式都可以用$_REQUEST[]来获取.

由于POST和GET方式提交的所有数据都可以通过$_REQUEST[]来获取，因此只需要改变jQuery函数就可以将程序在GET请求和POST请求之间切换。代码如下：

1
2
3
4
5
6
7
8
9
10
　　$(function(){
　　  $("#send").click(function(){
　　      $.post("post1.php",{
　　          username : $("#username").val(),
　　          content : $("#content").val()
　　      },function (data,textStatus){
　　          $("#resText").appent(data); //将返回的数据添加到页面上
　　      });
　　  });
　　})

另外，当load()方法带有参数传递时，会使用POST方式发送请求。因此也可以使用load()方法来完成同样的功能.代码如下:

1
2
3
4
5
6
7
8
　　$(function(){
　　  $("#send").click(function(){
　　      $("#resText").load("post1.php",{
　　          username : $("#username").val(),
　　          content : $("#content").val()
　　      })
　　  })
　　})

上面使用load(),$.get()和$.post()方法完成了一些常规的Ajax程序,如果还需要编写一些复杂的Ajax程序，那么就要用到jQuery中的$.ajax方法.$.ajax()方法不仅能实现与load(),$.get()和$.post()方法同样的功能,而且还可以设定beforeSend(提交前回调函数),error(请求失败后处理),success(请求成功后处理)以及complete(请求完成后处理)回调函数,通过这些回调函数,可以给用户更多的Ajax提示信息.另外，还有一些参数,可以设置的超时时间或者页面的“最后更改”状态等等。

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

1.$.getScript()

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

1
2
3
　　$(document.createElement(“script”)).attr(“src”,”test.js”).appendTo(“head”);
　　//或者
　　$(“&lt;script type=’text/javascript’ src=’test.js’ /&gt;”).appendTo(“head”);

　　但这种方式并不理想。为此，jQuery提供了$.getScript()方法来直接加载.js文件,与加载一个HTML片段一样简单方便，并且不需要对JavaScript文件进行处理，JavaScript文件会自动执行.jQuery代码如下:

1
2
3
4
5
　　$(function(){
　　$(‘#send’).click(function(){
　　$.getScript(‘test.js’);
　　});
　　})

与其他Ajax方法一样，$.getScript()方法也有回调函数,它会在JavaScript文件成功载入后运行。例如想载入jQuery官方颜色动画插件(jquery.color.js).成功后给元素绑定颜色变化动画,就可以用到$.getScript()方法的回调函数.代码如下:

1
2
3
4
5
6
7
8
9
　　$(function(){
　　      $.getScript
　　      ('http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js',function(){
　　          $("#go").click(function() {
　　                $(".block").animate({backgroundColor:'pink'},1000)
　　                          .animate({backgroundColor:'blue'},1000);
　　      })
　　      })
　　  })

当jquery.color.js动画插件加载完毕后,单击id为”go”的按钮时,class为block的元素就有了颜色变化.

2.$.getJSON()

$.getJSON()方法用于加载JSON文件,与$.getScript()方法的用法相同.jQuery代码如下:

1
2
3
4
5
　　$(function(){
　　      $("#send").click(function() {
　　            $.getJSON('test.json');
　　        });  
　　  })

当单击”加载”按钮后，网页上卡不到任何效果，虽然函数加载了JSON文件，但是并没有告诉JavaScript对返回的数据如何处理。为此，jQuery提供了回调函数，在回调函数里处理返回的数据。代码如下：

1
2
3
4
5
6
7
　　$(function(){
　　      $("#send").click(function() {
　　            $.getJSON('test.json',function(data){
　　              //data:返回的数据
　　          });
　　        });  
　　  })

可以在函数中通过data变量来遍历相应的数据。$.each()函数不同于jQuery对象的each()方法,它是一个全局函数，不操作jQuery对象，而是以一个数组或者对象作为第一个参数，以一个回调函数作为第二个参数。回调函数拥有两个参数，第一个为对象的成员或数组的索引，第二个为对应的变量或内容.代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
　　$(function(){
　　      $("#send").click(function() {
　　            $.getJSON('test.json',function(data){
　　              $('#resText').empty();
　　              var html = '' ;
　　              $.each(data,function(commentIndex,comment){
　　                  html += '<div class="comment"><h6>'
　　                  + comment['username']+':</h6><p class="para">'
　　                  + comment['content'] + '</p></div>' ;
　　              });
　　              $('#resText').html(html);
　　          });
　　        });  
　　  })

　　在上面的代码中，当返回数据成功后，首先清空id为”resText”的元素的内容,以便重新构造新的HTML，然后通过$.each()循环函数依次遍历每个项,并将遍历出来的内容构建成HTML代码拼接起来,最后将构建好的HTML添加到id为”resText”的元素中.
不仅如此,还能通过使用JSONP姓氏的回调函数来加载其他网站的JSON数据，例如从图片网站(Flickr)搜索汽车类别的4张最新图片.代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
　　$(function(){
　　      $("#send").click(function() {
　　            $.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?',function(data){
　　              $.each(data.items,function(i,item){
　　                  $("&lt;img class='para'/&gt;").attr("src",item.media.m).appendTo("#resText");
　　                  if (i==3){
　　                      return false;  
　　                  }
　　              });
　　          });
　　        });  
　　  })

在$.each()函数中，如果需要退出each循环，只要返回false即可.

注意:

  • jQuery将自动把URL里的回调函数，例如”url?callback=?”中的后一个”?”替换为正确的函数名,以便执行互调函数.
  • 　　JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Scripttags返回至客户端,通过JavaScript Callback的姓氏实现跨域访问。由于JSON只是一种含有简单括号结构的纯文本，因此许多通道都可以交换JSON消息，而由于同源策略的限制，开发人员不能在与外部服务器进行通信的时候使用XMLHttpRequest.而JSONP是一种可以绕过同源策略的方法，即通过使用JSON与<scrip>>标记相结合的方法，从服务器端直接返回可执行的JavaScript函数调用或者JavaScript对象。目前JSONP已经成为各大公司的Web应用程序跨域首选,例如Youtube GData,Goole Social Graph,Digg,豆瓣等.

$.ajax()方法

$.ajax()方法是jQuery最底层的Ajax实现.它的结构为:

1
$.ajax(options)

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

$.ajax()方法常用参数解释
参数名称类型说明
urlString(默认为当前页地址)发送请求的地址
typeString请求方式(POST或GET)默认为GET。注意其他HTTP请求方法,例如PUT和DELETE也可以使用，但仅部分浏览器支持
timeoutNumber设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设置
dataObject或String发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。GET请求中将附加在URL后。防止这种自动转换,可以查看processData选项。对象必须为key/value格式，例如:{foo1 : “bar1”, foo2: “bar2”}转换为&foo1=bar1&foo2=bar2.如果是数组,jQuery将自动为不同值对应同一个名称.例如:{foo:[“bar1″,”bar2”]}转换为&foo=bar1&foo=bar2
dataTypeString预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息返回responseXML或responseText,并作为回调函数参数传递.
可用的类型如下:
xml:返回XML文档，可用jQuery处理.
html:返回纯文本HTML信息,包含的script标签会在插入DOM时执行.
script:返回纯文本JavaScript代码.不会自动缓存结果.除非设置了cache参数.注意在远程请求时(不在同一个域下),所有POST请求都将转为GET请求.
json:返回JSON数据.
jsonp:JSONP格式。使用SONP形式调用函数时，例如:myurl?callback=?,jQuery将自动替换后一个”?”为正确的函数名，以执行回调函数.
text:返回纯文本字符串
beforeSendFunction 发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次Ajax请求.XMLHttpRequest对象是唯一的参数.

1
2
3
function(XMLHttpRequest){
    this;//调用本次Ajax请求时传递的options参数
}
completeFunction请求完成后调用的回调函数（请求成功或失败时均调用）．参数：XMLHttpRequest对象和一个描述成功请求类型的字符串.

1
2
3
function(XMLHttpRequest,textStatus){
    this;//调用本次Ajax请求时传递的options参数
}
successFunction请求成功后调用的回调函数,有两个参数.

  1. 由服务器返回，并根据dataType参数进行处理后的数据.
  2. 描述状态的字符串
1
2
3
4
function(data,textStatus){
    //data可能是xmlDoc,jsonObj,html,text等等
    this;//调用本次Ajax请求时传递的options参数
}
errorFunction请求失败时被调用的函数.该函数有3个参数,即XMLHttpRequest对象,错误信息,捕获的错误对象(可选).Ajax事件函数如下.

1
2
3
4
function(XMLHttpRequest,textStatus,errorThrown){
    //通常情况下textStatus和errorThown只有其中一个包含信息
    this;//调用本次Ajax请求时传递的options参数
}
globalBoolean默认为true.表示是否触发全局Ajax事件.设置为false将不会触发全局Ajax事件,AjaxStart或AjaxStop可用于控制各种Ajax事件.

如果需要使用$.ajax()方法来进行ajax开发,那么上面这些常用的参数都必须了解。此外，$.ajax方法还有其他参数.前面用到的$.load(),$.get(),$.post(),$.getScript()和$.getJSON()这些方法，都是基于$.ajax()方法构建的,$.ajax()方法是jQuery最底层的Ajax实现,因此可以用它来代替前面的所有方法.
例如，可以使用下面的jQuery代码代替$.getScript()方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
　　$(function(){
　　      $("#send").click(function() {
　　            $.ajax({
　　              type:"GET",
　　              url:"test.js",
　　              dataType:"script"
　　          });
　　        });  
　　  })
　　//再例如，可以使用以下jQuery代码来代替$.getJSON()方法:
　　$(function(){
　　      $("#send").click(function() {
　　            $.ajax({
　　              type:"GET",
　　              url:"test.json",
　　              dataType:"json",
　　              success: function(data){
　　                  $("#resText").empty();
　　                  var html = "";
　　                  $.each(data,function(commentIndex,comment){
　　                      html += '<div class="comment"><h6>'
　　                              + comment['username']+':</h6><p class="para">'
　　                              + comment['content'] + '</p></div>';
　　                     
　　                  });
　　                  $('#resText').html(html);
　　              }
　　          });
　　        });  
　　  })
　　

序列化元素

1.serialize()方法

做项目的过程中，表单是必不可少的，经常用来提供数据，例如注册，登陆等。常规的方法是使表单提交到另一个页面，整个浏览器都会被刷新，而使用Ajax技术则能够异步的提交表单,并将服务器返回的数据显示在当前页面中.
前面在讲解$.get()和$.post()方法的时候，表单的HTML代码如下;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
　　&lt;form id="form1" action="#"&gt;
　　  评论:
　　    姓名:&lt;input type="text" name="username" id="username" /&gt;
　　    内容:&lt;textarea name="content" id="content" rows="2" cols="20"&gt;&lt;/textarea&gt;
　　    &lt;input type="button" id="send" value="提交"/&gt;
　　&lt;/form&gt;
　　为了获取姓名和内容，必须将字段的值逐个添加到data参数中。代码如下:
　　$(function(){
　　      $("#send").click(function() {
　　            $.get("get1.php",{
　　              username : $("#username").val(),
　　              content :   $("#content").val()
　　          },function(data , textStatus){
　　              $("#resText").html(data);
　　          });
　　        });  
　　  })

　　这种方式在只有少量字段的表单中，勉强还可以使用，但如果表单元素越来越复杂，使用这种方式在增大工作量的同时也使表单缺乏弹性。jQuery为这一常用的操作提供了一个简化的方法————serialize()。与jQuery中其他方法一样,serialize()方法也是作用于一个jQuery对象，它能够将DOM元素内容序列化为字符串，用于Ajax请求。通过使用serialize()方法可以把刚才的jQuery代码改为如下:

1
2
3
4
5
6
7
　　$(function(){
　　      $("#send").click(function() {
　　            $.get("get1.php",$("#form1").serialize(),function(data , textStatus){
　　              $("#resText").html(data);
　　          });
　　        });  
    })

当单击”提交”按钮后，也能达到同样的效果.
即使在表单中再增加字段，脚本仍然能够使用，并且不需要做其他多余工作。
需要注意的是,$.get()方法中data参数不仅可以使用映射方式,如以下jQuery代码:

1
2
3
4
5
6
7
　　{
　　              username : $("#username").val(),
　　              content : $("#content").val()  
　　          }
　//也可以使用字符串方式，如以下jQuery代码：
　　"username="+encodeURIComponent($('#username').val())+
　　              "&content="+encodeURIComponent($('#content').val())

用字符串方式时,需要注意对字符编码(中文问题),如果不希望编码带来麻烦，可以使用serialize()方法，它会自动编码.

因为serialize()方法作用于jQuery对象,所以不光只有表单能使用它,其他选择器选取的元素也都能使用它,如以下jQuery代码:

1
　　$(“:checkbox,:radio”).serialize();

把复选框和单选框的值序列化为字符串形式,只会将选中的值序列化.

2.serializeArray()方法

在jQuery中还有一个与serialize()类似的方法serializeArray(),该方法不是返回字符串，而是将DOM元素序列化后，返回JSON格式的数据。jQuery代码如下:

1
2
var fields = $(“:checkbox,:radio”).serializeArray();
console.log(fields);    //用Firebug输出

既然是一个对象，那么就可以使用$.each()函数对数据进行迭代输出。代码如下:

1
2
3
4
5
6
7
　　$(function(){
　　      var fields = $(":checkbox,:radio").serializeArray();
　　      console.log(fields);    //用Firebug输出
　　      $.each(fields,function(i,field){
　　          $("#results").append(field.value+",");
　　      })；
　　  })

3.$.param()方法

它是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化.
比如将一个普通的对象序列化:

1
2
3
　　var obj = {a:1,b:2,c:3};
　　var k = $.param(obj);
alert(k);//输出a=1&b=2&c=3

jQuery中的Ajax全局事件

当Ajax请求开始时,会出发ajaxStart()方法的回调；当Ajax请求结束时，会触发ajaxStop()方法的回调函数。这些方法都是全局的方法，因此无论创建它们的代码位于何处，只要有Ajax请求发生时,就会触发它们.

jQuery的Ajax全局时间中还有几个方法，也可以在使用Ajax方法的过程中为其带来方便。

另外几个方法
方法名称说明
ajaxComplete(callback)Ajax请求完成时执行的函数
ajaxError(callback)Ajax请求发生错误时执行的函数,捕捉到的错误可以作为最后一个参数传递
ajaxSend(callback)Ajax请求发送前执行的函数
ajaxSuccess(callback)Ajax请求成功时执行的函数
注意 如果想使某个Ajax请求不受全局方法的影响,那么可以在使用$.ajax(options)方法时,将参数中的global设置为false,jQuery代码如下:

1
2
3
4
$.ajax({
    url: "test.html",
    global: false  //不触发Ajax全局事件
})

jQuery速查表

单击查看大图或者右键下载图片:

jQuery速查表
image-1932

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

CAPTCHA

*

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。