html如何用ajax连杰和苏局哭,第六章 jQuery和ajax应用

ajax函数中三个参数分别是文本文件路径、接受成功时执行的函数，接收失败时执行的函数。

属性/方法/事件

描述

实例

备注

1.readyState

readyState标识了当前对象的状态。

0

已创建 readyState但1未初始化

1

已调用open()方法，准备发送

2

已通过send()发送，但未收到响应

3

正在接收

4

完成响应

2.responseText

接收到的文本内容

只有readyState值为4时，才收到完整的响应信息

3.responseXML

描述被 XMLHttpRequest解析后的XML文档属性

4.status

http状态码

oAjax.status==200表示响应正确

readyState为3或4时才能访问。

5.statusText

状态码文本

readyState为3或4时才能访问。

6.onreadystatechange(事件)

每当readyState被改变时，都会触发onreadystatechange事件

7.open()

有5个参数

oAjax.open('GET','url',true);

method

发送请求的方法

GET,POST,PUT,DELATE,HEAD

要求大写

uri

指定把请求发送到对应的URI

acynic

是否异步，默认为true

当为true时send()方法才能被调用

username和password

服务器验证访问状况

8.send()

发送数据

没有open(),就没有send()。也就是说：readyState必须为1前提，才能调用。

9.abort()

暂停接收或发送， XMLHttpRequest对象回归初始化状态。

10.setRequestHeader()

请求头部信息

readyState为1时才能调用

11.getResponseHeader()

检索响应的头部值

readyState为3或4是才能调用。否则得到null

测试ajax需要在本地搭建服务器。

【例6.1】JavaScript实现ajax最简单的例子

单击按钮，从服务器取回“Hello Ajax!”文本。

1

2

把ajax.js引入到文件中。编写如下ajax代码

1

2

3

4

5

6

7

8

9

10

window.οnlοad=function(){

var oBtn=document.getElementById('btn1');

var oTxt=document.getElementById('resText');

oBtn.οnclick=function(){

ajax('hello.txt',function (str){

oTxt.innerHTML=str;

})

}

}

由fnSucc(oAjax.responseText);可得知，获取的str是文件的文本。

二. jQuery和ajax

jQuery中的ajax方法

1.load()方法

载入远程 HTML 文件代码并插入至 DOM 中。默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。参数如下：

1

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

url是一个字符串，描述服务器端的地址；data(可选)是发送到服务器的key/value数据；callback(可选)是请求完成时的回调函数——无论成功还是失败。

【例6.2】构建一个html文档。点击按钮后加载到页面知指定区域。

(1)载入html文档。

继沿用例6.1的html框架，同时另构造一个hello.html文档

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

苏三说:

在那命运月台前面

苏四说:

那片段 像对未来留言

苏五说:

爱只是个错觉

1

2

3

4

5

$(function(){

$('#btn1').click(function(){

$('#resText').load('hello.html');

})

})

大大减少了代码量

(2)筛选加载内容

hello.html的内容太冗余了。可以使用load(‘文档路径 选择器’)，比如我只要para的内容可以

1

$('#comment').load('hello.html .para')

注意：原来html1的样式不会被代入resText中。

(3)传递

默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。

(4)回调函数

加载完成后继续执行的函数。有三个参数

1

2

3

4

5

function(resposeText,textStatus,XMLRequest){

resposeText//请求返回的内容

textStatus//请求状态：success/error/notmodified/timout4种

XMLRequest//XMLRequest对象

}

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

load只是获取静态的数据文件。

(1)$.get()

API给出的解释是：

通过远程 HTTP GET 请求载入信息。

这是一个可以替代复杂 $.ajax 简单的 GET 请求功能。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

结构是

1

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

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时才可以调用的回调函数。包括2个参数——

1

2

3

4

function(data,textStatus){

//data:返回的内容可以是XML，JSON，HTML文档(片段)等等

//textStatus：请求状态

}

type:返回内容格式，xml, html, script, json, text, _default。

【例6.3】

编写html文档模拟一个发评论的布局

1

2

3

4

5

6

7

8

已有评论

评论

昵称

内容

用jQuery实现之。

有三种文件可以获取

a. 获取html片段

在index根目录下需要一个get1.php。用html的方式取值。

1

2

3

4

