输出这个字符串,默认的响应内容类型:
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