AJAX

##一：基本介绍
####1：全称：AsynchronousJavaScript and XML
Asynchronous：异步。当发送数据请求时，程序不用停下来等待响应。可以继续运行，等待响应收到时触发事件。通过使用来回调来管理这种程序，程序能够以有效的方式运行，避免了数据来回传输带来的延迟。
JavaScript：利用JavaScript可以接收到来自服务器端返回的数据，并将这些数据实时的更新到页面上。
XML：用XML来返回数据。但现在最常用的是JSON。

####2：Ajax的优点：
a：页面无刷新，在页面内与服务器通信，减少用户等待的时间，增强了用户的体验；
b：使用异步方式与服务器通信，响应速度快；
c：可以把一些原本服务器的工作转接到客户端，利用客户端闲置的能力来处理，减轻了服务器和宽带的负担，节约空间和宽带租用成本；
d：基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

####3：Ajax的缺点：
a：无法进行操作的后退，即不支持浏览器的页面后退；
b：对搜索引擎的组成比较弱；
c：可能会影响程序中的异常处理机制；
d：安全问题。对一些网站的攻击，如：CSRF,XXS,SQL 注入等不能很好的防御。

####4：Ajax的实现原理
a：创建XMLHttpRequest对象；
b：发出HTTP请求；
c：接收服务器传回的数据；
d：更新网页数据。
概括为：Ajax通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据，在进行处理

##二：Mock.js介绍
####1：安装
a:下载Mock.js文件；
https://raw.githubusercontent.com/nuysoft/Mock/refactoring/dist/mock.js
b：npm安装mock模块；
项目路径下执行npm install mock 命令

####2：使用
<1>生成随机数
Mock.mock( templete )
templete :表示数据模块，可以是对象或者字符串。根据数据模块来生成数据
注：数据模块由3部分构成：属性名name，生成规则rule，属性值value

"name|rule": value
<1-2>说明：
属性名和生成规则之间用竖线 | 分隔；
生成规则是可选的。
例：

`const data = Mock.mock({
'list|4': [{ 'id|+1': 1,
 "name": '@cname()', 
 addr: '@county(true)', 
 'age|18-30': 1, 
 birth: '@date()', 
 gender: '@integer(0, 1)',
 email: '@EMAIL()', 
 'like|1':['看书','运动,'听音乐'], 
 'score|1-100.2':1, 
 time: "@date('yyyy-MM-dd')",
 mobile: /^1[3-9]\d{9}$/
 }]
})
console.log( data );
`

<2>拦截Ajax请求
Mock.mock( rurl, templete )
rurl：表示需要拦截的URL。当拦截到rurl的Ajax请求时，将根据数据模板templete 生成模拟数据，并作为响应数据返回
例：

`$.ajax({
 url: "/getStudent",
 type: "GET",
 success(msg){
 console.log( JSON.parse(msg) );
 }})
 Mock.mock("/getStudent", {
 'list|4': [{
 'id|+1': 1,
 "name": '@cname()', 
 addr: '@county(true)', 
 'age|18-60': 1, 
 birth: '@date()', 
 sex: '@integer(0, 1)',
  email: '@EMAIL()', 
 'like|1':['看书','听音乐'运动'],
 'num1|1-100.2':1, 
 time: "@date('yyyy-MM-dd')",
 mobile: /^1[0-9]{10}$/
 }]
})`

##三：Ajax具体实现
Ajax技术核心就是XMLHttpRequest对象（XHR）。简单来说XMLHttpRequest用于与服务器交换数据。

####1：创建XMLHttpRequest对象
####1-1：创建XMLHttpRequest对象，也叫实例化一个XMLHttpRequest对象。因为XMLHttpRequest（）本身就是一个构造函数。
let xhr = new XMLHttpRequest( );

####1-2：IE5和IE6实现
let xhr = new ActiveXObject('Microsoft.XMLHTTP')
####1-3：创建XMLHttpRequest对象的兼容写法

`let xhr;
if(window.XMLHttpRequest){
 // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
 xhr = new XMLHttpRequest();
} else {
 // IE6, IE5浏览器执行代码
 xhr = new ActiveXObject( 'Microsoft.XMLHTTP' );
}`

