第1章 WEB前端开发工程师-jQuery框架 1-22: jQuery Ajax

                                                         jQuery Ajax

 

本节课所讲内容：

1.Ajax 概述

2.load()方法

3.$.get()和$.post()

4.$.getScript()和$.getJSON()

5.$.ajax()方法

6.表单序列化

                                                                    主讲教师：Head老师

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

一．Ajax  概述

Ajax 这个概念是由 Jesse James Garrett 在 2005 年发明的。它本身不是单一技术，是一串

技术的集合，主要有：

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

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

器发送请求；

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

4.其它 JavaScript，解释来自服务器的数据（比如 PHP 从 MySQL 获取的数据）并将其

呈现到页面上。

二．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

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

<div id="box"></div>

//jQuery

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

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

});

如果是服务器文件，比如.php。一般不仅需要载入数据，还需要向服务器提交数据，那

么我们就可以使用第二个可选参数 data。向服务器提交数据有两种方式：get 和 post。

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

页面文件

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

                            $('#ad').load('test.php?url=head');

})

Php文件

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

              echo '数据请求成功，或得Head老师的QQ';

       }else{     

              echo '数据请求失败';

       }

//传递 data，则为 post 方式

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

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

                                   url:'head'

                            });

                     })

              })

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

              echo '数据请求成功，或得Head老师的QQ:3069433707';

       }else{     

              echo '数据请求失败';

       }

在 Ajax 数据载入完毕之后，就能执行回调函数 callback，也就是第三个参数。回调函数

也可以传递三个可选参数：responseText （请求返回）、textStatus （请求状态)、XMLHttpRequest

（XMLHttpRequest 对象）。

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

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

url : 'head'

}, 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 由于服务器过载或维护导致无法完成请求