jQuery与AJAX----jQuery中ajax接口

jQuery与AJAX整理自《锋利的jquery》第二版 第六章

1.ajax的优势与不足

1.1ajax的优势

• 不需要插件支持。 ajax不需要任何浏览器插件，就可以被绝大多数主流浏览器支持，用户只需要允许js在浏览器上执行即可。
• 优秀的用户体验 这是ajax技术的最大优点，能在不刷新整个页面的前提下更新数据，这使得web应用程序能更为迅速得回应用户的操作。
• 提高web程序的性能 与传统模式相比，ajax模式在性能上最大的差别就是传输数据的方式，在传统模式中，数据提交是通过表单（Form）来实现的，而数据获取是靠全页面刷新来重新获取整页内容。ajax模式只是通过XMLHttpRequest对象向服务器提交希望提交的数据，即按需发送。
• 减轻服务器和带宽的负担 ajax的工作原理相当于在用户和服务器之间附加了一个中间层，使用户操作与服务器响异步化。它在客户端创建ajax引擎，把传统模式下的一些服务器负担的工作转移到客户端，便于客户端资源来处理，减轻服务器和带宽的负担。

1.2 ajax的不足

• 浏览器对XMLHttpRequest对象的支持还不够 ajax的不足之一首先来自浏览器。IE5.0版本之后才支持ajax（现在都是IE6.0以上了，哈哈）。编写ajax要兼容浏览器。（看在估计不需要兼容了）
• 破坏浏览器前进，后退按钮的正常功能 当用户单机一个按钮触发一个ajax交互后，又觉得不想这样做，接着就习惯性的单击“后退”按钮，结果发生了最不愿意看到的结果，浏览器后退到了先前的一个界面，通过ajax交互得到的内容完全消失了。
• 对搜索引擎的支持不足 通常搜索引擎都是通过爬虫程序来对互联网上的数以亿计的海量数据来进行搜索整理，然而爬虫现在还不能理解那些奇怪的js代码和因此引起的页面内容的变化。

• 开发和调试工具的缺乏缺少很好的js开发和调试工具。（chrome 开发者工具不是吗？好吧我也不懂。）

  2.ajax的XMLHttpRequest对象

  XMLHttpRequest是ajax的关键：发送异步请求，接受响应和执行回调。
  下面是用原生js编写的一个ajax例子

//创建一个XMLHttpRequest对象var xmlHttpReq=null;//兼容IE浏览器if(window.ActiveXObject){    xmlHttpReq=new ActiveXObject("Microsoft.XMLHTTP");}else if(window.XMLHttpRequest){    xmlHttpReq=new XMLHttpRequest();}//实例化成功后，使用open()方法来初始化XMLHttpRequest对象，指定http方法和要使用的服务器URLxmlHttpReq.open('GET','test.php',true);//异步回调时，注册异步回调事件处理器xmlHttpReq.onreadystatechange=RequestCallBack;//发送请求xmlHttpReq.send(null);function RequestCallBack(){    //请求完成加载    if(xmlHttpReq.readyState==4){        //http状态值为200，表示已经响应成功        if(xmlHttpReq.status==200){       //将xmlHttpReq.responseText的值复制给某标签            docuemnte.getElementById("ss").innerHTML=xmlHttpReq.responseText;        }    }}

xmlHttpReq.open('GET','test.php',true);

这一句有三个参数

• 第一个参数指定http方法。GET方法和POST方法两种
• 第二个参数是指定的目的url
• 第三个参数是async，负责指定ajax请求是异步还是同步。false是同步，true是异步。

GET和POST方法的比较

• GET请求会将参数跟在URL后面进行传递，而POST请求则是作为HTTP消息的实体内容发送给web服务器。
• GET请求对传输的数据大小是有限制的（通常为2KB以内），而POST方式传输的数据无大小限制。
• GET请求的数据会被浏览器缓存起来，因而其他人可以从浏览器的历史纪录中读取到这些数据，例如账号和密码等。GET方式有安全性问题，而POST方式没有。
• GET方式和POST方式在服务器端的获取方式也不同。php中$_GET()和$_POST()两种方式。
• GET对数据进行查询，POST主要对数据进行增删改！简单说，GET是只读，POST是写。

为什么GET方式不如POST方式安全？既然这样发明GET方式干嘛？
HTTP POST GET 本质区别详解

里面提到了GET方式可能发生CSRF攻击。

