码迷,mamicode.com
首页 > Web开发 > 详细

【学习笔记】锋利的jQuery(四)AJAX

时间:2014-09-19 23:54:26      阅读:254      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   使用   ar   strong   

一、load()方法

/*
 *如果没有参数传递,采用GET方式传递
 *如果有参数,则自动转换成POST方式传递
 *无论Ajax是否请求成功,请求完成后回调函数触发
 */
load("test.html")
load("test.html .para")  //加载html里中有para类的DOM
load("test.php",{name:"rain",age:"22"},function(responseText,textStatus,XMLHttpRequest){
   //responseText:   请求返回的内容
   //textStatus:     请求状态:success/error/notmodified/timeout 4种
   //XMLHttpRequest: XMLHttpRequest对象
})

二、$.get()与$.post()方法

$.get()与$.post()的区别:

1,GET请求将参数跟在URL后传递,POST则是作为HTTP消息的实体内容发送给服务器。

2,GET对传输的数据有大小限制,通常不大于2KB,POST不限制。

3,GET方式请求的数据会被浏览器缓存起来,数据会泄漏,而POST可以避免此类安全问题。

/*
 *get和post的结构和使用方式都一样
 *只有ajax请求的数据成功返回,回调函数才会被调用
 */
$.get("test.php",{name:"rain",age:"22"},function(data,textStatus){//GET方法的参数也可以用字符串方式
   //data:        返回的数据:XML/JSON/HTML等 
   //textStatus:  请求状态:success/error/notmodified/timeout 4种 
},"json")   //如果期望返回数据为json格式,将参数设为"json"

三、$.getScript()与$.getJson()方法

$.getScript("jq.color.js",fn)  //当js加载完后,执行回调函数

//可以通过getJSON中使用JSONP加载跨域的JSON数据
$.getJSON("test.json",function(data){ //data: 返回的json数据
   //$.each()用于遍历对象和数组,return false退出each循环
   $.each(data,function(i,item){
   //i:   data中对象成员或数组的索引值 
   //item:data对应的变量或内容
   }) 
})

四、通用Ajax方法:$.ajax()

$.ajax({
   type: "GET",         //请求方式GET/POST,默认GET
   url: "test.json",    //发送请求的地址
   dataType: "json",    //预期服务器返回的数据类型
   global: true,        //是否触发全局Ajax事件,默认为true(触发)
   beforeSend: function(XMLHttpRequest){},   //发送请求前
   complete: function(XMLHttpRequest,textStatus){}  //请求完成时(成功或失败)
   success: function(data,textStatus) {  //请求成功后的回调函数
      $.each(data,fn);               
   }, 
   error: function(XMLHttpRequest,textStatus,errorThrown) //请求失败时
})

五、jQuery中的Ajax全局事件

//fn指回调函数(callback)
ajaxStart(fn)
ajaxStop(fn)
ajaxComplete(fn)
ajaxError(fn)
ajaxSend(fn)
ajaxSuccess(fn)

//如果想某个Ajax请求不受全局方式影响
$.ajax({
   global: false;
})

 六、系列化元素的方法

//序列化为字符串
serialize()
$("#form").serialize()   //整个表单的参数
$(":checkbox,:radio").serialize()  //选中的参数

//序列化为JSON格式数据
serializeArray()
$("#form").serializeArray()
$(":checkbox,:radio").serializeArray()

//对一个数组或对象序列化
$.param()
var obj = {a:1,b:2,c:3};
$.param(obj);  //结果为a=1&b=2&c=3

【学习笔记】锋利的jQuery(四)AJAX

标签:style   blog   http   color   io   os   使用   ar   strong   

原文地址:http://www.cnblogs.com/xinghh/p/3982692.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!