数据交互
浏览器端只是负责用户的交互和数据的收集以及展示,真正的数据都是存储在服务器端的。我们现在通过ajax的确可以返回一些简单的数据(一个字符串),但是在实际开发过程中,肯定会会设计到大量的复杂类型的数据传输,比如数组、对象等,但是每个编程语言的语法都不一样。因此我们会采用通过的数据交换格式(XML、JSON)来进行数据的交互。
XML
什么是XML
- XML 指可扩展标记语言(EXtensible Markup Language)
- XML 是一种标记语言,很类似 HTML
- XML 的设计宗旨是传输数据,而非显示数据
- XML 标签没有被预定义。您需要自行定义标签。
语法规范
- 第一行必须是版本信息
- 必须有一个根元素(有且仅有一个)
- 标签不可有空格、不可以数字或.开头、大小写敏感
- 不可交叉嵌套,都是双标签,如果是单标签,必须闭合
- 属性双引号(浏览器自动修正成双引号了)
- 特殊符号要使用实体
- 注释和HTML一样
xml
<students
<student
<name张三</name
<age18</age
<gender男</gender
<desc路人甲</desc
</student
<student
<name李四</name
<age20</age
<gender男</gender
<desc路人乙</desc
</student
</students
php获取xml文件的内容
php
//注意,如果需要返回xml数据,需要把content-type改成text/xml,不然浏览器以text/html进行解析。
header(‘content-type:text/xml;charset=utf-8’);
//用于获取文件的内容
//参数:文件的路径
$result = file_get_contents(“data.xml”);
echo $result;
html解析xml
javascript
//获取服务端返回的xml数据,需要使用xhr.responseXML,这是一个document对象,可以使用DOM中的方法查找元素。
var data = xhr.responseXML;
//获取所有的学生
var students = data.querySelectorAll(“student”);
缺点:虽然可以描述和传输复杂数据,但是其解析过于复杂并且体积较大,所以实现开发已经很少使用了。
JSON数据
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript 规范的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。
- 数据在名称/值对中
- 数据由逗号分隔(最后一个健/值对不能带逗号)
- 花括号保存对象,方括号保存数组
- 键使用双引号
javascript
var obj = {a: ‘Hello’, b: ‘World’}; //这是一个对象,注意键名也是可以使用引号包裹的
var json = ‘{“a”: “Hello”, “b”: “World”}’; //这是一个 JSON 字符串,本质是一个字符串
JSON数据在不同语言进行传输时,类型为字符串,不同的语言各自也都对应有解析方法,需要解析完成后才能读取
php处理json
- php关联数组== json
php
// php的关联数组
$obj = array(
“a”=“hello”,
“b”=“world”,
“name”=“zs”
);
//json字符串
j
s
o
n
=
j
s
o
n
e
n
c
o
d
e
(
json = json_encode(
json=jsonencode(obj);
echo $json;
- json===php对象
php
$json = ‘{“a”: “Hello”, “b”: “World”}’;//json字符串
//第一个参数:json字符串
//第二个参数:
//false,将json转换成对象(默认)
//true:将对象转换成数组(推荐)
o
b
j
=
j
s
o
n
d
e
c
o
d
e
(
obj = json_decode(
obj=jsondecode(json,true);
echo $obj[‘a’];
//通过json文件获取到的内容就是一个json字符串。
$data = file_get_contents(“data.json”);
//将json转换成数组
r
e
s
u
l
t
=
j
s
o
n
d
e
c
o
d
e
(
result = json_decode(
result=jsondecode(data, true);
print_r($result);
JS处理json
- JS对象 == JSON字符串 JSON.stringify(obj)
javascript
//obj是一个js对象
var obj = {a: ‘Hello’, b: ‘World’}
//result就变成了一个json字符串了
var result = JSON.stringify(obj);// ‘{“a”: “Hello”, “b”: “World”}’
- JSON字符串 == JS对象 JSON.parse(obj)
javascript
//json是一个json字符串
var json = ‘{“a”: “Hello”, “b”: “World”}’;
//obj就变成了一个js对象
var obj = JSON.parse(json);// {a: ‘Hello’, b: ‘World’}
使用json进行数据传输
思考:
- js有一个对象,如何发送到php后台
- php中有一个对象,如何发送到前台。
【案例:获取表格数据.html】
兼容性处理
javascript
var xhr = null;
if(XMLHttpRequest){
//现代浏览器
xhr = new XMLHttpRequest();
}else{
//IE5.5支持
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
前后端分离
我们使用php动态渲染页面时,有很多比较麻烦的地方。
- 在前端写好页面以后,需要后台进行修改,意味这后端程序员也需要懂前端的知识,其实渲染的工作应该交给前端来做。
- 前端没有写好页面的话,后端无法开始工作,需要等待前端的页面完成之后才能开始工作,拖延项目 的进度。
- 在客户端设备多元化的情况下,后台渲染的页面无法满足所有用户的需求
- 前后端代码混合在一个文件中,项目修改和维护成本高
jQuery中的ajax方法
jQuery为我们提供了更强大的Ajax封装
$.ajax
参数列表
参数名称 | 描述 | 取值 | 示例 |
---|---|---|---|
url | 接口地址 | url:“02.php” | |
type | 请求方式 | get/post | type:“get” |
timeout | 超时时间 | 单位毫秒 | timeout:5000 |
dataType | 服务器返回的格式 | json/xml/text(默认) | dataType:“json” |
data | 发送的请求数据 | 对象 | data:{name:“zs”, age:18} |
beforeSend | 调用前的回调函数 | function(){} | beforeSend:function(){ alert(1) } |
success | 成功的回调函数 | function (data) {} | success:function (data) {} |
error | 失败的回调函数 | function (error) {} | error:function(data) {} |
complete | 完成后的回调函数 | function () {} | complete:function () {} |
使用示例:
javascript
$.ajax({
type:“get”,//请求类型
url:“02.php”,//请求地址
data:{name:“zs”, age:18},//请求数据
dataType:“json”,//希望接受的数据类型
timeout:5000,//设置超时时间
beforeSend:function () {
//alert(“发送前调用”);
},
success:function (data) {
//alert(“成功时调用”);
console.log(data);
},
error:function (error) {
//alert(“失败时调用”);
console.log(error);
},
complete:function () {
//alert(“请求完成时调用”);
}
});
【案例:登录案例.html】
其他api(了解)
javascript
//
.
p
o
s
t
(
u
r
l
,
c
a
l
l
b
a
c
k
,
[
d
a
t
a
T
y
p
e
]
)
;
只
发
送
p
o
s
t
请
求
/
/
.post(url, callback, [dataType]);只发送post请求 //
.post(url,callback,[dataType]);只发送post请求//.get(url, callback, [dataType]);
//
.
g
e
t
J
S
O
N
(
u
r
l
,
c
a
l
l
b
a
c
k
)
;
/
/
.getJSON(url, callback); //
.getJSON(url,callback);//.getScript(url,callback);//载入服务器端的js文件
//$(“div”).load(url);//载入一个服务器端的html页面。
接口化开发
请求地址即所谓的接口,通常我们所说的接口化开发,其实是指一个接口对应一个功能, 并且严格约束了请求参数 和响应结果 的格式,这样前后端在开发过程中,可以减少不必要的讨论, 从而并行开发,可以极大的提升开发效率,另外一个好处,当网站进行改版后,服务端接口进行调整时,并不影响到前端的功能。
注册接口
表单序列化
jquery提供了一个serialize()
方法序列化表单,说白就是将表单中带有name属性的所有参数拼成一个格式为name=value&name1=value1
这样的字符串。方便我们获取表单的数据。
javascript
//serialize将表单参数序列化成一个字符串。必须指定name属性
//name=hucc&pass=123456&repass=123456&mobile=18511249258&code=1234
$(‘form’).serialize();
jquery的ajax方法,data参数能够直接识别表单序列化的数据data:$('form').serialize()
javascript
KaTeX parse error: Expected '}', got 'EOF' at end of input: …r.php", data:(‘form’).serialize(),
dataType:‘json’,
success:function (info) {
console.log(info);
}
});
需求文档
javascript
//注册功能
//总需求:点击注册按钮,向服务端发送请求
//需求1:表单校验
//1.1 用户名不能为空,否则提示"请输入用户名"
//1.2 密码不能为空,否则提示"请输入密码"
//1.3 确认密码必须与密码一直,否则提示"确认密码与密码不一致"
//1.4 手机号码不能为空,否则提示"请输入手机号码";
//1.5 手机号码格式必须正确,否则提示"手机号格式错误"
//1.6 短信验证码必须是4位的数字,否则提示"验证码格式错误"
//需求2:点击注册按钮时,按钮显示为"注册中…",并且不能重复提交请求
//需求3:根据不同响应结果,处理响应
//3.1显示注册结果