jQuery基础之六 -- 异步Ajax

转载：http://blog.csdn.net/zzq58157383/article/details/7652714

jQuery对Ajax进行了封装，在jQuery中有三层方法：

第1层方法： $.ajax()

第2层方法： load(), $.get()和$.post()

 第3层方法： $.getScript()和$.getJson()

首先介绍第2层的方法，因为其使用频率很高

 

1.load()方法：载入远程HTML代码并插入DOM中  

 load(url [, data] [, callback]);

     url: 请求HTML页面的URL地址

     data: 可选，发送到服务器的key/value数据，无参数传递是GET方式，有参数传递自动转换成POST方式

     callback(responseText, textStatus, XMLHttpRequest): 可选，有3个参数，请求完成时的回调函数，无论成功或失败都会被触发

           textStatus： success, error, notmodified, timeout 4种

[java] view plaincopyprint?
  1. $("#div").load("test.html");    //将test.html页面的HTML内容插入到主页面的<div>中  
  2. $("#div").load("test.html .para");    //将test.html中class为"para"的内容插入到主页面的<div>中  

2.$.get()与$.post()方法： jQuery中的全局函数

 $.get/post(url [, data] [, callback] [, type]);

     url: 请求HTML页面的URL地址

     data: 可选，发送到服务器的key/value数据

     callback(response, textStatus): 可选，只有当Response的返回状态是success进才调用

     type: 可选，服务器返回内容的格式，包括xml, html, script, json, text和_default

            html:  $("#html").html(response);

            xml:   $(data).find("comment").attr("username"); 或者 $(data).find("comment usrename").text(); 在服务器端必须设置Content-Type：text/xml

            json: data.username;

[java] view plaincopyprint?
  1. $("#send").click(function(){  
  2.    $.get("xxx.jsp", { username: $("#username").val(), content: $("#content").val() }, function(data, textStatus){  
  3.        $("#resText").html(data.username + data.content);  
  4.    }, "json");  
  5. });  

 GET与POST区别：

1.ＧＥＴ请求会将对数跟在ＵＲＬ后进行传递，而ＰＯＳＴ请求则是作为ＨＴＴＰ消息的实体内容发送给ＷＥＢ服务器

2.ＧＥＴ方式对传输的数据有大小限制，通常不能大于2ＫＢ，而使用ＰＯＳＴ方式传递没有限制

3.ＧＥＴ方式请求的数据会被浏览器缓存起来，例如账号和密码等，会带来严重的安全性问题

4.ＧＥＴ方式和ＰＯＳＴ方式传递的数据在服务器端的获取不相同，在ＰＨＰ中，ＧＥＴ通过$_GET[]获取，而POST通过$_POST[]获取，都可以用$_REQUEST[]来获取

3.$.getScript()和$.getJson()方法： 动态加载js和json文件

在页面初次加载时就取得所需的全部JavaScript文件是完全没有必要的，可以在需要哪个JavaScript文件时，动态地创建<script>标签，js代码：

[java] view plaincopyprint?
  1. $(document.createElement("script")).attr("src", "xxx.js").appendTo("head");  
  2. 或者  
  3. $("<script type='text/javascript' src='xxx.js'>").appendTo("head");  
  4.   
  5. jQuery示例：  
  6.  $.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){  
  7.      $("#go").click(function(){  
  8.          $(".block").animate({backgroundColor: 'pink'}, 1000).animate({backgroundColor: 'blue'}, 1000);   
  9.      }); // 当jquery.color.js 动画插件加载完毕后，单击按钮，class为block的元素就有了颜色动画变化  
  10.   });  
[java] view plaincopyprint?
  1. $.getJson("test.json", function(data){  
  2.    $("#repText").empty();  
  3.    var html = '';  
  4.    $.each(data, function(index, data){  
  5.       html += '<div class="comment">' + data.username + data[comment] + '</div>';  
  6.    });  
  7.    $("#repText").html(html);  
  8. });  

4.$.ajax()方法

 $.ajax(options); options以key/value的形式存在，所有参数都是可选的，$.Ajax()方法是jQuery最底层的Ajax实现，可以代替前面的所有方法

 

