Ajax（Asynchronous JavaScript and XML），它的发明主要是让我们用JavaScript执行异步网络请求。我们使用form表单提交数据时，服务器接收数据，处理然後返回一个新的网页。这样会刷新整个页面，浪费了宽带的同时用户等待时间也会加长。而使用 Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。

一．Ajax 概述

Ajax 它本身不是单一技术，是一串技术的集合，主要包含：

1.JavaScript，通过用户或其他与浏览器相关事件捕获交互行为；

2.XMLHttpRequest 对象，通过这个对象可以在不中断其它浏览器任务的情况下向服务 器发送请求；

3.服务器上的文件，以 XML、HTML 或 JSON 格式保存文本数据；

4.其它 JavaScript，解释来自服务器的数据（比如 PHP 从 MySQL 获取的数据）并将其呈现到页面上。

ajax优势主要以下几点：

1.不需要插件支持（一般浏览器且默认开启 JavaScript 即可）

2.用户体验极佳（不刷新页面即可获取可更新的数据）

3.提升 Web 程序的性能（在传递数据方面做到按需放松，不必整体提交）

4.减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）

二 Ajax方法

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

load()方法

.load()方法可以参数三个参数：url(必须，请求 html 文件的 url 地址，参数类型String)、 data(可选，发送的 key/value数据，参数类型为 Object)、callback(可选，成功或失败的回调 函数，参数类型为函数 Function)。

如果想让 Ajax 异步载入一段 HTML 内容，我们只需要一个 HTML 请求的 url 即可。AJAX核心对象XMLHTTPRequest和服务器的交互过程：

过程：初始化→发送请求→等待服务器响应→接收响应

//HTML

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

<p id="box"></p>

//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 范畴，可以调用一些属性如下：

属性名 说明

responseText 作为响应主体被返回的文本

responseXML 如果响应主体内容类型是"text/xml"或"application/xml"，

则返回包含响应数据的 XML DOM 文档

status 响应的 HTTP 状态

statusText HTTP 状态的说明

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

HTTP 状态码 状态字符串 说明

200 OK 服务器成功返回了页面

400 Bad Request 语法错误导致服务器不识别

401 Unauthorized 请求需要用户认证

404 Not found 指定的 URL 在服务器上找不到

500 Internal Server Error 服务器遇到意外错误，无法完成请求

503 ServiceUnavailable 由于服务器过载或维护导致无法完成请求