明白AJAX

2019年8月31日 166次阅读 来源: ericxuan

先参考MDN的什么是AJAX

AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）。简单点说，就是运用 XMLHttpRequest 对象与服务器通讯。 它能够运用JSON，XML，HTML和text文本等花样发送和吸收数据。AJAX最吸引人的就是它的“异步”特征，也就是说他能够在不从新革新页面的情况下与服务器通讯，交流数据，或更新页面。

运用AJAX的两个特征

  • 在不从新加载页面的情况下发送要求给服务器。
  • 接收并运用从服务器发来的数据。

AJAX要求历程是什么样的

先看代码

function request(){
    let httpRequest = new XMLHttpRequest();
    //要在函数闭包内建立XHR变量，防止被其他request互相掩盖；
    if(!httpRequest){
        alert('Giving up :( Cannot create an XMLHTTP instance');
        return false;
    }

    httpRequest.onreadystatechange = alertContents;
    httpRequest.open('GET', 'test.html');
    httpRequest.send();
}

function alertContents() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert('There was a problem with the request.');
      }
    }
  }

建立XMLHttpRequest对象

let httpRequest = new XMLHttpRequest();

什么是onreadystatechange

只需 readyState 属性发生变化，就会挪用相应的处置惩罚函数。

在这个例子中，处置惩罚函数为alertContents。要注意的是，函数名后没有参数，因为你把一个援用赋值给了函数，而不是真正的挪用了它。下面会讲关于这个处置惩罚函数的详细完成。

另有onload()

onreadystatechange望文生义，每次state变化的时刻都邑挪用被给的函数，假如只想在状况为完成的时刻被挪用，能够运用onload来替代。

open() 初始化

  • 不论get照样post，都要先open()。
  • 第一个参数是HTTP要求要领 – 有GET，POST，HEAD以及服务器支撑的其他要领。 保证这些要领肯定如果大写字母，不然其他一些浏览器（比方FireFox）能够没法处置惩罚这个要求。
  • 第二个参数是你要发送的URL。因为平安缘由，默许不能挪用第三方URL域名。 确保你在页面中运用的是准确的域名，不然在挪用 open() 要领是会有 “权限被谢绝” 毛病提醒。一个轻易犯的毛病是你希图经由过程 domain.tld 接见网站，而不是运用 www.domain.tld。
  • 第三个参数是可选的，用于设置要求是不是是异步的。假如设为 true (默许设置)，JavaScript实行会延续，并且在服务器还没有相应的情况下与页面举行交互。

send() 发送

上面的就是一个get情形中，用send()的例子

再供应一个post例子

post要设定相应的request header，挪用setRequestHeader()

var xhr = new XMLHttpRequest();
xhr.open("POST", '/server', true);

//假如要post就要设定相应的request header
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() { //这里定义onreadystatechange前面已讲过了
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
        // 要求终了，做一些处置惩罚
    }
}
xhr.send("foo=bar&lorem=ipsum");//正式发送的send()挪用

处置惩罚onreadystatechange的函数完成

我们晓得会把一个函数给予xhr.onreadystatechange。那末这个函数应当做什么？

起首，函数要搜检要求的状况。假如状况的值是 XMLHttpRequest.DONE （对应的值是4），意味着服务器相应收到了并且是没题目的，然后就能够继承实行。

if (httpRequest.readyState === XMLHttpRequest.DONE) {
    ...
} else {
   ...
}
readyState对应值
  • 0 UNSENT 还没open()
  • 1 OPENED 已open()了
  • 2 HEADERS_RECEIVED 已send()了
  • 3 LOADING 猎取返回数据中
  • 4 DONE 完成

接下来，搜检HTTP相应的 response code。 能够的相应码都已列在表中 W3C相应码列表。鄙人面的例子中，我们经由过程搜检相应码 200 OK 区别对待胜利和不胜利的AJAX挪用。

if (httpRequest.status === 200) {
   ...
} else {
  ...
}
大略的相应码诠释
  • 2XX 胜利
  • 3XX 从新导向
  • 4XX 要求有题目
  • 5XX 服务端有题目

统统搜检后，那末怎样猎取返回数据？

  • httpRequest.responseText – 服务器以文本字符的情势返回
  • httpRequest.responseXML – 以 XMLDocument 对象体式格局返回，今后就能够运用JavaScript来处置惩罚

那末常常看到的jquery中的ajax是什么样的？

我们平经常使用jquery的ajax都是传一个对象，来详细本身想做什么样的要求。
那末完成ajax的时刻，也是先要从这传进来的一个对象内里找参数。处置惩罚完了今后就用这些获得的参数去做要求就能够了。

大略的完成
function ajax(options){
    if(window.XMLHttpRequest){
        let xhr = new XMLHttpRequest;
    }else{
        let xhr = new ActiveXObject();//IE6 and oler
    }

    //从option猎取一些参数
    let method = options.type || 'GET';
    let dataType = options.dataType || 'application/x-www-form-urlencoded';
    let params = options.data;
    let success = options.success;
    let fail = option.fail;
    ...
    
    //设置onreadystatechange
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
           //call success
        }else{
            //call fail
        }
    }
    
    //正式举行要求
    if(method == 'GET){
        xhr.open('GET',url + '?' + params,true);
        xhr.send();
    }else if(method == 'POST'){
        xhr.open('POST',url, true);
        xhr.setRequestHeader('Content-Type', dataType);
        xhr.send(params);
    }else{
       ...other method handler
    }
}

固然还能够fetch

Fetch 是浏览器供应的原生 AJAX 接口。这里不做过量引见。

要重点提到的就是fetch要求返回的是一个Promise，所以对猎取数据处置惩罚要用then()。

一些例子
fetch('/data.json')
.then(res => {
  res.text()       // response body (=> 照样返回Promise，须要再then())
  res.json()       // parse via JSON (=> 照样返回Promise，须要再then())
  res.status       //=> 200
  res.statusText   //=> 'OK'
  res.redirected   //=> false
  res.ok           //=> true
  res.url          //=> 'http://site.com/data.json'
  res.type         //=> 'basic'
                   //   ('cors' 'default' 'error'
                   //    'opaque' 'opaqueredirect')

  res.headers.get('Content-Type')
})

参考信息

MDN 什么是AJAX?
MDN XMLHttpRequest
阮一峰ES6指南 Promise对象
fetch cheatsheet

    原文作者：ericxuan
    原文地址: https://segmentfault.com/a/1190000018263182
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