header("Content-Type:text/html; charset=utf-8");

echo "

{$_REQUEST['username']}:

{$_REQUEST['content']}

";

?>

jq

1

2

3

4

5

6

7

8

9

10

$(function(){

$('#send').click(function(){

$.get('get1.php',{

username:$('#username').val(),

content:$('#content').val()

},function (data,status){

$('#resText').html(data);

})

})

})

b. 获取xml数据

在根目录下放一个get2.php。xml可以用类似html的方法取值

1

2

3

4

5

6

7

8

9

header("Content-Type:text/xml; charset=utf-8");

echo "<?xml version='1.0' encoding='utf-8'?>".

"".

"".

"{$_REQUEST['content']}".

"".

"";

?>

获取方法：把内容提取出来组合成一段html代码！

1

2

3

4

5

6

7

8

9

10

11

12

13

14

$(function(){

$('#send').click(function(){

$.get('get2.php',{

username:$('#username').val(),

content:$('#content').val()

},function (data,status){

var username=$(data).find('comment').attr('username');//获取get2.php的username

var content=$(data).find('comment content').text();//

var txtHtml='

'+username+':

'+content+'

';

$('#resText').html(txtHtml);

})

})

})

获取较为麻烦，xml文件也较大，但是应用范围较广。

c.json文件

json有相对较好的可读性。调取方法和原生JavaScript的数组差不多。比如

1

2

var arr={a:5,b:12,c:13};

alert(arr.b)//输出12

再如get3.php：

1

2

3

4

header("Content-Type:text/html; charset=utf-8");

echo "{ \"username\" : \"{$_REQUEST['username']}\" , \"content\" : \"{$_REQUEST['content']}\"}"

?>

jq

1

2

3

4

5

6

7

8

9

10

11

12

13

14

$(function(){

$('#send').click(function(){

$.get('get3.php',{

username:$('#username').val(),

content:$('#content').val()

},function (data,textStatus){

var username=data.username;//获取get3.php的username

var content=data.content;//获取get3.php的content。

var txtHtml='

'+username+':

'+content+'

';

$('#resText').html(txtHtml);

},'json');//$.get()的第四个参数设置为'json'

})

})

但是，json对程序规范性要求非常严格。

以上三例的效果如下

(2)$.post()方法

$.post()方法结构和使用方法都和$.get()相同。区别在于

get方法——把数据放到网址来获取——安全性特别差但是便于分享。历史记录都可以看。——会缓存

如果用post方法，——把数据放到URL以外的地方来提交——适合用户注册——安全性一般。

url不可能太长，get方式的容量很低(不大于2k)。post的url是几乎无限的。——不缓存。

注意到php文档中都有这样一句话：

1

$_REQUEST['xxx']

其实，get和post都可以使用$_REQUEST['xxx']来获取对象。

回到load()方法的参数传递，默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。那么可以直接这样写：

1

2

3

4

5

6

7

8

$(function(){

$('#send').click(function(){

$.load('get3.php',{

username:$('#username').val(),

content:$('#content').val()

},fn();

})

})

默认就是post。

3. getScript()和getJson()方法。

(1)getScript()

情景：有时候，打开一个页面加载全部js是没必要的。比如qq空间。某些特效是到用时才触发。

对策：动态创建JavaScript标签。可以用DOM的方法创建，比如

1

$('')

但getScript()方法更理想。把例6.3的js.js改为test.js，重新建一个js.js，让test.js默认不加载，当鼠标移到按钮上时加载。在js.js写：

1

2

3

4

5

$(function(){

$('#send').mouseover(function(){

$.getScript('js/test.js');

})

})

用起来和原来的没区别。但是这个test.js是之后加载的。在header区也看不到test.js的引入。

只是加载好像没什么意思，getScript()还提供了回调函数，比如说，

1

2

3

4

5

6

$("#go").click(function(){

$(".block").animate( { backgroundColor:'pink' },1000)

.animate( { backgroundColor:'blue' },1000);

});

});

加载对应插件，可以在回调函数中使用相对应的方法。

(2)getJson()

用于加载json文件，用法和getScript相同。

写一个test.json文件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

[

{

"username":"张三",

"content":"沙发."

},

{

"username":"李四",

"content":"板凳."

},

{

"username":"王五",

"content":"地板."

}

]

