相比较xml格式,体积小,传输快,解析方便。
例如:
{
“student”:[
{
“name”:“张三”,
“age”:“19”,
“sex”:“男”
},
{
“name”:“李四”,
“age”:“23”,
“sex”:“女”
},
{
“name”:“王五”,
“age”:“12”,
“sex”:“男”
}
]
}
这里说一下eval函数,evaluate意思评估。
eval() 函数使用的是 JavaScript 编译器,可解析 JSON 文本,然后生成 JavaScript 对象。必须把文本包围在括号中,这样才能避免语法错误:
var obj = eval (“(” + txt + “)”);
在网页中使用 JavaScript 对象:
var txt = ‘{ “sites” : [’ +
‘{ “name”:“菜鸟教程” , “url”:“www.djznrobot.com” },’ +
‘{ “name”:“google” , “url”:“www.djznrobot.com” },’ +
‘{ “name”:“微博” , “url”:“www.djznrobot.com” } ]}’;
var obj = eval (“(” + txt + “)”);
document.getElementById(“name”).innerHTML=obj.sites[0].name
document.getElementById(“url”).innerHTML=obj.sites[0].url
注意:在php文件中,xml代码和php代码中间一定不要有多余的换行,否则不能执行!!!
写一个案例,创建一个booklist.html文件:
书籍列表案例
再在server下创建一个getBooks.php文件:
<?php //这里设置响应头信息,保证浏览器可以把相应内容识别为xml文件类型。 header("Content-Type:text/xml;"); $arr = array(); $arr[0] = array("name"=>"三国演义","author"=>"罗贯中","desc"=>"一个杀戮的时代!"); $arr[1] = array("name"=>"水浒传","author"=>"施耐庵","desc"=>"108条好汉的故事。"); $arr[2] = array("name"=>"西游记","author"=>"吴承恩","desc"=>"佛教与道教的斗争。"); $arr[3] = array("name"=>"红楼梦","author"=>"曹雪芹","desc"=>"一个封建王朝的缩影。");?> <?xml version="1.0" encoding="utf-8" ?> <?php foreach ($arr as $key => $value) { ?><?php echo $value['name'] ?>
<?php echo $value['author'] ?>
结果如下:
注意:除了XML格式,其他的都是用responseText方法,responseText方法获得字符串形式的响应数据。。
======================================================================
将Ajax的四个操作步骤封装在一个函数当中,通过调用函数来实现Ajax调用。
下面我们就在之前的register.html,进行修改,建立一个myAjax的函数,来进行封装:
注册界面
用户名:
邮箱:
手机号码:
上面的myAjax()函数方法就是封装后的。不要忘记之前的三个php后台文件。
==============================================================================
创建一个myutils.js文件,将封装起来的Ajax存入到里面:
里面通过使用对象解决了参数的顺序问题。
function myAjax2(obj){
//使用对象来解决参数的顺序问题。
//data就是要传递的参数,也就是之前的params,这里写成了对象的形式。
//这里的参数形式差不多为,uname=zhangsan&age=18
var defaults = {
type:“get”,
url:“#”,
dataType:“json”,
data:{},
async:true,
success:function(result){
console.log(result);
}
};
//将obj的属性,覆盖到defaults中的属性。
//既可以设置了默认值,又可以传递属性的值,一举两得。
for(var key in obj){
defaults[key] = obj[key];
}
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
}
// data = {
// uname:“zhangsan”,
// age:18
// }
// 参数形式差不多为,uname=zhangsan&age=18
// 按照上面的格式来写出params。
var params = “”;
for(var attr in defaults.data){
params += attr + “=” + defaults.data[attr]+“&”;
}
if (params) {
params = params.substring(0,params.length-1);
}
if (defaults.type == “get”) {
defaults.url += “?” + params;
}
xhr.open(defaults.type,defaults.url,defaults.async);
if (defaults.type == “get”) {
xhr.send(null);
}else if (defaults.type == “post”) {
xhr.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
xhr.send(params);
}
if (defaults.async) {
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200) {
if (defaults.dataType == “json”) {
result = xhr.responseText;
result = JSON.parse(result);
}else if (defaults.dataType == “xml”) {
result = xhr.responseXML;
}else{
result = xhr.responseText;
}
defaults.success(result);
}
}
}else{
if (xhr.readyState == 4 && xhr.status == 200) {
if (defaults.dataType == “json”) {
result = xhr.responseText;
result = JSON.parse(result);
}else if (defaults.dataType == “xml”) {
result = xhr.responseXML;
}else{
result = xhr.responseText;
}
defaults.success(result);
}
}
}
修改之前的register.html,并导入上面的myutils.js,如下: