Ajax.docx

上传人:b****5 文档编号:7208473 上传时间:2023-05-11 格式:DOCX 页数:12 大小:250.61KB
下载 相关 举报
Ajax.docx_第1页
第1页 / 共12页
Ajax.docx_第2页
第2页 / 共12页
Ajax.docx_第3页
第3页 / 共12页
Ajax.docx_第4页
第4页 / 共12页
Ajax.docx_第5页
第5页 / 共12页
Ajax.docx_第6页
第6页 / 共12页
Ajax.docx_第7页
第7页 / 共12页
Ajax.docx_第8页
第8页 / 共12页
Ajax.docx_第9页
第9页 / 共12页
Ajax.docx_第10页
第10页 / 共12页
Ajax.docx_第11页
第11页 / 共12页
Ajax.docx_第12页
第12页 / 共12页
亲,该文档总共12页,全部预览完了,如果喜欢就下载吧!
下载资源
资源描述

Ajax.docx

《Ajax.docx》由会员分享,可在线阅读,更多相关《Ajax.docx(12页珍藏版)》请在冰点文库上搜索。

Ajax.docx

Ajax

Ajax

一、利用xml实现数据传输

1、为什么xml

ajax:

xxml

用户名是否可用1/0

返回两个数的和400

登录是否成功true/false

数据插是否成功true/false

需要服务器端返回少量的、单一的数据

如果我们需要从服务器端返回大量、复杂的数据,如何实现?

xml:

服务器端返回xml数据

json:

服务器端返回json数据

2、格式:

1)php解析xml

●$dom=newDOMDocument();

●$dom->loadXML($str);

●$nd=$dom->getElementsByTagName(“TagName”);

●$value=$nd->item(0)->nodeValue

●$xml=simplexml_load_string($str);

●$first=$xml->first;

●$second=$xml->second;

2)js解析xml

●varxml=xmlHttp.responseXML;

●node=xml.getElementsByTagName(“TagName”);

●node[0].childNodes[0].nodeValue;

3、案例1:

实现两个数的四则运算

php代码:

得到结果后,需要使用字符串连接成一个xml格式的字符串,如:

需要一个根元素,下面子元素,最后是具体的值,连接时也可以使用<<

输出这个字符串,默认的响应内容类型:

text/html,也就是说客户端仍把代码当做html来进行解析,ajax对象的responeXML是不能得到一个xmldom对象,必须设置响应头类型为:

text/xml;

 

html代码:

varxml=xhr.responseXML;得到ajax返回的xmldom对象

xml.getElementsByTagName(‘jia’)[0]:

是表示获取jia这个元素

xml.getElementsByTagName(‘jia’)[0].childNodes:

表示获取jia元素下的所有子节点

xml.getElementsByTagName(‘jia’)[0].childNodes[0]:

表示获取jia元素下的唯一文本节点

xml.getElementsByTagName(‘jia’)[0].childNodes[0].nodeValue:

文本节点的值

4、案例2

在页面加载之后,将goods表中所有数据显示在表格中

222

55.00

诺E661

205.00

诺E661

200.00

 

php代码:

查询goods表中所有数据

连接xml格式的字符串

表中有多少条数据

xml字符串就有几对goods标签

其中,name字段出现中文,所以需要进行转码gb2312--utf-8

最后,输出xml字符串

html代码:

创建行元素,

创建单元素格元素

将单元格元素追加到行元素中

将行元素追加到表格元素中

运行结果:

二、利用json传输数据

1、为什么?

xml数据生成过于复杂

xml数据解析过于复杂

2、关于json介绍

对象是属性的无序集合

在js中,可以使用{}模拟这个集合

语法:

varjson={属性:

属性值,属性:

属性值}

3、用json个表示具体的信息

1)表示一个人的信息

2)表示多个人的信息

4、在php中如何使用json

);//json编码

);//json解码

生成json字符串

json表示大量数据,在php中表示多个、大量的数据可以数组、对象来表示

也就是说,在php,如果想生成json字符串,必须从数组、对象上生成。

解析json字符串

json_decode函数可以将一个json格式的字符串进行解析

其中,这个函数的第二个参数表示解析方式

true:

解析到数组中

false:

解析到对象中

默认值:

false

关于json保存中文的问题

目前,json只支持utf-8,如果想保存中文,必须进行转码

5、语法:

●varstr=xmlHttp.responseText;

●varjson=eval("("+str+")");

6、案例:

php代码:

$row:

一维数组生成一个json格式的字符串

$data:

二维数组生成一个json数组格式的字符串

html代码:

返回:

”{name:

’zhangsan’,age:

18}”eval(‘(‘+value+’)’);

返回:

”[{name:

’zhangsan’,age:

18},{name:

’lisi’,age:

20}]”eval(value);

查询数据表中所有数据并生成json字符串返回

php代码:

html代码:

三、封装ajax函数库

1、添写一个自调用匿名函数

(function(){

})();

在一个项目中,可能会引用多个js框架,如果函数名相同,会有命名冲突,定义匿名函数没有名称,就不会冲突,但匿名函数不能执行,所以需要使用以上格式让其自动执行一次。

2、封装一个函数,用于dom元素的获取

但$是局部变量,外面不能直接使用,所以:

表示为全局对象window添加一个“$”的属性,这个属性的值是当前局部变量$的值。

所以在外部,如果想获取某个dom元素,可以直接:

$(‘content’);

3、封装一个函数,用于创建ajax对象

因为之前,我们将一个函数赋值给了$,函数也是对象,所以$也就是一个对象

表示为对象$添加一个新的方法:

init

当然,也可以添加其它方法

4、封装ajax的get请求

为对象$添加一个get方法,参数有三个

url:

表示ajax请求的页面地址

data:

表示get请求时所需要传递的参数

callback:

当ajax得到正确数据后,所执行的回调函数,也就是参数callback接收的参数应该是一个函数。

5、封装post请求

为对象$添加一个post方法,参数有三个

url:

表示ajax请求的页面地址

data:

表示post请求时所需要传递的参数

callback:

当ajax得到正确数据后,所执行的回调函数,也就是参数callback接收的参数应该是一个函数。

当调用ajax请求时,可以使用这种形式:

$.method(页面地址,传递参数,处理函数);

那么对应的方法中callback参数就指向了这个处理函数,所以

callback(xhr.responseText);

相当于

处理函数(xhr.responseText);

6、添加返回值类型

现在,我们在ajax程序中,可以使用三种数据形式:

1)字符串

2)xml

3)json

我们需要完善这个框架,可以返回不同类型的数据,再进行不同的处理。

首先,为get和post方法添加第四个参数:

type,表示期望得到的返回值类型

如果用户在调用时,没有指定这个参数,就需要给它一个默认值:

再根据type值的不同,返回对应的数据

调用形式

$.method(请求地址,参数,处理函数,数据类型);

四、Ajax分页

smarty+ajax+php

1)html

2)php

3)模板

代码见:

page.html

page.php

page.htpl

五、分类联动

两个下拉列表

第一个列表显示所有大分类

大分类在改变之后,相应将对应在的小分类显示在第二个列表中

代码见:

kind.html

kind.php

六、搜索功能

当用户在文本框内输入内容,每次输入一个字符后会发送一个ajax请求,将表中对应的数据返回,并显示在下面的div中

代码见:

search.html

search.php

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 人文社科 > 法律资料

copyright@ 2008-2023 冰点文库 网站版权所有

经营许可证编号:鄂ICP备19020893号-2