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

时间：2022-09-13 21:39:27

一，与服务器交互的类型

　　同步交互：

　　　　理解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();
    //老版本浏览器
    //const variable2 = new ActiveObject('Microsoft.XMLHTTP');


    //为了兼容:
    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')
           }          
    }

        　　2.向服务器发送请求

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

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

　　　　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();

   /*
    创建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.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);
});    

/*另外一种方式*/
//GET   
axios.get('/getData?ID=12')
　　.then(function(response){
　　console.log(response)
}).catch(function(e){console.log(e)});
或者：
axios.get('/getData'，{params:{ID:12}}})
　　.then(function(response){
　　console.log(response)
}).catch(function(e){console.log(e)});

//POST
axios.post('/login',{
　　name:'chenke',
　　password:'123456'
}).then(function(response){
　　console.log(response)
}).catch(function(e){console.log(e)});
 
 

  　　同时执行多个并发请求：

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.从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.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实现的超时控制并不能阻止请求过程继续在后台运行，浪浪费流量。

 

标签：

相关文章