Ajax

Ajax的优势与不足
优点：

1、 不需要插件的支持，浏览器允许js就能使用jquery

2、 优秀的用户体验：能在不刷新整个页面的前提下更新数据

3、 提高web的性能：传统模是中，数据提交通过Form表单，数据获取通过页面刷新，Ajax模式通过XMLHttpRequest对象向服务器端提交希望提交的数据，按需发送

4、 减轻服务器和带宽的负担：Ajax的工作原理是在服务器和用户之间加一个中间层，使用户操作与服务器响应异步化。在客户端创建Ajax引擎，把传统方式下的一些服务器的工作转移给客户端

不足：

1、 浏览器对XMLHttpRequest对象支持度不足

2、 破坏浏览器前进、后退按钮的正常功能

3、 对搜索引擎的支持不足，影响页面推广

4、 开发和调试缺乏工具

5.2 Ajax的XMLHttpRequest对象
Ajax的核心是XMLHttpRequest对象，通过XMLHttpRequest对象实现：发送异步请求、接收响应以及执行回调

5.3 jquery中的Ajax
1、 load()

从Web服务器上获取静态的数据文件

(1) 载入HTML文档

load(url,[.data],[.callback])

url:请求HTML页面的URL地址

data（可选）：发送至服务器的key/value数据

callback（可选）：请求完成时的回调函数，无论请求成功或失败

(2) 筛选载入的HTML文档

load()方法的URL参数的语法结构为“url selector”,筛选后不带任何样式过来。

$('div').load("test.html.ta1");

(3) 传递方式

load()方法的传递方式根据参数data来自动指定。如果没有参数传递，则采用GET方式传递，反之，则会自动转换为POST方式。

(4) 回调参数

对于必须在加载完成后才能继续的操作，load()方法提供了灰调函数，该函数有3个参数：

$(‘div’).load(“test.html”,function(responseText，textStatus，XMLHttpRequest){

//responseText:请求返回的内容

//textStatus：请求状态：success、erroe、notmodified、timout4种

//XMLHttpRequest：XMLHttpRequest对象

})

2、 $.get()与$.post()

这两个方法可以传递一些参数给服务器

（1）$.get()

$.get()方法使用GET方式进行异步请求

$.get(url,[.data][.callback][.type])

(2)$.post()

3、 $.getScript()与$.getJson()

4、 $.ajax()

Ajax是jQuery最底层的Ajax实现，结构为$.ajax(options)，该方法只有一个参数，但这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息，参数以key/value的形式存在，所有参数都是可选的。参数如下：

url：发送请求的地址，默认是当前页

type：请求方式，默认是GET

timeout：设置超时时间，此设置将覆盖$.ajaxSetup()方法的全局设置

data：发送到服务器的数据，如果不是字符串，自动转化为字符串。如{foo1:”bar1”,foo2:”bar2”}将转化为：&foo1=bar1&foo2=bar2

dataType：预期服务器的返回数据类型。默认根据HTTP包MIME信息返回responseXML或responseText。可用类型有xml、html、script、json、jsonp、text

beforeSend：发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend

中如果返回false可以取消本次Ajax请求，function(XMLHttpRequest){this//调用本次Ajax请求时传递的options参数}

complete：请求完成后调用的灰调函数（请求成功或失败均可调用）function(XMLHttpRequest,textStatus){this}

success：请求成功后调用的回调函数function(data,textStatus){}data:可能是xmlDoc、jsonObj、html、text等等，this：本次调用时传递的options参数

error：请求失败时被调用的函数function(XMLHttpRequest,textStatus,errorThrown){this}errorThrown:捕捉错误对象

global：默认为ture，表示是否触发全局Ajax事件，设置false将不会触发全局Ajax事件，AjaxStart或AjaxStop可用于控制各种Ajax事件

5.4 序列化元素
1、 serialize()

serialize()方法作用于一个jquery对象，它能够将DOM元素内容序列化给字符串，用于Ajax请求。Serizlize()方法使表单富有弹性，表单的数据可以写成如下：

$.get(“get.php”,$(“form1”).serialize(),function(data.textStatus)){})

不仅表单可以使用serialize()方法，其他jquery对象也可以使用：

$.(“:checkbox,:radio”).serialize()

2、 serializeArray()

serializeArray()方法将DOM元素序列化后，返回json格式的数据

$(function(){

var fields = $(“:check,:radio”).serializeArray();

$.each(fields,function(I,field){

$(“#results”).append(field.value+”,”)

})

})

3、 $.param()

它是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化，比如将一个普通的对象序列化：

var obj={a:1,b:2,c:3};

var k=$.param(obj);

alert(k);//输出a=1&b=2&c=3

5.5 jquery中的Ajax全局事件
jquery简化ajax操作不仅体现在调用ajax方法和处理响应方面，而且还体现在对调用ajax方法的过程中的HTTP请求的控制。通过jquery提供的一些自定义全局函数，能够为各种与ajax相关的事件注册回调函数。

ajaxStart()：在ajax请求开始时触发

ajaxStop()：在ajax请求结束时触发

ajaxComplete(callback)：ajax请求完成时执行的函数

ajaxError（callback）：ajax发生错误时执行

ajaxSend(callback)：ajax请求发送前执行

ajaxSuccess(callback)：ajax请求成功时执行

如果不想受全局方法的影响，在$.ajax()中设置global:false即可