Javascript:ajax

2019年8月30日 168次阅读 来源: Murphywuwu

XMLHttpRequest

Ajax手艺能向效劳器请求分外的数据而无需加载页面。而这一手艺的中心就是XMLHttpRequest对象(简称XHR)。

XMLHttpRequest要领

// 竖立xhr对象
var xhr = new XMLHttpRequest();

xhr.open(method,url,async)

吸收3个参数:要发送的请求的范例，请求的URL，示意是不是异步发送请求的布尔值。

  1. URL相对于当前页面(也能够运用绝对路径)

  2. 挪用open()要领不会真正发送请求，而只是启动一个请求以备发送

// 初始化请求
xhr.open('get',example.php,true)

Note:只能向同一个域(子域名和主域名都得雷同)运用雷同端口号和协定的URL发送请求。假如URL与启动请求的页面有任何差异，都邑激发平安毛病。

// 一个域名的构成

协定    子域名  主域名     端口号  
http:// www.   abc.com : 8080

同源战略

请求范例

GET请求

用于向效劳器查询某些信息。

能够将查询字符串参数追加到URL末端，以便将信息发送给效劳器。对XHR而言，位于传入open()要领的URL末端的查询字符串必需经由准确的编码才行。

Note:查询字符串中的每一个参数的称号和值都必需运用encodeURIComponent()举行编码，然后才放到URL的末端;而且所著名-值对都必需由亲睦(&)分开。

function addURLParam ( url, name, value ) {

    url += url.indexOf('?') === -1 ? '?' : '&';
    url += encodeURIComponent(name) + '=' + encodeURIComponent(value); 

    return url;
}
POST请求

用于向效劳器发送应当被保留的信息。

POST请求应当把数据作为请求的主体提交。

PUT请求

向效劳器发送想要更新的信息来替代效劳上旧的信息

DELETE请求

删除效劳上的信息。

Note:效劳器并不会强制实行它获得的每一个请求。假如你随便的阅读一个网站，并请求删除它的重要页面，很可能会失利

xhr.send(string)

吸收一个参数，即要作为请求主体发送的数据。假如不需要经由历程请求主体发送数据，则必需传入null

xhr.abort()

作废异步请求。

  1. 挪用这个要领后，xhr对象会住手触发事宜

  2. 不允许xhr对象接见任何与响应有关的对象属性

xhr.setRequestHeader()

设置自定义的头部信息。

吸收两个参数:1.头部字段的称号和头部字段的值。
必需在挪用send()要领之前且open()要领以后，挪用此要领。

xhr.open('get', 'example.php', true);
xhr.serRequestHeader('MyHeader', 'MyValue');
xhr.send(null);

xhr.getResponseHeader()

传入头部字段称号，能够获得响应的头部信息,查询响应中某个字段的值

xhr.getAllResponsHeaders()

能够获得一切头部信息的长字符串

XMLHttpRequest属性

《Javascript:ajax》

/* 发送同步请求 */

// 竖立xhr对象
var xhr = new XMLHttpRequest();

// 初始化请求
xhr.open('get',example.php,false);

// 发送请求
xhr.send(null);

在收到响应后，响应的数据会自动添补XHR对象的属性，相干的属性简介以下

与响应有关的xhr属性

  • status: 响应的HTTP状况码

  • statusText: HTTP状况的申明 // 跨阅读器运用不可靠

  • responseText: 作为响应主体被返回的文本,获得字符串情势的响应数据

  • responseXML: 假如响应的内容为’text/xml’或’application/xml’,这个属性中将保留包含着响应数据的XML DOM文档

HTTP状况码

  • 1XX 提醒信息 – 示意请求已被胜利吸收，继承处置惩罚

  • 2XX 胜利 – 示意请求已被胜利吸收，明白，接收

  • 3XX 重定向 – 要完成请求必需举行更进一步的处置惩罚

  • 4XX 客户端毛病 – 请求有语法毛病或请求没法完成

  • 5XX 效劳器端毛病 – 效劳器未能完成正当的请求

