Ajax
- 客户端和服务器交互模型
客户端（client）包括：桌面 浏览器 移动应用等
服务器（应用程序的后台 server）包括：web服务器、数据库服务器等
数据的传送方式
推送：服务器主动给客户端发送数据
拉取：客服端向服务器请求数据
输入表单
需要做数据的校验：包括 数据格式的校验，数据准确性/是否存在的校验。
例子：去淘宝网注册，我们需要输入用户名，密码，个人邮箱/电话号码
数据格式的校验：用户名的长度是否符合要求，用户名的字符是否符合要求。
格式的校验在前台就可以校验
数据的准确性/是否存在的校验：需要和后台/服务器中进行校验
客户端和服务器的交互模型
- HTTP协议
Hypertext transfer protocal ->超文本传输协议
规定了客户端和服务器之间数据通信的
传输协议：让客户端和服务器端能够正确的沟通
HTTP 是基于请求/响应模式的协议 request/response
URL：统一资源定位器，用于访问网络上的资源
Schema：//host[:port#]/path/…./[?query-string]
Schema：指的是底层使用的协议 比如：http https(可以加密传输的内容) ftp
Host:HTTP的ip/域名
Port：http默认端口号是80，通常默认端口号80 可以不用写
Path：相对路径
Query String:发送给服务器的数据
- GET请求和post请求
GET请求：明文请求 会在URL后面以问号形式添加明文信息（问号后面是请求信息（query string）），get的请求在url后，平时上网的时候，url是用户可见的，所以请求的信息也是用户可见的。一般用在不是特别秘密的情况下
Get对请求的信息有长度的限制，不能放过长的信息
Post请求：密文请求，请求的信息放在请求体中，信息不会明显的暴露在用户面前，POST一般用在相对秘密/不想让别人知道请求信息的场合
Get和psot应用场合
1）如果请求的数据量过大的时候，或者上传数据用post
2）Get请求安全性比较差，如果需要的请求比较秘密的时候，需要用post
3）查询数据的情况，可以使用get
4）增加，删除，修改的情况，使用post
同步交互和异步交互
同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能做任何操作
异步：请求通过事件触发->服务器处理（客户端浏览器可以做其他的事情）->处理完毕
差别：同步客户端需要等待；异步客户端不需要等待
- AJAX
Asynchronous Javascript And XML(异步的Javascript和XML)
用Javascript向服务器发送请求，返回的数据是XML格式的
XML格式：
<person>
<name>John</name>
<height>133</height>
</person>
Json格式：
{‘name’:’John’,’height’:180}
AJAX 最大的特点是异步发送请求，可以局部刷新页面
AJAX的编程步骤
1)创建请求对象
Var xhr；
Try{
//正常浏览器
Xhr= new XMLHttpRequest()}
Cathc(e){
Try{
//IE6
Xhr= new ActiveXObject(‘Msxml2.XMLHTTP’);
}catch(e){
//IE5.5及更早
Xhr=new ActiveXObject（’Microsoft.XMLHTTP’）;
}
}
- 2)打开与服务器的连接
Open(method,url,async)
Method:请求方式 psot/get
async：是否发送异步请求 数据类型 boolean 默认的我们使用true（代表发送异步请求）
- 3)发送请求
Send（）
- 4)接收服务器的响应
Onreadystatechange事件（xhr.redaystate状态码改变是触发的事件，会在状态码为2，3，4的时候触发）
XMLHTTPRequest(请求对象)发送请求以后（第三步骤），会有服务器的反馈，也就是5中状态码
0：只是创建了请求对象，还没有调用open（）方法（只执行了第一步还没有执行第二部）
1：调用了open方法，但是还没有调用send（）方法（只执行了第二部，还没执行第三部）
2：已经调用了send（）方法
3：开始接受服务器的响应，还没接受完
4：接收完服务器的响应
Xhr。Readystate===4的时候（接收完服务器的响应）
服务器响应时候的状态码
200：响应是正常的（正是我们想要的结果）
404：找不到要访问的页面（在服务器上没有这个页面）
500：服务器的内部错误
。。。。
服务器的响应数据：xhr.responseText
- AJAX的认识
例子1：访问服务器上的Json文件