jquery中的ajax应用集锦

一，原生JS实现ajax:

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，

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

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）简单加载

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

2）筛选载入的html文档：

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

3) 详细的load用法：

$("#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）

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

4，ajax方法：

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

$.ajax(options)

先上一个简单示例：

$.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请求成功时执行的函数。

这几天码字真辛苦！

爱程序网

Tags：[db:关键字]