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的回调函数