Jquery与Ajax
Jquery中的Ajax
jquery中的ajax 分三层
1.$.ajax()
2.load(),$.get(),$.post()
3.$.getScript(),$.getJson()
1.load()
load(url[,data][,callback])
url:请求HTML页面的URL地址,String
data:发送至服务器的key/value数据 Object
callback:请求完成时的回调函数，无论请求成功或失败
View Code
1 <script type="text/javascript">2 $(function() {3 $("#btn").click(function() {4 $("#res").load("text.aspx", function() { alert("我是回调函数！")})5 6 })7 8 })9 </script>
当请求页面的内容加载后会获得当前页面应用的CSS样式
筛选
可以通过URL的参数对获取到的内容进行筛选
结构是：url selecter
View Code
1 <script language="javascript" type="text/javascript">2 $(function(){3 $("#send").click(function(){4 $("#resText").load("test.html .para");5 })6 })7 </script>
传递方式：
传递方式根据参数data来自动指定，如果没有参数传递则采用get方式，反之则使用post
$("#id").load("text.html",{name:"xxx",age:"18"})
回调参数
回调函数返回3个参数
第一个：请求返回的内容
第二个：请求的状态
第三个：XMLHttpRequest对象
View Code
1 <script language="javascript" type="text/javascript"> 2 $(function(){ 3 $("#send").click(function(){ 4 $("#resText").load("test.html .para",function (responseText, textStatus, XMLHttpRequest){ 5 alert( $(this).html() );//在这里this指向的是当前的DOM对象，即$("#iptText")[0] 6 alert(responseText);//请求返回的内容 7 alert(textStatus);//请求状态：success，error 8 alert(XMLHttpRequest);//XMLHttpRequest对象 9 });10 })11 })12 </script>
无论请求是否成功，只要当请求完成就会触发回调函数。
load通常用于获取静态页面。
2.$.get() 全局函数
$.get(url[,data][,callback][,type])
url:请求的Html地址
data:发送到服务器的参数key/value
callback:载入成功时回调函数，在成功返回（success状态）时才会触发
type:服务端返回内容的格式，包括xml,html,script,json,text,_default等。
$.get()的方法的回调函数只有两个参数
function(data,textStatus){
//data:返回的内容，可以是xml文档，json文件或html片段
//textStatus:请求状态：success,error,notmodified,timeout四种。
}
新建一个一般处理程序
View Code
1 namespace jqueryDEMO.ashx 2 { 3 /// <summary> 4 /// $codebehindclassname$ 的摘要说明 5 /// </summary> 6 [WebService(Namespace = "http://tempuri.org/")] 7 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 8 public class Data : IHttpHandler 9 {10 11 public void ProcessRequest(HttpContext context)12 {13 string name = context.Request.Params[0];14 int age = Convert.ToInt32(context.Request.Params[1]);15 context.Response.ContentType = "text/plain";16 context.Response.Write("你的名字是:"+name+",今年："+age+"岁");17 }18 19 public bool IsReusable20 {21 get22 {23 return false;24 }25 }26 }27 }
View Code
1 <script type="text/javascript"> 2 $(function() { 3 $.get("../ashx/Data.ashx"//远程地址 4 , { name: "xiaobing", age: 18 }//传递的参数 5 , function(data, textstatus) { //回调函数 6 alert(textstatus) 7 alert(data); 8 } 9 , "html");//返回的类型10 })11 </script>
3.$post() 全局函数
使用和$.get()一样但有以下区别
1.get将参数附加在url后面，post则将参数作为实体发送给web服务器
2.get的参数不能大于2kb,post则几乎没有限制
3.get请求的数据会被浏览器缓存，所以不安全
4.服务端获取参数，get用$_GET[],post用$_POST[],但都可以用$_REQUEST[]来获取
当load方法请求带参数会自动用post方式
4.$.getScript()和$_getJson()
1.$.getScript() 动态加载js文件
有回调函数，在加载完成后执行
2.$.getJson() 和 $.getScript()用法一样，用于加载jso文件
3.$.each() 全局函数，遍历对象和数组
第一个参数是数组或对象的索引，
第二个是回调函数，2个参数，1.对象的成员或数组的索引，2.对应变量或内容
如果要退出each循环，返回false即可。
4.$.ajax() 最底层的Ajax实现
$.ajax(options) 只有一个参数，包含了所需要的请求设置以及回调函数等信息
常用参数：
1.url:发送请求的地址
2.type:请求的方式
3.timeout:请求超时时间，单位是毫秒，此设置将覆盖$.ajaxSetup()方法的全局设置
4.data:如果已经不是字符串，将自动转换为字符串，get请求将附加在url之后。防止这种转换可以查询processData选项。对象必须为key/value格式，例如：{fool:"bar",foo2""bar2"}转换为，
&fool=bar1&foo2=bar2,如果是数组，将自动为不同的值对应一个名称，例如：{foo:["bar1","bar2"]}
5.dataType:返回数据的格式，不指定会根据Http的mone信息返回 responseXML或responseText
可用类型如下：xml,html,script,json,jsonp,text
6.beforSend:请求前指定的函数，返回false可取消ajax请求
7.complete:请求完成后调用的回调函数
function(XMLHttpRequest,textStatus){}
8.success:请求成功后的回调函数，两个参数1.服务器返回并根据datatype参数进行处理后的数据
2.描述状态的字符串
9.error:请求失败时的回调函数，三个参数：1.XMLHttpRequest对象，错误信息，捕获的错误对象
10.global:默认为true，表示是否触发全局ajax事件，设置为false将不会触发全局ajax。ajaxAtart或AjaxStop可用于控制各种Ajax事件
序列化元素
1.serialize() 将dom元素内容序列化为字符串用户ajax请求
View Code
1 <form id="form1" runat="server">2 <div>3 <label id="lbl_name">4 用户名：</label><input id="name" name="youname" />5 <label id="lbl_pwd">6 密码：</label><input id="pwd" name="youpwd" />7 <input id="sub" type="submit" value="submit" />8 </div>9 </form>
View Code
1 <script type="text/javascript"> 2 $(function() { 3 $("#form1").submit(function() { 4 alert($(this).serialize()); 5 //return false; 6 7 }); 8 9 })10 </script>
输出结果：
注意：1.在像服务器传送参数时必须在submit函数中，远程服务器才可以获取
2.空间必须有name属性
输出序列化表单值的结果：
View Code
1 $("button").click(function(){2 $("div").text($("form").serialize());3 });
定义和用法
serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。
您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
语法
$(selector).serialize()
详细说明
.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。
表单元素有几种类型：
<form>
<div><input type="text" name="a" value="1" id="a" /></div>
<div><input type="text" name="b" value="2" id="b" /></div>
<div><input type="hidden" name="c" value="3" id="c" /></div>
<div>
<textarea name="d" rows="8" cols="40">4</textarea>
</div>
<div><select name="e">
<option value="5" selected="selected">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select></div>
<div>
<input type="checkbox" name="f" value="8" id="f" />
</div>
<div>
<input type="submit" name="g" value="Submit" id="g" />
</div>
</form>
.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象，比如 <input>, <textarea> 以及 <select>。不过，选择 <form> 标签本身进行序列化一般更容易些：
$('form').submit(function() {
alert($(this).serialize());
return false;
});
输出标准的查询字符串：
a=1&b=2&c=3&d=4&e=5
注释：只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单，则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中，元素必须使用 name 属性。
2.serializeArray() 序列化成json格式
3.$.param() 是 serialize()方法的核心，用于对一个数组 或对象按照key/value进行序列化
Ajax全局事件
ajaxStart() 在请求开始执行
ajaxStop() 在请求结束执行
ajaxComplete()请求完成时执行
ajaxError() 发生错误时执行，捕捉到的错误可以作为最后一个参数传递
ajaxSend()请求发送前执行
ajaxSuccess（）请求成功时执行
如果想使某个ajax请求不受全局方法的影响，可以将global设为false
来源：http://www.cnblogs.com/maomaotou/archive/2012/03/14/2396671.html