1,了解json, xml数据格式:
xml数据格式是利用标签对数据就行组装,标签必须成对出现,且必须以开头 但是因为标签必须成对出现导致文件体积大,标签数量太多,实在是影响传输效率,因此使用频率不高,下面是xml数据格式的例子
张三
30
男
李四
25
男
王五
27
女
json数据格式他类似于js对象的组装方式,具有体积小,传输快的特点,这里我们拿常见的数据格式对象数组的形式来举例
[
{
"title":"Js学习",
"author":["张三","李四"]
},
{
"title":"ajax学习",
"author":["王五","赵六"]
}
]
2,Ajax如何对这俩种数据进行解析
- 首先弄清楚ajax使用步骤(4步,get,还是post 检测数据是什么,数据格式是什么,这要看后端人员给我们的接口文档,文档内会有详细的说明在,这里我也嫖了一份简单的接口文档供大家学习了解)
get方法:
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} //1,创建对象 并对IE6做兼容性处理
xhr.open("get", 'check.php?uname=' + uname, true); //2,准备发送,true代表异步
//模拟地址栏请求,得到check.php页面的数据
xhr.send(null); //3,开始发送
xhr.onreadystatechange = function() {//4,回调函数
if (xhr.readyState == 4) { //xhr状态正常
if (xhr.status == 200) { //服务器状态正常
var result = xhr.responseText;
console.log(result);
}
}
};
post方法 :
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} //1,创建对象 并对IE6做兼容性处理
xhr.open("post", 'check.php', true); //2,准备发送,true代表异步
//模拟地址栏请求,得到check.php页面的数据
xhr.setRequestHeader("content-Type", 'application/x-www-form-urlencoded');
var param = 'uname=' + uname;
//注意uname一点都不能动,这是接口文档定义好的,服务器根据这个来判别用户输入是否合法
xhr.send(param); //3,开始发送
xhr.onreadystatechange = function() {//4,回调函数
if (xhr.readyState == 4) { //xhr状态正常
if (xhr.status == 200) { //服务器状态正常
var result = xhr.responseText;
console.log(result);
}
}
};
3,Ajax对xml, json数据解析
对xml数据解析渲染
//getBooks.php
"三国演义","author"=>"罗贯中","desc"=>"一个杀伐纷争的年代");
$arr[1] = array("name"=>"水浒传","author"=>"施耐庵","desc"=>"108条好汉的故事");
$arr[2] = array("name"=>"西游记","author"=>"吴承恩","desc"=>"佛教与道教斗争");
$arr[3] = array("name"=>"红楼梦","author"=>"曹雪芹","desc"=>"一个封建王朝的缩影");
?>
$value) {
?>
书名
作者
描述
这样就将xml格式的数据渲染到页面上了
- 对json数据解析渲染
//getStudent.php
"张三","age"=>"19","sex"=>"男");
$arr[1] = array("name"=>"李四","age"=>"23","sex"=>"男");
$arr[2] = array("name"=>"王五","age"=>"30","sex"=>"女");
echo json_encode($arr);
?>
姓名
年龄
性别
这样就可以渲染到页面上去了
海报
0 条评论
111
相关文章
本站已关闭游客评论,请登录或者注册后再评论吧~