与服务器进行数据交互的方法——ajax，axios,fetch_简述xmlhttprequest对象与服务器进行交互的过程。

与服务器进行数据交互的方法——ajax，axios,fetch

一，与服务器交互的类型

同步交互：

理解1：同步是阻塞模式，同步交互时，两个线程的运行是相关的，a线程在运行时，b线程要阻塞等待，直到a线程运行完毕

理解2：同步交互时，客户端发出请求后，需要等待服务器相应结束以后，才能发出第二个请求。

例：再做用户登录功能时，必须检测用户名密码都正确以后才能进入系统。

异步交互：

理解1：异步是非阻塞模式，异步交互时，两个线程的运行不相关，a线程运行时，b线程也正常运行。

理解2：异步交互时，客户端发出请求后，不需要等待服务器相应结束，就可以发出第二个请求。

例：用户登录系统后，系统会刷新系统页面数据，此时存在多个数据接口与服务器进行交互，比如文字显示部分的数据接口已经交互完成，但图片显示部分还在加载（可能接口还未来得及发出请　　　　　　　求，也可能接口发出请求后还未获得响应）。

二，交互方式之ajax

定义：AJAX是“Asynchronous Javascript And XML”的缩写，翻译成中文就是“异步Javascript和XML”。即使用js语言与服务器进行交互，传输的数据为XML(不只是XML)

实现：

1.XMLHttpRequest对象

用于在后台与服务器进行交互数据

创建XMLHttpRequest对象

const variable1 = new XMLHttpRequest();
1

老版本浏览器

 //const variable2 = new ActiveObject('Microsoft.XMLHTTP');
1

 //为了兼容:
    let xmlhttp;
    if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
    } else {
      xmlhttp = new ActiveObject('Microsoft.XMLHTTP');
    }
    或者
    function createXMLHttpRequest(){
      try{
            return new XMLHttpRequest();
          }catch(e){
             return new ActiveObject('Microsoft.XMLHTTP')
           }          
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  　**2.向服务器发送请求**
1

此时用到XMLHttpRequest对象的open()和send()方法：open(),send();

open(method,url,async)
　　method:请求类型GET,POST,PUT
　　url：请求地址
     async:true(异步)或false(同步)
send(string)
     string:仅用于POST请求。 
1
2
3
4
5
6

3.服务器相应：

如果想获得来自服务器的相应，请使用XMLHttpRequest对象的responseText或者responseXML。

4.onreadystatechange

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息,状态从0-4发生变化。

0：请求未初始化，

1：服务器连接已经建立，

2：请求已经接收，

3：请求处理中，

4：请求已完成，且响应已就绪。

另外服务器的状态码：

200：‘成功’，404：‘未你找到页面’，500：服务器内部错误，401：访问资源的权限不足，等；

5.最终实现

function creatXmlHttpRequest() {
      let xmlHttp
      try {
        xmlHttp = new XMLHttpRequest();
      } catch (e) {
        xmlHttp = new ActiveXObject('Microsift.XMLHTTP')
      }
      return xmlHttp;
    }
    let xmlHttp = creatXmlHttpRequest();
    xmlHttp.onreadystatechange = function () {
      if (xmlHttp.readystate === 4 && xmlhttp.status === 200) {
        document.getElementById('myDiv').innerHTML = xmlhttp.responseText;
      }
    }
    xmlhttp.open("GET", "url", true);
    xmlhttp.send();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/*
创建XMLHttpRequest对象；
调用open()方法打开与服务器的连接；
调用send()方法发送请求；
为XMLHttpRequest对象指定onreadystatechange事件函数，这个函数会在
XMLHttpRequest的状态改变时被调用；通常我们只关心状态为4的时候。
XMLHttpRequest对象的status属性表示服务器状态码，它只有在readyState为4时才能获取到。
XMLHttpRequest对象的responseText属性表示服务器响应内容，它只有在
readyState为4时才能获取到！
*/

jQuery ajax实现：

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {}, error: function () {} });
1
2
3
4
5
6

注意：

1.ajax使用javascript技术向服务器发送异步请求，无须刷新整个页面（性能提升）

2.ajax虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大

3.因为ajax是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；

4.JQueryajax基于原生的XHR开发，另外JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理.（JQueryajax 不符合现在前端MVVM的浪潮）

5.MVVM 的核心是 ViewModel 层，它就像是一个中转站，负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。

三，交互方式之axios

定义：基于promise用于浏览器和node.js的http客户端

安装：

1.npm 安装： $npm install axios

2.bower安装：$bower install axios

3.CDN引入：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

实现方式：

axios({
    method: method,    //method:GET,POST,PUT
    url: url,         //请求地址
    data:data,     //请求参数  {username:'eee',password:'123456'};
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});    
1
2
3
4
5
6
7
8
9
10
11

另外一种方式

GET

axios.get('/getData?ID=12')
　　.then(function(response){
　　console.log(response)
}).catch(function(e){console.log(e)});
1
2
3
4

或者：

axios.get('/getData'，{params:{ID:12}}})
　　.then(function(response){
　　console.log(response)
}).catch(function(e){console.log(e)});
1
2
3
4

POST

axios.post('/login',{
　　name:'chenke',
　　password:'123456'
}).then(function(response){
　　console.log(response)
}).catch(function(e){console.log(e)});
 
1
2
3
4
5
6
7

同时执行多个并发请求：

function getData1(){
   return axios.get('/getData?ID=19');  
}

function getData2(){
   return axios.get('/getData?ID=20');  
}

axios.all([getData1(),getData2()])
.then(axios.spread(function(response1,response2){
1
2
3
4
5
6
7
8
9
10

两个请求都执行完成。
}))
　　注意：

1.从node.js创建http请求，支持Promise API,客户端支持防止CSRF（跨站请求伪造）

2.能转换请求和响应数据，能拦截请求和响应，能自动转换JSON数据，也能取消请求。

四，交互方式之fetch

和XMLHttpRequest(XHR)一样，Fetch也是浏览器的原生API(没有使用XMLHttpResquest),jquery的ajax其实是封装了XHR.

实现：

fetch('/servers/getData',{ID='1'})   //fetch(url,options)
    .then((response)=>{
      console.log(response);
       return response;
}).catch(e=>{
    console.log(e);
    return e;
})    
1
2
3
4
5
6
7
8

/*
1.fetch api返回的是一个promise
2.options:
-method:HTTP请求方法，默认GET
-body:请求参数
-header(Object):请求头，默认为{}
-credentials:默认为omit，忽略的意思，也就是不带cookie,还有两个参数，same-origin,意思是同源请求带cookie;include,表示无论跨域还是同源请求都会带cookie
*/
fetch优点：

1.写法更简单，基于标准promise实现，脱离XHR,是ES里的实现方式，支持asyn/await。

fetch缺点：

1.fetch只对网络请求报错，对400,500都当做成功的请求，服务器返回4xx(400,401等),5xx错误码时并不会reject,只有其他的网络错误导致请求不能完成时，fetch才会被reject.

2.fetch默认不带cookie,需要在options里添加配置项，{credentials：‘include’}

3.fetch没有办法原生检测请求的进度，而XHR可以。

4.fetch不支持abort,不支持超时控制，使用setTimeOut及Promise.reject实现的超时控制并不能阻止请求过程继续在后台运行，浪浪费流量。