jQuery（7）——jQuery与Ajax的应用
---恢复内容开始---
jQuery与Ajax的应用
【Ajax的优势和不足】
优势
（1）不需要插件支持；
（2）优秀的用户体验；
（3）提高Web程序的性能；
（4）减轻服务器和宽带的负担；
不足
（1）浏览器对XMLHttpRequest对象的支持度不足；
（2）破坏浏览器前进、“后退”按钮的正常功能；
（3）对搜索引擎的支持的不足；
（4）开发和调试工具的缺乏；
【Ajax的XMLHttpRequest对象】
它是Ajax实现的关键——发送异步请求、接收响应及执行回调都是通过它来完成。
安装Web环境——AppServ
【jQuery中的Ajax】
load()方法：能载入远程HTML代码并插入DOM中。结构为：load( url [,data] [,callback])
参数解释：url：string类型，请求HTML页面的URL地址；
data（可选）：object类型，发送至服务器的key/value数据；
callback（可选）：function类型，请求完成时的回调函数，无论请求成功或失败。
载入HTML文档：开发人员只需要使用jQuery选择器为HTML片段指定目标位置，然后将要加载的文件的URL作为参数传给load()方法即可。主页面的样式会立即应用到新加载的内容上。
筛选载入的HTML文档：load()方法的URL参数的语法结构为："url selector"。如：$("#resText").load("test.html .para");
传递方法：根据参数data来自动指定。如果没有参数传递，则采用GET方式传递；反之，则会自动转换成POST方式。
//无参数传递，即GET方式 $("resText").load("test.php",function(){ //.... }); //有参数传递，即POST方式 $("resText").load("test.php",{name:"rain",age:"22"}.function(){ //.... });
回调参数：对于必须在加载完成后才能继续的操作，load()方法提供了回调函数（callback），该函数有三个参数，分别代表请求返回的内容、请求状态和XTMLHttpRequest对象
$("resText").load("test.html",function(responseText textStatus XMLHttpRequest){
//responseText:请求返回的内容
//textStatus:请求状态：success、error、notmodified、timeout四种
//XMLHttpRequest：XMLHttpRequest对象
)};
在load()方法中，无论Ajax请求是否成功，只要当请求完成后，回调函数就会被触发。
$.get()方法和$.post()方法
这两个方法是jQuery中的全局函数。可以传递一些参数给服务器中的页面。
$.get()方法：使用GET方法来进行异步请求。结构为：$.get(url [,data] [,callback] [,type])
data（可选）：object类型，发送至服务器的key/value数据会作为QueryString附加请求到URL中。
callback（可选）：function类型，载入成功时回调函数（只有当Response的返回状态是success才调用该方法）自动将请求结果和状态传递给该方法。
type（可选）:string类型，服务器端返回内容的格式，包括xml、html、script、json、text和_default。
（1）使用参数
$("#send").click(function(){
$.get("get1.php",{
username:$("#username").val(),
content:$("#content").val()
},回调函数);
});
$.get()方法的回调函数只有两个参数，且只有当数据成功返回后才会被调用。代码如下
function(data,textStatus){ //data: 返回的内容，可以是XML文档、JSON文件、HTML片段等 //textStatus: 请求状态：success、error、notmodified、timeout四种 }
（2）数据格式：HTML片段、XML文档、JSON文件。
$.post()方法：与$.get()方法结构和使用方法都相同，其不同点：
（1）GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器。在Ajax请求中，这种区别对用户不可见。
（2）GET方式对传输的数据大小限制，而POST方式比GET方式大得多。
（3）GET方式请求的数据会被浏览器缓存起来，可以取得浏览器的历史记录，但也具有严重的安全问题。
（4）GET方式和POST方式传递的数据在服务器端的获取不相同。但是两种方式都可以用$_REQUEST[]来获取。
$.getScript()方法和$.geetJson()方法
$.getScript()方法：直接加载.js文件。
$(function(){ $('#send').click(function(){ $getScript('test.js'); }); })
$.getScript()方法也有回调函数，会在JavaScript文件成功载入之后运行。
$.geetJson()方法：用于加载JSON文件，与$.getScript()方法用法相同。
$.each()函数：用于遍历对象和数组。是一个全局函数，不操作jQuery对象，而是以一个数组或者对象作为第一个参数，以一个回调函数作为第二个参数。其中回调函数拥有两个参数：第一个是对象成员或数组索引，第二个为对应变量或内容。
$.ajax()方式
结构为：$.ajax(options)。只有一个参数，但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息，参数以key/value形式存在，且所有参数都是可选的。
$.ajax()方法是jQuery最底层烦人Ajax实现，因此可以用它来代替前面提及的所有方法。
【序列化元素】
serialize()方法：作用于一个jQuery对象，能将DOM元素内容序列化为字符串，用于Ajax请求。使用该方法可以将以下代码
$("#send").click(function(){
$.get("get1.php",{
username:$("#username").val(),
content:$("#content").val()
},function(data,textStatus){
$("#resText").html(data); //将返回的数据添加到页面上
});
});
简化为
$("#send").click(function(){
$.get("get1.php",$("#form1").serialize(),function(data,textStatus){
$("#resText").html(data); //将返回的数据添加到页面上
});
});
serialize()方法在其他选择器选取的元素也都能使用该方法：
serializeArry()方法：将DOM元素序列化后，返回JSON格式的数据。
$(function(){ var fields=$(":checkbox.:radio").serializeArry(); console.log(fields); //用Firebug输出 $.each(fields,fuction( i , field ){ $("#results").append(field.value+","); }); })
$.param()方法：是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化。
【jQuery中的Ajax全局事件】
<div id="loading">加载中...</div>
当Ajax请求开始时，将此元素显示，当Ajax请求结束后，将此元素隐藏。
$("#loading").ajaxStart(function(){
$(this).show();
});
$("#loading").ajaxStop(function(){
$(this).hide();
}); //也可以用链式写法
如果想使某个Ajax请求不受全局方法的影响，那么可以在使用$.ajax(options)方法时，将参数中的global设置为false。
---恢复内容结束---