if(xmlHttpReq.readyState==4){

这里的readystate共有5种信号的可能，也就是说判断到readystate=4时，onreadystatechange函数已经触发了五次。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

3.jquery中的ajax

jquery对ajax进行了三层封装

• 第一层：$.ajax()方法
• 第二层：load(),$.get(),$.post()方法

• 第三层：$.getScript(),$.getJSON()方法

  3.1 load方法

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

载入远程HTML代码并插入到DOM中
参数：

• url：请求HTML页面的url地址，语法结构为url selector。注意url与选择器之间有一个空格
• data（可选）：发送至服务器的key/value值

• callback(可选)：请求完成时的回调，无论请求或失败。callback函数有三个参数，分别是请求返回的内容，请求状态和XMLHttpRequest对象。

  例：

//没有参数传递，则使用GET方式传递$("#aa").load("test.html .param",function(){    ///})//有参数传递，则使用POST方式传递$("#aa").load("test.html .param",{name:"rain",age:"2"},function(){    ///})//callback带参数$("#aa").load("test.html .param",{name:"rain",age:"2"},function(responseTest,textStatus,XMLHttpRequest){    //responseTest：请问返回内容    //textStatus 请求状态：success,error,notmodified,timeout    //XMLHttpRequest XMLHttpRequest对象})

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

$.get()和$.post()方法是jquery中的全局函数，而load方法是针对jquery对象进行操作的。

3.2.1$.get()方法

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

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

参数：

• url：请求的url地址
• data（可选）“发送至服务器的key/value数据会作为QueryString附加到请求URL中（GET方式的特点）
• callback（可选）：回调。只有response的返回状态为success时返回，自动将请求结果和状态传递给该方法
• type（可选）：服务器端返回内容的格式，包括xml,html,script,json,text等

$("#ss").click(function(){    $.get('get.php',{        username:$('#username').val(),        content:$('#content').val()    }),function(data,textStatus){        $("#res").html(data);//将返回的数据添加到页面上    }})

关于返回数据data的格式，可以是html格式，xml格式或者json格式

• 不需要与其他应工程序共享数据时，可以使用html片段
• 数据需要重用时，json格式，因为体积小，速度快。
• 远程应用程序未知时，使用xml格式，xml是web服务领域的世界语。

3.2.2 $.post()方法

$("#ss").click(function(){    $.post('post.php',{        username:$('#username').val(),        content:$('#content').val()    }),function(data,textStatus){        $("#res").html(data);//将返回的数据添加到页面上    }})

load,get,post函数可以完成常规的ajax操作，如果要编写复杂的ajax程序，需要$.ajax()方法。

3.3 $.getScript()和$.getJson()方法

3.3.1 $.getScript()函数

$.getScript('test.js',callback)

动态加载js标签。callback可以制定加载js文件后的动作

3.3.2 $.getJson()函数

$.getJson('test.json',function(data){    //data: 返回的数据})

动态加载json文件，在callback函数里返回的数据

3.3.3 $.ajax()函数

$.ajax(options)

只有一个参数。那怎么使用捏

$.ajax({    type:"GET",    url:"test.js",    dataType:"script"})

只要参数合适，可以构建前面的load，get，post等几个方法了。
options参数集包括：

• url ： 请求地址
• type ：GET还是POST发送类型
• timeout ：设置请求超时事件
• data ：发送数据
• dataType ：返回数据类型
• beforeSend ：发送请求前可以修改XMLHttpRequest对象，例如添加http头
• complete：请求完成回调（成功和失败都调用）
• success：请求成功回调
• error：失败回调
• global：是否出发全局ajax事件，默认为true

4. 序列化元素

4.1 serialize()方法

$("#form").serialize()$(":checkbox,:radio").serialize()

可以将dom元素序列化为字符串。
自己实测了一下，必须是input元素这种输入元素才能获得表单

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><form action="">    First name: <input type="text" name="FirstName" value="Bill" /><br />    Last name: <input type="text" name="LastName" value="Gates" /><br /></form><script src="jquery-2.1.3.js"></script><script>   console.log($('form').serialize());</script></body></html>

4.2 serializeArray()方法

哇，这个更棒了，这个将dom元素序列化之后返回JSON格式

4.3 param()方法

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

 var obj={a:1,b:2,c:3};    var k= $.param(obj);    console.log(k);

5.jquery中的ajax全局事件

ajax全局事件有什么用？
举个例子。
为了用户体验友好，现在希望ajax异步加载图片的过程中显示正在加载中，作用于所有的ajax请求。
这里有一个全局的ajaxStart函数和ajaxStop函数，是全局函数，在每一个ajax请求开始时和结束时分别触发。
我们只需添加以下代码

<div id="loading">加载中</div>

$("#loading").ajaxStart(function(){    $('this').show();})$("#loading").ajaxStop(function(){    $('this').hide();})

这样轻松实现了需求。

以下列举几个全局函数

• ajaxComplete ：请求完成时执行
• ajaxError：请求发生错误时执行
• ajaxSend：发送之前时执行
• ajaxSuccess：请求成功时执行

6.小小感想

学了jquery之后才发现，前端有一种追求极致的感觉，强迫我们用户体验良好，程序还能安全简单。感觉收获蛮大的呢。