[java] view plaincopyprint?
  1. url:        请求HTML页面的URL地址  
  2. type:       请求方式，get或者post，默认是get，部分浏览器支持but，delete  
  3. timeout:    设置请求超时时间（毫秒），将覆盖$.ajaxSetup()方法的全局设置  
  4. data:       发送到服务器的数据  
  5. processData: (默认: true) 默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"  
  6. dataType:   预设服务器返回的数据类型，xml, html, script,json, jsonp, text  
  7. dataFilter: 给Ajax返回的原始数据的进行预处理的函数。提供data和type两个参数：data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数  
  8. async: (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false  
  9. cache: (默认: true,dataType为script和jsonp时默认为false) 设置为 false 将不缓存此页面。  
  10. contentType: (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型  
  11. context; 设置Ajax相关回调函数的上下文。也就是说，让回调函数内this指向这个对象（如果不设定这个参数，那么this就指向调用本次AJAX请求时传递的options参数）  
  12. global:     默认为true，表示触发全局Ajax事件    
  13. username: 用于响应HTTP访问认证请求的用户名  
  14. password:  用于响应HTTP访问认证请求的密码  
  15. traditional: 如果你想要用传统的方式来序列化数据，那么就设置为true  
  16. ifModified: (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断  
  17. jsonp: 在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。  
  18. jsonpCallback: 为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。  
  19. scriptCharset: 只有当请求时dataType为"jsonp"或"script"，并且type是"GET"才会用于强制修改charset。通常只在本地和远程的内容编码不同时使用。  
  20. beforeSend(XMLHttpRequest): 发送请求前可以修改XMLHttpRequest对象的函数,例如添加HTTP头，在beforeSend中,如果返回false可以取消本次Ajax请求    
  21. complete(XMLHttpRequest, textStatus):   请求完成后调用的回调函数，成功或失败时均调用，有点类似 load() 方法    
  22. success(response, textStatus):    请求成功时调用的回调函数    
  23. error(XMLHttpRequest, textStatus, errorThrown):      请求失败时调用的回调函数    
[java] view plaincopyprint?
  1. $.ajax({  
  2.   type: "GET",  
  3.   url: "test.js",  
  4.   dataType: "script"  
  5. }); //加载并执行一个 JS 文件  
  6. $.ajax({  
  7.    type: "POST",  
  8.    url: "some.php",  
  9.    data: "name=John&location=Boston",  
  10.    success: function(msg){  
  11.      alert( "Data Saved: " + msg );  
  12.    }  
  13. }); //保存数据到服务器，成功时显示信息。  
  14. $.ajax({  
  15.   url: "test.html",  
  16.   cache: false,  
  17.   success: function(html){  
  18.     $("#results").append(html);  
  19.   }  
  20. }); //装入一个 HTML 网页最新版本。  
  21.  var xmlDocument = [create xml document];  
  22.  $.ajax({  
  23.    url: "page.php",  
  24.    processData: false,  
  25.    data: xmlDocument,  
  26.    success: handleResponse  
  27.  }); // 发送 XML 数据至服务器。设置 processData 选项为 false，防止自动转换数据格式。  

5.序列化元素
 serialize();  //作用一个jQuery对象，它能够将DOM元素内容序列化字符串，用于Ajax请求  

[java] view plaincopyprint?
  1. $.get("xxx.jsp", $("#form").serialize(), function(data, textStatus){  // { username: $("#username").val(), content: $("#content").val() }  
  2.    $("#resText").html(data);  
  3. });  

serialize()不仅可以作用于form，它可以作用于任何jQuery对象
data不仅可以使用映射方式，也可以使用字符串方式，但要注意中文编码问题

[java] view plaincopyprint?
  1. "username=" + encodeURIComponent($('#username').val()) + "&content=" + encodeURIComponent($("#content").val())   

serializeArray(); //将DOM元素内容序列化后， 不是返回字符串，而是返回JSON格式的数据

[java] view plaincopyprint?
  1. var fields = $(":checkbox, :radio").serializeArray();  
  2. $.each(fields, function(index, field){  
  3.     $("#html").append(field.value +",");    
  4. });  

$.param(); //它是serialize（）方法的核心，用来将一个数组或对象按照key/value进行序列化

[java] view plaincopyprint?
  1. var obj = {a:1, b:2, c:3};  
  2. var k = $.param(obj); //a=1&b=2&c=3  

全局事件：

[java] view plaincopyprint?
  1.  ajaxSetup(name: value, name:value, ...)  设置全局 AJAX 默认选项,所有的选项都可以通过$.ajaxSetup()函数来全局设置。  
  2.  ajaxStart(callback); Ajax请求 开始 时执行的函数  
  3.  ajaxStop(callback); Ajax请求 结束 时执行的函数  
  4.  ajaxComplete(callback); Ajax请求 完成 时执行的函数  
  5.  ajaxError(callback); Ajax请求 发生错误 时执行的函数，捕捉到的错误可以作为最后一个参数传递  
  6.  ajaxSend(callback); Ajax请求 发送前 执行的函数  
  7.  ajaxSucess(callback); Ajax请求 成功 时执行的函数  
  8.  //如果想使某个Ajax请求不受全局方法的影响，可以设置参数global为false  
  9. $.ajaxSetup({  
  10.   url: "/xmlhttp/",  
  11.   global: false,  
  12.   type: "POST"  
  13. }); //设置 AJAX 请求默认地址为 "/xmlhttp/"，禁止触发全局 AJAX 事件，用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数  
  14. $.ajax({ data: myData });  
[java] view plaincopyprint?
    1. <div id="loading">Loading。。。</div>  
    2. $("#loading").ajaxStart(function(){  
    3.    $(this).show();   
    4. }).ajaxStop(function(){  
    5.    $(this).hide();  
    6. });  
    7.  $("#msg").ajaxComplete(function(event,request, settings){  
    8.    $(this).append("<li>请求完成.</li>");  
    9.  });  
    10. $("#msg").ajaxError(function(event,request, settings){  
    11.      $(this).append("<li>出错页面:" + settings.url + "</li>");  
    12. });  
    13.  $("#msg").ajaxSend(function(evt, request, settings){  
    14.    $(this).append("<li>开始请求: " + settings.url + "</li>");  
    15.  });  
    16.  $("#msg").ajaxSuccess(function(evt, request, settings){  
    17.    $(this).append("<li>请求成功!</li>");  
    18.  });  

posted on 2014-04-28 16:32  pcshell  阅读(122)  评论(0)  编辑  收藏  举报

导航