/* 发送异步请求 */

// 竖立xhr对象
var xhr = new XMLHttpRequest();

// 监听请求状况
xhr.onreadystatechange = function () {
    if(xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status = 304) {
            alert(xhr.responseText);
        } else {
            alert('Request was unsuccessful: ' + xhr.status);
        }
    }
}
 
// 初始化请求
xhr.open('get',example.php,true);

// 发送请求
xhr.send(null);

示意请求响应历程的xhr属性

  • readyState:

    1. 0。未初始化。还没有挪用open()要领

    2. 1。效劳器竖立衔接。已挪用open()要领，但未挪用send()要领

    3. 2。请求已吸收。挪用send()要领，但未吸收到响应

    4. 3。请求处置惩罚中。吸收到部份数据响应

    5. 4。请求完成。吸收到悉数响应数据，能够在客户端运用了。

HTTP响应与请求体

http—无状况协定

请求历程
1.竖立TCP衔接
2.Web阅读器向效劳器发送请求敕令
3.Web阅读器发送请求头信息
4.Web效劳器应对
5.Web效劳器发送应对头信息
6.Web效劳器向阅读器发送数据
7.Web效劳器封闭TCP衔接

HTTP请求包(阅读器信息)

Request包的构造, Request包分为3部份

第一部份叫Request line（请求行)
第二部份叫Request header（请求头）
第三部份是body（主体）。header和body之间有个空行，请求包的例子所示:

GET /domains/example/ HTTP/1.1 //请求行: 请求要领 请求URI HTTP协定/协定版本 

Host：www.iana.org //效劳端的主机名 
User-Agent：Mozilla/5.0 (Windows NT 6.1)
AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.94 Safari/537.4 // 阅读器信息 
Accept：text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 //客户端能吸收的mine 
Accept-Encoding：gzip,deflate,sdch //是不是支撑流紧缩
Accept-Charset：UTF-8,*;q=0.5 //客户端字符编码集 

//空行,用于支解请求头和音讯体 

//音讯体,请求资本参数,比方POST通报的参数

HTTP响应包(效劳器信息)

和请求包一样分为3个部份。


HTTP/1.1 200 OK                            // 状况行

Server: nginx/1.0.8                       // 效劳器运用的WEB软件名及版本
Date:Date: Tue, 30 Oct 2012 04:14:25 GMT // 发送时候
Content-Type: text/html                 // 效劳器发送信息的范例
Transfer-Encoding: chunked             // 示意发送HTTP包是分段发的
Connection: keep-alive                // 坚持衔接状况
Content-Length: 90                   // 主体内容长度

//空行 用来支解音讯头和主体
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"... //音讯体

FormDate

为序列化表单以及竖立于表单花样雷同的数据供应了方便。

var data = new FormData();
data.append('name','Nicholas');

跨资本共享

CORS(Cross-Origin Resource Sharing, 跨资本共享):定义了在必需接见跨源资本时，阅读器与效劳器怎样沟通。

基本思想:运用自定义的HTTP头部让阅读器与效劳器举行沟通，从而决议请求或响应是应当胜利照样应当失利。

IE对CORS的完成

  • cookie不会随请求发送，也不会随响应返回

  • 只能设置请求头部信息中的Conte-type字段

  • 不能接见响应头部信息

  • 只支撑GET和POST请求

其他阅读器对CORS的完成

  • 不能运用setRequestHeader()设置自定义头部

  • 不能发送和吸收cookie

  • 挪用getAllResponseHeaders()要领总会返回空字符串

Comet

一种效劳器向页面推送数据的手艺。

完成体式格局:

  1. 长轮询

  2. HTTP流

长轮询

起首轮询的意义就是,阅读器定时向效劳器发送请求,看有没有更新的数据。

短轮询(也就是传统轮询)：阅读器定时向效劳器发送请求，与效劳器竖立
长轮询:

HTTP流

在页面的全部周期内，只运用一个HTTP衔接。

具体来说，就是阅读器向效劳器发送一个请求，而效劳器坚持衔接翻开

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