jQuery 程序员速成三 之 AJAX

jQuery 程序员速成三 之 AJAX

发布时间: 1/13/2011 5:17 PM[打印]　[返回前一页]　[关闭窗口]

文章类型：原创笔记 　 阅读(288)　 评论(0)　 编辑　 删除　 复制链接　 所属分类: [Html/Css/Ajax/Js]

一、首先我们写一段使用传统的 javascript 编写的 ajax 调用实例，大家看一下，也为后续的jQuery的实现方法作一下对比。  折叠展开csharp 代码复制内容到剪贴板 <script language="javascript" type="text/javascript">      //通过这个函数来异步获取信息       function Ajax(){       　 var xmlHttpReq = null;       //声明一个空对象用来装入 XMLHttpRequest           　 //IE5 IE6是以 ActiveXObject的方式引入 XMLHttpRequest的       　 if (window.ActiveXObject){      　　 xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");      　 }           //除 IE5 IE6 以外的浏览器 XMLHttpRequest是 window的子对象       　 else if (window.XMLHttpRequest){              xmlHttpReq = new XMLHttpRequest();//实例化一个 XMLHttpRequest               }               if(xmlHttpReq != null){      //如果对象实例化成功                   xmlHttpReq.open("GET","test.php",true);     //调用 open()方法并采用异步方式                   xmlHttpReq.onreadystatechange=RequestCallBack; //设置回调函数                   xmlHttpReq.send(null); //因为使用 get方式提交，所以可以使用 null参调用                }           function RequestCallBack(){//一旦 readyState值改变，将会调用这个函数                             if(xmlHttpReq.readyState == 4)                 if(xmlHttpReq.status == 200)                      //将 xmlHttpReq.responseText的值赋给 ID为 resText 的元素                       document.getElementById("resText").innerHTML = xmlHttpReq.responseText;          }      }           </script>       注：在开始jQuery 的 Ajax编程开始前，我还是要强调一下，Ajax的整体实现过程。 本章里所提到的只是 Ajax的调用部分，另一部分是服务器端的语言接收部分，在我们的学习中是使用C#开发的，所以可以使用Request.QueryString或是Request.Form来获取调用的数据，然后在服务器端进行业务处理，并返回结果。 大家一定要注意完整的ajax应用是由这两部分组成的。这也是很多人在学习Ajax上一直不明白的一个简单的道理。这个道理不明白，学下功能学习，也只能学个皮毛而已。 一、Jquery Ajax开发整体介绍：  由于 jquery对 ajax进行了封装，因此 jquery开发 ajax变得极其简单。jquery 主要提供了下列 ajax 调用方法： ·         1、$.ajax() ：  最底层的调用方法，开放了较多的参数接口，可以给予更多调用控制，但要编写的代码也是最多的。  ·         2、load(), $.get(), $.post() ：这三个方法，对$.ajax()方法进行了简单处理，分别对应三种不同的使用情况，进行了封装，这样降低了使用时需要配置的参数个数。这三个方法，使用方便，可以应对所有的应用场合。  ·         3、$.getScript() and $.getJSON()： 这两个方法，也是对对$.ajax()方法进行了封装处理。以应对不同的处理场合。   二、jQuery的各种ajax调用方法的详细说明： 1、load() 方法 方法说明：载入远程 HTML 文件代码并插入至 当前网页(DOM) 中。 任何 jquery 对象都可以调用 load 方法。当 jquery 对象调用 load 方法后，就用 load 回来的 data 作为该 jquery 对象的内容。  load方法与其他 Ajax的方法（如 $.ajax()、$.get()、$.post()、$.getScript()、$.getJSON() ）不同，其他的 ajax 方法都是 jquery 的全局函数，直接调用就可以，不需要跟随任何的 jquery 对象，但 load() 则是针对某一具体 jquery 对象进行操作的 。    load方法的格式： load( url, [data], [callback] ) 其中  url：是指要导入文件的地址  data： (可选 ) 要导入的是动态文件时，我们可以把要传递 的参数放在这里  callback： (可选 ) 请求完成时的回调函数，无论请求成功或失败    调用实例：  折叠展开javascript 代码复制内容到剪贴板 $(function(){          $("#send").click(function(){                $("#resText").load("test.html"); //load test.html作为 #resText的 content          });      });      对内容进行筛选显示：Load方法还可以对 load入的内容进行筛选后显示。例如下面代码就是只显示 test.html里的 class为 para的内容  折叠展开javascript 代码复制内容到剪贴板 $("#resText").load("test.html .para");        传递参数调用方法：那就要通过 load()的 data参数。    折叠展开javascript 代码复制内容到剪贴板 $("#resText").load(            "test.html .para",            {name: “rain”, age: “30”} ,             function (){                      //..            }  );   注意：如果配置了 data 参数，那么本次调用就会以 POST 的形式传递，在服务器端获取该参数时就需要使用Request.Form。如果没有 data 参数则以 GET 方式 传递。  不含参数的调用方法： csharp 代码复制内容到剪贴板 $("#resText").load(            "test.html",             function (){                      //..  });        回调方法参数： 折叠展开javascript 代码复制内容到剪贴板 $("#resText").load(             "test.html",                     function (responseText, textStatus, XMLHttpRequest) {                       alert( $(this).html() );                      alert(responseText);      //请求返回的内容                     alert(textStatus);           //请求状态： success， error                    alert(XMLHttpRequest);    //XMLHttpRequest对象       });     2、$.get() 和 $.post() 方法   $.get()：是用 GET方式来进行异步请求。 $.post()：是用 POST方式来进行异步请求。 注：$.post() 与 $.get() 使用上完全相同，只是在服务器端接收参数时，有所区别，分别以Get或Post方式接收。   $.get()的格式是：　 $.get( url [, data] [, callback] [, type] ) 其中  url：是请求的 url data： (可选 ) 发送到 server的 key/value数据会以 QueryString形式 附加到请求的 url中。  callback： (可选 ) 载入成功时的回调元素（只有 response 的状态是 success 才会调用该方法 ）  type: (可选 ) 服务器返回的 response的格式：xml、json、html、text、script。  使用 $.get()且返回值类型为 html：  javascript 代码复制内容到剪贴板 $.get("get1.aspx",                        {   // 传递的参数                       username :  $("#username").val() ,                       content :  $("#content").val()                    },                        function (data, textStatus){ // 回调函数                      //data: 返回的内容，可以是 xml, html, json                      //textStatus: 请求状态 :success/error/timeout/notmodified                       $("#resText").html(data); // 把返回的数据添加到页面上                   }      );       使用 $.get()且返回值类型为xml： （和上面代码唯一不同的是回调函数里对 data的处理方式）  折叠展开javascript 代码复制内容到剪贴板 function (data, textStatus){      　　　　var username = $(data).find("comment").attr("username");       　　　　var content = $(data).find("comment content").text();       　　　　var txtHtml = "<div class='comment'>"+username+":"+content+"</div>";      　　　　$("#resText").html(txtHtml);       }      注意：由于要求服务器端返回的是 xml，因此需要在服务器端设置  content-type　header("Content-Type:text/xml; charset=utf-8");  使用 $.get()且返回值类型为 json 数 据： 与上面代码不同的是回调函数里对 data的处理方式，而且 $.get方法使用第四个参数为 ”json” 。 折叠展开javascript 代码复制内容到剪贴板 $.get(                  "get1.aspx",                        {   // 传递的参数                       username :  $("#username").val() ,                       content :  $("#content").val()                    },                        function (data, textStatus){ // 回调函数                       var username = data.username;                       var content = data.content;                       var txtHtml = "<div class='comment'>"+username+":"+content+"</div>";                      $("#resText").html(txtHtml);                            },                   “json”       );            注：作到这里，在大家不知有没有注意到，从服务器端返回的数据结果的格式可以为：xml、json、html、text、script，但这几种，其实都是一种格式，就是文本字符串。其处理的区别也只是在回调函数中，如何操作这些返回结果的区别。   3、$.getJSON 方法    用于异步获取 json数据。其回调函数通常只有 data 一个参数  $.getJSON(url, data, callback) 等价于 $.get(url, data, callback, “json”)  看到这里，大家是不是有些被蒙的感觉，使用get能实现的功能，为什么又封装一下呢，说白了，还是为了使用上的方便，当然，这也带来了学习的难度。 调用实例：  折叠展开 javascript 代码 复制内容到剪贴板 $.getJSON ("get1.aspx",                      {   // 传递的参数                      username :  $("#username").val() ,                      content :  $("#content").val()                   },                      function (data){ // 回调函数，通常只有 data 一个参数                      var username = data.record1;                  }     );       通过get方法，返回的json结果，我们了解到对于返回的 json data，其实本身也是文本字符串，只是其是被格式化了的字符串。 既然是被格式化了的，肯定就是有一定的访问方法，我们可以用 jquery 的全局函数 $.each()来进行遍历。 全局函数 $.each() 可以用来遍历对象（包含 json 对象）或数组  $.each()不同于 jquery对象的 each()方法，它是全局函数，不操作 jquery对象。    $.each() 是以要遍历的对象 / 数组作为第一个参数，以回调函数作为第二个参数。回调函数有２个参数，第一个为对象成员 / 数组的索引，第二个为对应于索引的 element 。    例：  折叠展开javascript 代码复制内容到剪贴板 $.getJSON('test.aspx', function(data){         $.each( data  , function(i, item) {             html += item['p1'] + ':' + item['p2'];             $('#resText').html(html);         })     });           4、$.getScript 方法  用于异步加载 javascript文件。  $.getScript(url, data, callback) 等价于 $.get(url, data, callback, “script”)  看到这里，是不是又有重要被蒙的感觉。呵呵   有时候，在页面初次加载时就取得所需的全部 javascript文件是没有必要的。虽然可以在需要哪个 javascript文件时，动态的创建 <script>标签， jquery代码如下： 折叠展开javascript 代码复制内容到剪贴板 $(document.createElement(“script”)).attr(“src”,”test.js”).appendTo(“head”);     //或      $(“<script type=’text/javascript’ src=’test.js’/>”).appendTo(“head”);          但这种方式并不理想。为此， jquery提供了 $.getScript()方法来直接加载 .js文件。与加载一个 html片段一样简单方便，并且不需要对 javascript文件进行处理， javascript会自动执行。  代码如下：  折叠展开javascript 代码复制内容到剪贴板 $(function(){        $('#send').click(function() {            $.getScript('test.js');         });     });       $.getScript()方法也可以有回调方法，回调方法的参数通常为空  javascript 代码复制内容到剪贴板 $.getScript('test.js',           function() {              alert('javascript loaded');            }     );          5、$.ajax() 方法  $.ajax() 方法使用上和前面提到的get很像，但参数要多，这里不作太多介绍了，日常的开发使用get/post方法就够了，不过，有些大哥就是喜欢使用复杂的$.ajax() 方法。有这种爱好的同学，自己看看手册就行了。   注：最后，交待一下，由于ajax编程，是两方面的事情，上面提到的只是客户端，说明了如何调用服务器端，服务器端如何处理这种请求，大家还是要多练习。 特别是json部分，很多人学不会这一块，就是因为在服务器端还要对数据进行json格式化。如何进行json格式化，上课时，同学可以直接问我。   注：  一、load 方法的回调函数是不论成功与否都调用。 二、$.get(), $.post(), $.getScript() and $.getJSON() 的回调函数只有 response 的状态为 success 才会调用该方法。 三、什么是回调函数：回调函数就是在ajax向服务器端发送请求后，等待服务器端处理结果的一个响应方法。当服务器端在处理完成后，一般会向客户端返回一个处理结果，回调函数就是在服务器端处理成功后，立即被执行的js方法。