Ajax第三天
2016-11-12 本文已影响0人
左耳击水兽
XML
- XML是一种标记语言，很类似HTML，其宗旨是用来传输数据，具有自我描述性（固定的格式的数据）。
- HTML是来展现网页的
- XML是把数据给用户来用（存储数据的）
<?xml versio = "1.0" encoding = "UTF-8"?>
<html>
<body>
<div>学习xml</div>
<name>itcast</name>
<age>18</age>
</body>
</body>
语法规则
- 1、必须有一个根元素。
- 2、可以自定义标签名。
- 3、不可有空格、不可以数字或 .开头、大小写敏感
- 4、不可交叉嵌套
- 5、属性双引号
- 6、特殊符号要使用实体
- 7、注释和HTML一样
虽然可以描述和传输复杂数据，但是其解析过于复杂并且体积较大，所以现在开发已经很少使用了。
JSON
即javaScript Object Notation 另一种轻量级的文本数据交换格式，独立与语言。
-
语法规则
- 1、数据在名称/值对中
- 2、数据由逗号分隔（最后一个健/值对不能带逗号）
- 3、花括号保存对象方括号保存数组
- 4、使用双引号
JSON解析
-
JSON数据在不同语言进行传输时，类型为字符串，不同的语言各自也都对应有解析方法，需要解析完成后才能读取。
-
1、Javascript解析方法
eavl()、JSON对象、JSON.parse()、JSON.stringify();
- 2、PHP解析方法
json_encode()、json_decode()
var json = JOSN.stringify(obj) //对象转json
var object = JOSN.parse(josn) //json转对象
- eaval 可以将字符串解析成JS可以识别的语法
var str = 'sleret(1)';
eval('('+str+')');
结果 为 1
- JSON一转换变成Obj
var json = '{"mane":"itcast","age":10 }';
var obj = eval('('+ '{"mane":"itcast","age":10 }'+')');
console.log(obj);
cc:ie6+快捷键 把js兼容放在里面
- 在PHP中解析JOSN
//数据是存在数据库里，从数据里取后往往是一个数组或对象
需要转换成JOSN
$arr = array(
'name'=>'itcast',
'age'=>10
) ;
echo json_encode($arr);//转换成josn
$obj = json_decode($json);//转换成对象
echo $obj->name;//访问对象属性
$result=file_get_content('stars.json');//获取文件
echo $result;
Ajax工具函数封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax工具函数</title>
</head>
<body>
<script>
// 定义一个命名空间
var $ = {
params: function (args) { // 专门处理我们的数据
var o = '';
for(var k in args) {
o += k + '=' + args[k] + '&';
}
o = o.slice(0, -1);
return o;
// console.log(o);
},
ajax: function (options) {
// 初始化参数
var type = options.type || 'get';
var url = options.url || location.pathname;
// get 方式 url?key=val&key1=val1
// post 方式 xhr.send(key=val&key1=val1)
var data = this.params(options.data || {});
// var success = options.success || function () {console.log('回调函数不能为空')}
var success = options.success;
var xhr = new XMLHttpRequest;
if(type == 'get') { // 当请求方式为get，参数放到url上
url = url + '?' + data;
data = null;
}
// 设置请求方式
xhr.open(type, url);
if(type == 'post') { // 当请求方式为post，需要设置Content-Type
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
// 发送请求主体
xhr.send(data);
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200) {
// 调用回调函数并传参
var result = JSON.parse(xhr.responseText);
success(result);
}
}
}
}
// 调用函数
$.ajax({
type: 'post',
url: 'demo.php',
data: {name: 'itcast', age: 10},
success: function (data) {
console.log(data);
}
});
function fn(arg1) {
// alert(arg1);
// arg1();
}
// fn(1);
// fn([1,2]);
// fn({name: 'itcast'});
var callback = function () {
alert(1);
}
fn(callback);
// for(var key in location) {
// console.log(key + '~~~~' + location[key]);
// }
</script>
</body>
</html>
- PHP文件
<?php
// 接收数据
// 以JSON方式返回
echo json_encode($_GET);
?>
补充
get数据 传在url 后面
Conten-type 是设置send里面的类型
有get 就不要Content-type
