jquery中的ajax应用集锦

一，原生JS实现ajax:

1 2 3 4 5 6 7 8 9 10 11

function AjaxGet()         {             var xhrObj;             if(window.ActiveXObject) //ie5,6是以ActiveX方式声明的。             {                 xhrObj = new ActiveXObject("Microsoft.XMLHTTP");             }             else if(window.XMLHttpRequest)             {                 xhrObj = new XMLHttpRequest();             }

            //下面这段代码需要注意，有可能会报Origin null is not allowed by Access-Control-Allow-Origin. 这个错误，原因是跨域问题，解决方法：

            //将该页面也放到网站目录下，同时请求的url要和访问网站的url中的主机地址一致，比如访问网站用localhost，那请求的url也要用localhost而不能用ip，

            //因为主机地址不一样，浏览器就认为你跨域请求了。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

xhrObj.open("GET","http://localhost:9000/PHP/demo1-javascript/test.php",true); //第三个参数表示是否以异步方式发送请求，true表示以异步方式发送请求           xhrObj.onreadystatechange=reqCallback;           xhrObj.send(null); //采用GET方式提交，所有参数可以为null             function reqCallback()           {               if(xhrObj.readyState == 4) // 4表示请求完成加载               {                   if(xhrObj.status==200) // http状态值为200                   {                       $("#divRes").text(xhrObj.responseText);                   }               }           }       }       $(function(){           $("#btnForm").click(function(){               AjaxGet();           });       });

二，jquery中的ajax方法：

1，load方法：load(url [, data]  [, callback])  ，第二个参数为发送到服务器的key/value值。

1）简单加载

1 2 3 4 5 6 7 8 9

function LoadInfo()         {             $("#divRes").load(http://localhost:9000/PHP/zydemo/toload.html);  //加载到主页面后，主页面的样式会应用到加载的内容上。         }         $(function(){             $("#btnForm").click(function(){                 LoadInfo();             });         });

2）筛选载入的html文档：

1 2 3 4

function LoadInfo()         {             $("#divRes").load(http://localhost:9000/PHP/zydemo/toload.html .more);  //仅加载class为 more的元素，注意url和 .more之间有一个空格。         }

3) 详细的load用法：

1 2 3 4 5 6

$("#divRes").load("toload.html", {id:10, name:"zy"}, function(responseText, textStatus, xhrObj){ //responseText: 请求返回的内容 //textStatus:  请求状态：success, error, notmodified, timeout 4种。 //xhrObj:  XMLHttpRequest对象。 //注意，如果第二个参数不为空，则发起的是POST请求，否则是GET请求。 });

2，get 和 post方法：

1） get方法：发送请求时对传输的数据大小有限制，一般不能大于2KB，另外GET方式请求的数据会被浏览器缓存，二POST方式不会。

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

//data:  发送的key/value会作为QueryString附加到请求的url中。

//type: 期待服务端返回内容的格式：xml, html,  script,  json,  text,  default

2）post方法，使用方式同get

 

3, getScript 和getJSON 方法：

1） $.getScript("test.js", callback);  //直接加载JS文件

 

2）

1 2 3 4 5 6 7

$.getJSON("test.json",  function(jsonData){         $.each(jsonData, function(idx, val){             //注意$.each()的用法：第一个参数为数组或对象。             //第二个参数为一个回调函数，回调函数第一个参数为对象的成员或数组的索引，第二个参数为对应成员值或数组元素值。             //要退出each循环，return false即可。         } ); })

4，ajax方法：

最低层，功能最强，用法最灵活的方法。

$.ajax(options)

先上一个简单示例：

1 2 3 4 5 6 7 8

$.ajax({     type:"GET",     url:"info.aspx?id=40&idx=2&callback=?",     dataType:"jsonp",     success:function(data){           } });

$.ajax所有参数详细说明：

timeout: 请求超时时间，单位为毫秒。

data:  发送过去的参数，可以为对象或字符串。

dataType: 预期服务器返回的数据类型：xml,   html,  

        script(返回纯文本js代码，除非设置了cache参数，否则不会自动缓存结果)，发起不在同一个域下的远程请求时，所有POST请求都将转换为GET请求。

        json,  jsonp,  text(返回纯文本字符串)。

beforeSend:  例子：

    beforeSend:function(xhrObj){

    //发送请求前可以修改XMLHttpRequest对象xhrObj，

    //如果在该函数中返回false，则会取消本次ajax请求。

    }

complete：例子：

    complete:function(xhrObj, textStatus){

        //请求完成后调用的回调函数，请求成功或失败时均调用。

    }

success：例子：

    success:function(data, textStatus){

        //data: 由服务器返回，并根据dataType参数进行处理后的数据。

    }

error： 例子：

    error: function(xhrObj, textStatus, errorThrown){

    // textStatus: 错误信息

    // errorThrown: 错误对象，一般textStatus和errorThrown只有其中一个包含信息。

global: 默认为true，表示是否触发全局ajax事件。

 

5，序列化问题：

$.get("getInfo.aspx", $("#form1").serialize(),  function(data, textStatus){

    //serialize会将表单数据值序列化为字符串后提交到服务端。

    //另外 serializeArray()返回json格式的数据。

} );

$.param函数：将一个数组或对象按照key/value进行序列化。

var obj = {id:1, name:"zy", age:22};

var pms = $.param(obj);

alert(pms);  //输出id=1&name=zy&age=22

 

6，ajax全局事件：

$.ajaxStart(callback);  // ajax请求开始时触发。

$.ajaxStop(callback);  // ajax请求结束时触发。

$.ajaxComplete: ajax请求完成时触发。

$.ajaxError: ajax请求发生错误时触发。

$.ajaxSend:  ajax发送前触发。

$.ajaxSuccess: ajax请求成功时执行的函数。

 

这几天码字真辛苦！