要展现这个Jason的内容，回调函数应该怎么写呢？

思路：

$.each()通用例遍方法，可用于例遍对象和数组。

不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。第一个参数是操作对象，第二个参数是个回调函数。

回调函数又拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

举个栗子

1

2

3

$.each( [0,1,2],function(i, n){

alert("Item #" + i +": " + n );

});

输出

这样，数组[0,1,2]的对应成员就被显示出来了。

读取json可以用$.each(对象,回调函数(成员索引,对应索引内容))。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

$(function(){

$('#send').click(function() {

$.getJSON('js/test.json',function(data) {

$('#resText').empty();

var html ='';

$.each( data  ,function(commentIndex, comment) {

/*$.each表示遍历这个json，参数data是返回的数据本体，第二个参数是个回调函数

第二个回调函数function(commentIndex, comment)中，commentIndex表示数组的索引，第二个表示对应的内容*/

html +='

' + comment['username'] +':

' + comment['content'] +'

';

})

$('#resText').html(html);

})

})

})

点击之后可以在#resText中显示对应内容。

再进一步：通过jsonp形式的回调函数来加载其它网站的json数据。比如说从被墙图片网站中获取4张汽车类别的最新图片：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

$(function(){

$('#send').click(function() {

function(data){

$.each(data.items,function( i,item ){

$(" ").attr("src", item.media.m ).appendTo("#resText");

if ( i == 3 ) {

return false;

}

});

}

);

})

})

此例需要FQ。

4. $.ajax()方法

最底层的方法。一个参数是用来发送请求的url，另有一个请求参数——settings。settings包含了丰富的信息。以value/key的形式存在。

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。在此仅举一个实例展现之。参数详情见api文档。此处不过多深入。

获取一个text.js并加载

1

2

3

4

5

$.ajax({

type:"GET",

url:"test.js",

dataType:"script"

});

5.序列化元素

(1)$.serialize()方法

回到提交评论的例子。通过

1

2

3

4

5

6

7

8

9

10

$(function(){

$('#send').click(function(){

$.get('get1.php',{

username:$('#username').val(),

content:$('#content').val()

},function (data,status){

$('#resText').html(data);

})

})

})

来获取用户名及评论内容。serialize()可以使序列表表格内容转化为字符串。

1

2

3

4

5

6

7

$(function(){

$('#send').click(function(){

$.get('get1.php',$('#form1').serialize(),function (data,textStatus){

$('#resText').html(data);

})

})

})

在此例中，data变成了字符串。

(2)$.serializeArray()方法

序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。

'''注意'''，此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。

返回的JSON对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对——name参数和value参数(如果value不为空的话)。

(3)$.param()方法

1

2

3

var params = { width:1680, height:1050 };

var str = jQuery.param(params);

$("#results").text(str);

输出结果为

width=1680&height=1050

6.jQuery中的ajax全局事件。

一个栗子：读取远程数据时，加载可能会比较慢。这时需要一个过渡画面(loading)，以全局事件函数作为判断，适时出现。

1

2

3

4

5

$('#loading').ajaxStart(function(){

$(this).show();

}).ajaxStop(function(){

$(this).hide();

})

【大案例】没有了

原书中ajax聊天室案例在笔者电脑的服务器环境上无法正常运行，也许是配置出了问题。

本章看起来相当头疼，因为涉及了较多后端知识，书的编排基本遵照api文档。案例，怎么说呢，也是相当的旧。笔者在使用时旁敲侧击了很多不属于本书方法。这也是本系列文章的主要特征吧。

但是，有些旧案例还是以学习思想方法为主。所以能敲的还是要敲的。日后知识长进，还是要更新。

最后小结本章学到的东西，当然只是自己的理解

(1)ajax最重要是从数据库读取返回数据，弄明白原生参数很重要。

(2)jQuery基本的操作方法——

$.load()——载入、筛选、回调

$.get()、$.post()——操作不同类型的数据(xml,html,json)——get和post的区别——最底层的方法当然是$.ajax()——然而现实中用得不多。

选择性地加载数据——getScript;$.getJSON——加载json文件有自己的方法。

序列化元素——通过$.serialize()系列方法迅速转换。

全局事件——应用：加载需要时间，在等待时需要反馈用户适当的提示。