####2：打开连接
XMLHttpRequest的实例对象提供了一个open（）方法用来打开客户端与服务端之间的连接，该方法规定了请求的类型，请求的路径以及是否异步处理请求。
xhr.open(method, url, async);

参数说明：
method：发送请求的方式。取值有GET和POST（不区分大小写，建议大写）；
url：请求资源的位置和路径；
async：控制是否异步处理请求。取值有：true（异步）和 false（同步）。默认为 true。

注：一般都采用异步的方式来发送请求。

####3：发送请求
XMLHttpRequest的实例对象提供了一个send（）方法用于客户端发送请求
xhr.send( );
3-1:请求参数
GET 请求：传递的数据都是跟在open（）方法中的URL后面。
例：
xhr.open("GET","/users/isUser?username=zhangsan&pwd=123"); xhr.send(null);

POST请求：传递的数据放在send（）方法的参数中。调用send（）方法之前需要设定Content-Type头信息。
例：
xhr.open("POST","login.php",true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;chars et=UTF-8"); xhr.send("username=zhangsan&pwd=123");

3-2：一般采用GET ，但是在以下情况下，采用POST
a：无法使用缓存文件（更新服务器上的文件或者数据库）
b:向服务器附发送大量数据（POST没有数据限制）
c:发送完包含未知字符的用户输入时，POST比GET 更稳定可靠

####4：处理服务器返回的消息
4-1：一个完整的HTTP由状态码，响应头集合合响应主体组成，收到响应后，可以通过XHR对象的属性来获取响应内容。

4-2：常见的属性
responseText：作为响应主体被退返回的文本（文本形式）
responseXML：如果响应的内容内型是text/xml或application/xml。这个属性中将保存响应数据的XML DOM文档（document 形式）
statusHTTP状态码（数字形式）
statusText：HTTP状态说明（文本形式）

4-3：同步处理请求
直接使用XMLHttpRequest的实例对象的responseText属性来接收服务器端返回的消息xhr.responseText;
缺点：会导致JavaScript代码要一直等到服务器响应就绪后才能继续执行。

4-4：异步请求处理
需通过XMLHttpRequest的实例对象的onreadystatechange事件监听并处理服务器返回的消息
xhr.onreadystatechange = function(){
// …
}

从"请求准备发送"到最后"请求发送成功"，中间执行的任务：
<1>请求末初始化（0）：即还没有用send（）方法；
<2>服务器连接已建立（1）：即已调用send（）方法，正在发送请求；
<3>请求已接收（2）：即send（）方法执行完成；
<4>请求处理中（3）：即正在解析响应内容；
<5>请求已完成（4）：且响应已就绪，即响应内容完成，可以在客户端进行调用了解析；

每执行一个任务，XMLHttpRequest对象的状态值readyState都会发生改变，只要readyState属性发生改变时，就会触发
onreadystatechange事件。
例：

`xhr.onreadystatechange = function(){
 if(xhr.readyState == 4 && xhr.status == 200){
 let text = xhr.responseText;
 console.log( text );
 }
}`

####5完整代码示例

`let xhr;
if (window.XMLHttpRequest) {
 xhr = new XMLHttpRequest();
} else {
 xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open("get", "/users/isPhoneExist?phone=12313212311"); 
xhr.send(); 
xhr.onreadystatechange = function () {
 if (xhr.readyState == 4 && xhr.status == 200) {  let text = xhr.responseText; 
 }}

<body>
 <button id="btn">点击我从服务器获取数据</button>
 <span id="test"></span>
 <script>
 btn.onclick = function () {
 let xhr = null;
 if (window.XMLHttpRequest) {
 xhr = new XMLHttpRequest();
 } else {
 xhr = new ActiveXObject('Microsoft.XMLHTTP');
 }
 xhr.open('GET', '/getStudent', true);
 xhr.send(null);
 xhr.onreadystatechange = function () {
 if (xhr.readyState === 4 && xhr.status === 200) {
 test.innerHTML = JSON.parse(xhr.responseText).name;
 }
 }
 }
 Mock.mock(/getStudent/, 'get', function () {
 return Mock.mock({
 'name': '@cname'
 });
 });