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请求成功时执行的函数。
 
这几天码字真辛苦!
 
posted @ 2013-10-18 17:59  imap  阅读(436)  评论(0编辑  收藏  举报