Ajax基础知识梳理

Ajax用一句话来说就是不必革新页面即可从服务器取得数据。注重,虽然Ajax翻译过来叫异步JavaScriptXML,然则取得的数据不一定是XML数据,如今服务器端返回的都是JSON花样的文件。

完全的Ajax要求历程

完全的Ajax要求历程

  1. 建立XMLHttpRequest实例
  2. 发出HTTP要求
  3. 吸收服务器传回的数据
  4. 更新网页数据

下面先看一个红宝书上给出的提议Ajax要求的例子,API的用法在背面章节给出。

var xhr = new XMLHttpRequest();  // 建立XMLHttpRequest实例

xhr.onreadystatechange = function(){
  if (xhr.readyState == 4){   // 推断要求响应历程阶段,4 阶段代表已吸收到数据
    if (xhr.status >=200 && xhr.status < 300 || xhr.status == 304) {  // 校验HTTP状况码
      console.log(xhr.responseText);   // 输出响应的文本
    } else {
      console.error(xhr.status, xhr.statusText); // 打印其他HTTP状况码
    }
  }
};

xhr.open('get', 'example.txt', true); // 初始化xhr实例,或许说启动要求
xhr.send(null);  // 设置HTTP要求照顾参数,null为不带参数

Ajax要求历程详解

1. 建立XMLHttpRequest实例

从上面的的代码能够看出,建立一个XHR实例体式格局为:

var xhr = new XMLHttpRequest();

2. 发出HTTP要求

实例建立好后,起首需要启动一个HTTP要求,运用XHRopen()要领,open要领接收三个参数

XMLHttpRequest.open(method, url, isAsync)
// 比方
xhr.open('get', 'http://www.baidu.com', true)

第一个参数为http要求运用要领,如(’get’,’post’等),第二是参数是要求的url, 第三个参数代表是不是异步发送要求(可选)。挪用open()要领后会启动一个http要求,但它不会马上发送要求,处于待命状况。需要注重的是:要求的url必需要跟要求源域(origin)同域,也就是说协定、域名、端口号要一致,跨域要求要运用别的要领。接着挪用send()要领就会发出这个http要求。

xhr.open('get', 'http://www.baidu.com', true)
xhr.send(null)

send()要领接收一个参数,为http要求发送的数据(一般用于’post’要领),假如为null,示意不发送数据。至此,一个异步的http要求就发送到了服务器。

3. 吸收服务器传回的数据

3.1 发送同步要求

假如将open要领的第三个参数设为false,即为同步要求,当收到服务器的响应后,响应的数据会自动填充到XHR对象的属性中,重要包含以下四个:

  • responseText:作为响应主体被返回的文本。
  • responseXML: 响应返回的XML文档,能吸收到的条件是,响应的Content-Type字段的值为
    text/xml或许application/xml
  • status: HTTP状况码。
  • statusText: HTTP状况码申明。

当客户端收到以上信息后,起首要推断HTTP状况码来确认响应是不是胜利,状况码在200-300之间示意要求胜利,同时304代表要求资本未被修正,可运用浏览器当地缓存。假如胜利就能够猎取响应报文主体中的数据了。

xhr.open('get', 'http://www.baidu.com', false)
xhr.send(null)

if (xhr.status >=200 && xhr.status < 300 || xhr.status == 304) {  // 校验HTTP状况码
  console.log(xhr.responseText);   // 输出响应的文本
} else {
  console.error(xhr.status, xhr.statusText); // 打印其他HTTP状况码
}

3.2 发送异步要求

假如将open要领的第三个参数设为true,即为异步要求。那末就需要一个事宜来关照顺序异步要求的效果是不是返回。XHR对象中的readyState属性,示意要求/响应悉数历程所处的阶段,它有五个值分为对应五个阶段:

  • 0:未初始化。未挪用open()要领。
  • 1:启动。已挪用open()要领,但未挪用send()要领。
  • 2:发送。已挪用send()要领,但未收到响应。
  • 3: 吸收。已吸收到部份响应数据。
  • 4:完成。已接收到悉数响应数据。

readyState的值每变化一次,都邑触发一次readStatechange事宜,我们定义一个事宜处置惩罚函数onreadStatechange(),并监听readyState == 4状况,就能够得知响应数据已悉数收到,并举行下一步操纵。那末就是文章开首给出的代码:

var xhr = new XMLHttpRequest();  // 建立XMLHttpRequest实例

xhr.onreadystatechange = function(){
  if (xhr.readyState == 4){   // 推断要求响应历程阶段,4 阶段代表已吸收到数据
    if (xhr.status >=200 && xhr.status < 300 || xhr.status == 304) {  // 校验HTTP状况码
      console.log(xhr.responseText);   // 输出响应的文本
    } else {
      console.error(xhr.status, xhr.statusText); // 打印其他HTTP状况码
    }
  }
};

xhr.open('get', 'example.txt', true); // 初始化xhr实例,或许说启动要求
xhr.send(null);  // 设置HTTP要求照顾参数,null为不带参数

补充XHR中三个有效的事宜

timeout事宜

当超出了设置时候还未收到响应,就会触发timeout事宜,进而挪用ontimeout事宜处置惩罚顺序。同时timeout也是XHR的一个属性,用于设置这个时候阈值。下面是用法:

xhr.ontimeout = function() {
  alert('timeout!')
}

xhr.open('get', 'http://www.baidu.com', true)
xhr.timeout = 1000 // 时候阈值设为1秒
xhr.send(null)

load事宜

load事宜用于简化对readState值的推断,响应数据悉数吸收终了后(也就是readState == 4)会触发load事宜,运用onload事宜处置惩罚函数举行后续操纵,onload会吸收一个event对象,它的target属性即是XHR对象,固然我们在定义这个事宜处置惩罚函数时也能够不传入这个参数,来看下面的用法:

var xhr = new XMLHttpRequest()
xhr.onload = function () {
  if(xhr.status >=200 && xhr.status < 300 || xhr.status == 304) {
    console.log(xhr.responseText);   // 输出响应的文本
  } else {
    console.error(xhr.status, xhr.statusText); // 打印其他HTTP状况码
  }
}
xhr.open('get', 'http://www.baidu.com', true)
xhr.send(null)

如许就不用去体贴readyState值的变化状况了。固然假如想在特定readyState值上做一些逻辑处置惩罚,照样要用之前的要领。

progress事宜

这个是很有效的一个事宜,progress事宜会在浏览器吸收数据时期周期触发,代表悉数要求历程的进度,它的事宜处置惩罚顺序onprogress吸收一个event对象,event.targetXHR对象,别的event另有三个属性:

  • lengthComputable:Boolean值,进度信息是不是可用。
  • position:已吸收到的字节数。
  • totalSize:总共要吸收的字节数,被定义在响应报文的Content-Length字段中。

假如响应报文中有Content-Length字段,那末我们就能够盘算当前时候响应数据的加载进度了,这也是之前看到的一个面试题。看下面的代码:


xhr.onprogress = function(event) {
  if(event.lengthComputable) {
    console.log(`Received: ${(event.position/event.totalSize).toFixed(4)*100}%`);
  }
}

其他另有许多有效的API,如FormData表单序列化,overrideMimeType()重写XHR响应的MIME范例等等,背面逐步更新。

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