JQuery中的Ajax

JQuery中的Ajax

用JavaScript实际过Ajax功能功的朋友们一定不会忘记使用XMLHttpRequest对象的步骤,

先生成XMLHttpRequest对象,如果浏览器不支持还要使用ActiveXObject, 然后就是绑定

回调函数,接下来.open操作,有时还要设置 请求头 然后 .send操作. 步骤太多了. 如果使

用JQuery就方便多了. 当然使用JQuery时也不要忘记,JQuery的背后其实也是按上述步骤

来实际的. JQuery中有关Ajax的操作方法有很多,但我一般只有 $.ajax() 好,现在就用一

个实际来讲解这个方法的使用. 下面是实现代码.

第一种实现

getNextTheme

其实是一个JavaScript的类

function getNextTheme(){ } //完成后的回调函数,其实也可以不用这个,JQuery还提供两个更简单的 getNextTheme.prototype.callback_Complete = function(XMLHttpRequest, textStatus){

      if (XMLHttpRequest.readyState == 4) {

              var data = XMLHttpRequest.responseText; this.instance.finished(data); 

      } else {

           this.instance.finished("搜索线程发生错误" + textStatus); 

      }

 } 

getNextTheme.prototype.finished = function(data){ 

           //对服务器返回的数据 data 进行处理,因为处理代码与本课无关,所以忽略. 

           // 对 data 进行处理 

} 

getNextTheme.prototype.begin = function(){

    $.ajax({ instance: this, url: PROXY_URL_THEME, 

         //这个就是远程用来处理请求的页面,可以是PHP写的,也可以是JSP,也可以是ASP

    cache: false, async: true, dataType: "html", timeout: 15000, complete: this.callback_Complete }); 

} 

$(document).ready(function(){

 var getTheme = new getNextTheme(); getTheme.begin(); }); 

代码分析 首先得说明一下, 以代码其实是一个JavaScript中的类. 

getNextTheme就是这个类的类名

 var getTheme = new getNextTheme(); 

getTheme.begin(); 

先生成getNextTheme的实例,然后调begin()方法就开始向服务端"要"数据了.

 具体有关JavaScript类的知识请朋友自行搜索,查找.代码解析:

 $.ajax({ 

instance: this, 

type:"GET", 

url: PROXY_URL_THEME, 

cache: false, 

async: true, 

dataType: "html", 

timeout: 15000, 

complete: this.callback_Complete }); 

type: 选择是以"GET"或"POST"的方式向服务器发送数据.

url: 服务器端的接收URL

cache: 会不会从浏览器缓存中加载请求信息, 选择有true,false,默认false

async: (默认: true) 默认设置下，所有请求均为异步请求。如果需要发

送同步请求，请将此选项设置为 false。

注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

dataType:预期服务器返回的数据类型

timeout: 设置超时,单秒毫秋季

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

知识点

在这儿有一个instance参数,这个参数是我自己"造"的, 我们除了使

用JQuery内置的参数外还可以自己定义一些参数.instance这个参

数就是我自己定义的, 怎么定义? 直接写上去就是了,参数可以自己命

名. 这个instance里放的东西可不会发送到服务端哟, 这个参数里的

数据我是给回调函数使用的. 为什么要这样做? 因为当请求被响应后

JQuery就会去调用回调函数, 这时回调函数被传入的参数只有JQuery

预定给出的类型, 有时我们是需要使用自己的数据,怎么办? 可以

在 $.ajax({}) 中把我们的数据放进去,这样回调函数就能直接访

问到了. instance使用代码如下:

getNextTheme.prototype.callback_Complete = 

function(XMLHttpRequest, textStatus){ 

       if (XMLHttpRequest.readyState == 4) { 

                var data = XMLHttpRequest.responseText; 

                this.instance.finished(data); 

       } else {

                 this.instance.finished("搜索线程发生错误" + textStatus); 

       } 

} 这里面的this.instance 就是我们在$.ajax({})中给入的instance.

 记住,名字可以自己取,可以是abc,也可以是myVar. 

第二种实现 

getNextTheme 其实是一个JavaScript的类 

function getNextTheme(){ } //响应成功的回调函数 getNextTheme.prototype.callback_Success = function(data){ 

      this.instance.finished(data); 

      this.instance.finished("搜索线程发生错误" + textStatus); 

} //响应失败的回调函数 

getNextTheme.prototype.callback_Error = function(){

      this.instance.finished("搜索线程发生错误" + textStatus); 

} 

getNextTheme.prototype.finished = function(data){

          //对服务器返回的数据 data 进行处理,因为处理代码与本课无关,所以忽略. 

          // 对 data 进行处理 } 

       getNextTheme.prototype.begin = function(){ 

            $.ajax({ 

                   instance: this, 

                   url: PROXY_URL_THEME, //这个就是远程用来处理请求的页面,可以

                                       //  是PHP写的,JSP,也可以是ASP 

                    cache: false, 

                    async: true,

                    dataType: "html", 

                    timeout: 15000, 

                    success: this.callback_Success, 

                    error:this.callback_Error }); 

             } 

    $(document).ready(function(){ 

    var getTheme = new getNextTheme(); 

    getTheme.begin(); 

}); 

代码分析: 因为其它的都没变化,就$.ajax({})中的参数有小小的

变化,所以我只说说这个变化.

success: this.callback_Success 如果成功响应则调用名为callback_Success的回调函数 error:this.callback_Error 如果无响应或者响应有问题则调用名为 callback_Error的回调函数