jquery的ajax相关

ajax主要通过XMLHttpRequest对象来实现异步发送请求。

纯粹的js发送ajax步骤：

1、新建XMLHttpRequest或ActiveXObject(IE5/6)。例如：var httpRequest=new XMLHttpRequest();

2、使用open()方法初始化XMLHttpRequest，主要设置URL以及提交方式等。例如：httpRequest.open("GET","ajax.html","true");

3、设置回调函数，当状态值(readyState)改变时触发。例如：httpRequest.onreadystatechange=callBack;

4、使用send()方法发送该请求。例如：httpRequest.send(null);   //上面用了get方式提交，所以这里可以用null做参数

5、写回调函数。例如：function callBack(){if(httpRequest.readyState==4){if(httpRequest.status==20){alert(httpRequest.responseText);}}}

jquery对js的ajax操作进行了封装，提供了多种方法发送ajax请求。$.ajax()方法是属于对底层的方法，第2层是load()、$.get()和$.post()方法，第3层是$.getScript()和$.getJSON()方法。

load()方法：

首先介绍load()方法，通常用它来获取web服务器上的静态数据文件。它是jquery中最为简单和常用的方法，能载入远程HTML代码并插入DOM中，并且主页面的样式可以应用到新添加的文档上。方法结构为：load(url,[data],[callback])

1）载入html文档

例如：$("#testDiv ul").load("li.html"); //在ul后面加入含有li元素的html文档。

它还可以筛选出html里的内容，只需在URL参数的目标url后面空格后再加上选择器就行，格式为”url selector“。

例如：$("#testDiv ul").load("li.html .link")  //在ul后面加载li.html里面class为link的内容。

2）传递方式

当参数data有值时用post提交，当data无值时用get提交。

$("#testDiv ul").load("li.html",function(){});  //无data用get提交

$("#testDiv ul").load("li.html .link",{name:"libai",age:50},function(){});  //有data用post提交

3）回调参数

load()方法中，当ajax请求完成后，无论请求是否成功，都会执行回调函数(callback)，这个函数有3个参数，分别代表返回内容，请求状态，XMLHttpRequest。

例如：$("#testDiv ul").load("li.html .link",{name:"libai",age:50},function(responseText,textStatus,XMLHttpRequest){//...});

$.get()方法和$.post()方法

当需要简单传参数给服务器时可以使用$.get()或$.post()方法。

1)$.get()

方法结构：$.get(url,[data],[fn],[type])  //fn有两个可选参数，type为服务器端返回内容的格式。

例如：

$.get("get.html",{username:$("#username").val(),content:$("content").val()},function(data,textStatus){
    //data:返回的内容
    //textStatus：请求状态(有success、error、notmodifed、timeout4种）
    alert(data+":"+textStatus);
},"json"); //返回数据格式为json文件，json格式非常严格，不仅仅是key/value形式，而且数据上都要加双引号{"name":"libai"}

2）$.post()

方法结构：$.post(url,[data],[fn],[type])，它的结构与$.get()一样，但两者实际是有区别的。

1.get的参数在url后面，post的参数在实体内容里面。

2.get对传输数据大小有限制（通常不能大于2KB），而用post传输数据理论上不受限制。

3.get请求的数据会被浏览器缓存起来，post不会，因此get方式更不安全。

4.get与post获取参数的方法有差异。

两种提交有区别，但$.post()与$.get()使用上是一样的，具体看上面的例子。

$.getScript()方法和$.getJSON()方法

1）$.getScript()

当需要按需加载js文件时，虽然可以通过jquery代码：

$("<script type='text/javascript' src='util.js' />").appendTo("head");

或者

$(document.creatElement("script")).attr("src","util.js").appendTo("head");

来动态加载，但这种方式并不理想，可以另外通过$.getScript()方法来加载.js文件。加载完后，就可以调用里面的函数了。

方法结构：$.getScript(url,[callback]);

2）$.getJSON()

getJSON()通过get方式加载json数据，它可以通过jsonp方式跨域加载其它网络的json数据("url?callback=?")。

方法结构：$.getJSON(url,[data],[fn])

例如：$.getJSON(‘test.json',function(data){alert(data);});

$.ajax()方法

$.ajax()是jquery最底层的ajax实现，上面的方法都是基于$.ajax()来实现的。它的参数一大堆，具体百度。

--------------------------------------------------------

序列化元素

1）serialize()

当用ajax提交表单时，提交的key/value参数内容太多，不便一个一个写数据，jquery便提供了一个简便方法serialize()来提交表单。该方法将DOM元素内容（不一定是表单元素）转化为字符串。

例如：

$.get("get.html",$("#userForm").serialize(),function(data,textStatus){
    $("#text").html(data);});

2）serializeArray()

该方法与serialize()类似，但它返回的是JSON格式的数据（JSON对象）。

例如：

$(function(){   

    //input的type类型可以用冒号筛选，此处将所有复选框与单选框内容序列化成json对象

 var eles=$(":checkbox,:radio").serializeArray();
console.log(eles);
$.each(eles,function(i,ele){   //用jquery的each（）函数遍历。
$("#result").append(ele.value+",");
});
});

3）$.param()

它是serialize()方法核心，将一个数组或对象按照key/value进行序列化。

例如：

var arr={a:3,b:4,c:5};
var s=$.param(arr);
alert(s);  //输出：a=3&b=4&c=5


--------------------------------------------


Ajax全局事件

jquery提供了一些函数，为与Ajax相关的事件注册了回调函数。例如当Ajax请求开始时，会触发ajaxStart()方法的回

调函数，当请求结束时，会触发ajaxStop()方法的回调函数。这些函数是全局的，无论哪里发出了ajax请求，都会触

发它们，当然也可以局部元素绑定这些事件，让某些ajax触发这些事件。具体参考API或百度。