20151205 jquery 学习笔记--Ajax

Ajax全称为：“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML）， 它并不是 JavaScript 的一种单一技术，而是利用了一系列交互式网页应用相关的技术所形 成的结合体。使用 Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户 体验。

一．Ajax 概述 Ajax 这个概念是由 JesseJamesGarrett 在 2005 年发明的。它本身不是单一技术，是一串 技术的集合，主要有： 1.JavaScript，通过用户或其他与浏览器相关事件捕获交互行为； 2.XMLHttpRequest 对象，通过这个对象可以在不中断其它浏览器任务的情况下向服务 器发送请求； 3.服务器上的文件，以 XML、HTML 或 JSON 格式保存文本数据； 4.其它 JavaScript，解释来自服务器的数据（比如 PHP 从 MySQL 获取的数据）并将其 呈现到页面上。
由于 Ajax 包含众多特性，优势与不足也非常明显。优势主要以下几点： 1.不需要插件支持（一般浏览器且默认开启 JavaScript 即可）； 2.用户体验极佳（不刷新页面即可获取可更新的数据）； 3.提升 Web 程序的性能（在传递数据方面做到按需放松，不必整体提交）； 4.减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）；
而 Ajax 的不足由以下几点： 1.不同版本的浏览器度 XMLHttpRequest 对象支持度不足(比如 IE5 之前)； 2.前进、后退的功能被破坏（因为 Ajax 永远在当前页，不会几率前后页面） ； 3.搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容）； 4.开发调试工具缺乏（相对于其他语言的工具集来说，JS 或 Ajax 调试开发少的可怜） 。
异步和同步

使用 Ajax 最关键的地方，就是实现异步请求、接受响应及执行回调。那么异步与同步 有什么区别呢？我们普通的 Web 程序开发基本都是同步的，意为执行一段程序才能执行下 一段，类似电话中的通话，一个电话接完才能接听下个电话；而异步可以同时执行多条任务， 感觉有多条线路，类似于短信，不会因为看一条短信而停止接受另一条短信。Ajax 也可以 使用同步模式执行，但同步的模式属于阻塞模式，这样会导致多条线路执行时又必须一条一 条执行，会让 Web 页面出现假死状态，所以，一般 Ajax 大部分采用异步模式。

．load()方法 jQuery 对 Ajax 做了大量的封装，我们使用起来也较为方便，不需要去考虑浏览器兼容 性。对于封装的方式，jQuery 采用了三层封装：最底层的封装方法为：$.ajax()，而通过这 层封装了第二层有三种方法：.load()、$.get()和$.post()，最高层是$.getScript()和$.getJSON() 方法。

.load()方法可以参数三个参数：url(必须，请求 html 文件的 url 地址，参数类型为 String)、 data(可选，发送的 key/value 数据，参数类型为 Object)、callback(可选，成功或失败的回调 函数，参数类型为函数 Function)。 如果想让 Ajax 异步载入一段 HTML 内容，我们只需要一个 HTML 请求的 url 即可。

//HTML

<inputtype="button"value="异步获取数据"/>

<divid="box"></div>

//jQuery

$('input').click(function(){

$('#box').load('test.html');

});

如果想对载入的 HTML 进行筛选，那么只要在 url 参数后面跟着一个选择器即可。

//带选择器的 url

$('input').click(function(){

$('#box').load('test.html.my');

});

如果是服务器文件，比如.php。一般不仅需要载入数据，还需要向服务器提交数据，那 么我们就可以使用第二个可选参数 data。向服务器提交数据有两种方式：get 和 post。

//不传递 data，则默认 get 方式

$('input').click(function(){

$('#box').load('test.php?url=ycku');

});

//get 方式接受的 PHP

<?php

if($_GET['url']=='ycku'){

echo'瓢城 Web 俱乐部官网';

}else{ echo'其他网站';

}
?>

//传递 data，则为 post 方式

$('input').click(function(){

$('#box').load('test.php',{

url:'ycku'

});

});

//post 方式接受的 PHP

<?php

if($_POST['url']=='ycku'){

echo'瓢城 Web 俱乐部官网';

}else{ echo'其他网站';

}

?>

在 Ajax 数据载入完毕之后，就能执行回调函数 callback，也就是第三个参数。回调函数 也可以传递三个可选参数：responseText（请求返回）、textStatus（请求状态)、XMLHttpRequest （XMLHttpRequest 对象）。

$('input').click(function(){

$('#box').load('test.php',{

url:'ycku'

},function(response,status,xhr){

alert('返回的值为：'+response+'，状态为：'+status +'，

状态是：'+xhr.statusText);

});

});

注意：status 得到的值，如果成功返回数据则为：success，否则为：error。XMLHttpRequest 对象属于 JavaScript 范畴，可以调用一些属性如下：

如果成功返回数据，那么 xhr 对象的 statusText 属性则返回'OK'字符串。除了'OK'的状态 字符串，statusText 属性还提供了一系列其他的值，如下

注意：以上教程均来自 北风网，并非本人原创。