Ajax (cover JS高程)

2018-06-03 本文已影响55人 zhaochengqi

story

2005年，Jesse James Garrett 在一篇文章中介绍了一种他称为Ajax（Asynchronous JavaScript + XML）的技术，
实际上Garrett提到的这种技术已经存在很长时间，之前人们通常把这种技术叫做 远程脚本 （remote scripting），而且早在1998年就有人采用不同手段实现了这种C/S的通信。
在更早的时候，JS需要借助 Java applet 或 Flash 等中间层向服务器发送请求。
XHR的出现则是将浏览器原生通信能力提供给开发者，简化了操作

XMLHttpRequests

XMLHttpRequests（XHR）对象是Ajax技术的核心，是由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。

IE7+ 才支持原生XHR，之前的XHR对象是通过MSXML库的ActiveX对象实现的。

使用

////只想支持IE7+
var xhr = new XMLHttpRequest();

//URL相对于执行代码的当前页面
//最后一个参数表示是否异步发送请求
//启动一个请求准备发送
xhr.open('get', 'api/test', false)

//参数为请求要发送的数据
//不发送数据也需要传入null以兼容部分浏览器
xhr.send(null)

//本次请求是同步的，js代码会等到服务器响应之后再继续执行。响应结果会自动填充到XHR对象中
console.log(xhr)

读取结果

//status         响应的HTTP状态 'status:200'
//responseText   作为响应主体被返回的文本
//statusText     HTTP状态说明 'statusText:"OK"'
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
  console.log(xhr.responseText)
}

异步

通过检测 xhr.readyState 判断请求/响应过程的当前活动阶段;

0：未初始化，尚未调用open()方法

1：启动，已调用open()方法，但尚未调用send()方法

2：发送，已调用send()方法，但尚未接收到响应

3：接收，已接收到部分响应数据

4：完成，已接受到全部响应数据，而且已经可以在客户端使用了

只要 readyState 的值变化，都会触发一次 readystatechange 事件

必须在调用open()之前指定readystatechange 处理程序（兼容不同浏览器）

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
  console.log(xhr)
}
xhr.open('get', 'api/test', true)
xhr.send(null)

取消

在接收到响应之前还可以调用abort()方法来取消异步请求

调用后xhr对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性

终止请求之后应该对xhr对象进行解引用操作

HTTP 头部信息

使用 setRequestHeader 方法可以设置自定义的请求头部信息；
必须在调用 open() 方法之后且调用 send() 方法之前调用；
有的浏览器允许重写默认头部信息，有的则不允许这么做。

xhr.setRequestHeader('User-Agent', 'Frank');
//chrome: index.js:11 Refused to set unsafe header "User-Agent"

xhr.setRequestHeader('content-Type', 'application/x-www-form-urlencode')
//success: content-Type:application/x-www-form-urlencode

使用 getResponseHeader 方法可以取得相应的响应头部信息；调用 getAllResponseHeaders 方法可以取得一个包含所有头部信息的长字符串

xhr.onreadystatechange = function(){
  if(xhr.readyState === 4) {
    console.log(xhr.getAllResponseHeaders())
  }
}
/*
  content-security-policy: default-src 'self'
  x-content-type-options: nosniff
  x-powered-by: Express
  vary: Accept-Encoding
  content-type: text/html; charset=utf-8
  date: Fri, 01 Jun 2018 07:43:50 GMT
  connection: keep-alive
  content-length: 147
*/

Get

xhr.open('get', 'api/test', false) 传入open方法的URL末尾的查询字符串必须经过正确的编码才行
。查询字符串中每个参数名和值都必须使用 encodeURIComponent 进行编码，然后才能放到URL的末尾

Post

// 序列化发送表单数据
// 如果不设置content-Type头部信息，在PHP服务器数据就不会出现在 $_POST ,必须借助$HTTP_RAW_POST_DATA
xhr.setRequestHeader('content-Type', 'application/x-www-form-urlencode')
xhr.send(serialize(form))

XMLHttpRequest 2级

FormData

FormData 为序列化表单以及创建与表单格式相同的数据提供了便利，体现在不必明确地在xhr对象上设置请求头部，xhr能够识别传入的数据类型是 FormData 的实例，并配置适当的头部信息。
```
var data = new FormData();
data.append('name', 'frank')
xhr.send(data)

//序列化表单,相对上述serialize方法
xhr.send(new FormData(form))
```
超时

var xhr = new XMLHttpRequest()

xhr.onreadystatechange = function(){
  try {
    //据说请求终止后访问xhr.status属性可能会导致错误。请求终止的时候readyState已经变为4
    console.log(xhr)
  }catch (e) {
    console.log(e)
  }
}

xhr.open('get', 'api/test', true);
//将超时设置为3s
xhr.timeout = 3000;
xhr.ontimeout = function(){
  console.log('timeout: 3000ms')
}
xhr.send(null);

overrideMimeType() 方法

xhr.open('get', 'api/test', true);
//必须在send之前调用
xhr.overrideMimeType('text/xml')
xhr.send(null);

进度事件
- loadstart 接收到响应数据第一个字节时触发
- progress 接收响应期间持续触发
- error 请求发生错误时
- abort 调用abort()终止请求时
- load 接收到完整响应数据时
- loadend 通信完成或error abort load事件后触发
load

最初为了简化交互模型而引入来替代readystatechange事件
```
xhr.onload = function(){
  //只要接收到服务器响应，不管状态如何都会触发
  if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
    console.log(xhr.responseText)
  }
}
```
progress

onprogress 事件处理程序会收到一个event对象，其target属性是XHR对象，但包含三个额外的属性：
- lengthComputable 表示进度信息是否可用
- position 已经接受的字节数 ??chrome中没有，只有loaded
- totalSize 根据Content-Length响应头确定的预期字节数 ??chrome中没有，只有total
```
xhr.onprogress = function(ev){
  console.log(ev)
}
```

CORS

CORS(Cross-Origin Resource Sharing，跨域源资源共享)：使用自定义的HTTP头部让浏览器与服务器进行沟通，访问跨域资源

比如发送一个跨域请求，需要附加一个额外的Origin头部，其中包含请求页面的源信息（协议、域名、端口），以便服务器根据这个头部信息来决定是否给予响应

IE引入 XDR(XDomainRequest)类型实现安全可靠的跨域通信，其他浏览器都通过XHR实现了对 CORS 的原生支持。当尝试打开跨域资源时，无需编写额外代码就可以触发这一行为。open时传入绝对URL即可

Origin: http://www.example.com

如果服务器接受这个请求，就在 Access-Control-Allow-Origin 头部中回发相同的源信息（如果是公共资源，可以回发 “*”）

Access-Control-Allow-Origin: http://www.example.com

如果没有这个头部，或者有这个头部但源信息不匹配，浏览器就会驳回请求

跨域XHR对象有一些安全限制

不能使用setRequestHeader设置自定义头部

不能发送和接受cookie

调用getAllResponseHeaders方法总会返回空字符串

所以最好使用相对URL访问本地资源

Preflighted Requests

Preflighted Requests: 透明服务器验证机制

CORS 使用这种机制支持开发者使用自定义的头部、GET或POST之外的方法，以及不同类型的主体内容。
在使用下列高级选项来发送请求时，就会向服务器发送一个Preflight请求，这种请求使用 OPTIONS 方法，发送下列头部
- Origun
- Access-Control-Request-Method
- Access-Control-Request-Headers
发送这个请求后，服务器可以决定是否允许这种类型的请求。通过在响应中发送如下头部与浏览器沟通
- Access-Control-Allow-Origin
- Access-Control-Allow-Methods
- Access-Control-Allow-Headers
- Access-Control-Max-Age: 将这个Preflight请求缓存多长时间（秒）
带凭据的请求

默认情况下跨域请求不提供凭据（cookie、HTTP认证、客户端SSL证明），通过将 withCredentials 属性设为 true，可以指定某个请求应该发送凭据。
如果服务器接受带凭据的请求，会使用如下HTTP头部来响应

Access-Control-Allow-Credentials: true

如果response中没有这个头部，那么浏览器不会把响应交给JavaScript（于是responseText是空字符串，status值为0，触发onerror），

服务器还可以在 Preflight 响应中发送这个头部，表示允许源发送带凭据的请求。

IE10及更早版本不支持

其他跨域技术

在CROS出现之前，实现跨域ajax需要利用DOM中能够执行跨域请求的功能，在不依赖XHR对象的情况下发送请求。

图形Ping

<img> .一个网页可以从任何网页中加载图像，不需要考虑跨域问题。

图像Ping是与服务器进行简单、单向的跨域通信的一种方式。
请求的数据是通过查询字符串形式发送的，而响应可以是任意内容，但通常是像素图或204响应

浏览器得不到任何具体数据，但是通过监听 load 和 error事件，可以知道响应是什么时候接收到的

JSONP

JSON(JSON with padding)：填充式JSON或参数式JSON。

通过 script 元素，指定src为跨域URL，在请求完成后，响应内容（eg:callback({data:'Hello world'})）会立即执行

<script src='example.net?callback=callback'></script>

<script>callback(data){this.data = data}</script>

JSONP确认请求是否失败并不容易，因为script 元素的 onerror 事件并没有被所有浏览器支持
Comet

Comet是Alex Russell发明的一个词，指一种服务器向页面推送数据的技术。实现Comet有两种方式：
1. 长轮询
  
  页面发起一个到服务器的请求，然后服务器一直保持连接打开，直到有数据可发送。发送完数据后，浏览器关闭连接，随即继续发起一个新的请求，这一过程在页面打开期间一直持续不断。
2. 流
  
  HTTP流不同于轮询，因为它在页面的整个生命周期内只使用一个HTTP连接：浏览器向服务器发送一个请求，而服务器保持连接打开，然后周期性地向浏览器发送数据。（所有服务端语言都支持打印输出到缓存然后刷新-将输入缓存中的内容一次性全部发送到客户端，这是实现HTTP流的关键所在）
  
  页面通过监听 readystatechange 事件以及readyState的值是否为3，就可以利用XHR对象实现HTTP流。
  因为responseText中保存的是所有数据，所以后续接受到的数据需要对比此前收到的数据，决定从什么位置取得新数据。
```
var xhr = new XMLHttpRequest();
var received = 0;
xhr.open('get', url, true);
xhr.onreadystatechange = function(){
  var result;
  if(xhr.readyState == 3){
    result = xhr.responseText.substring(received);
    received += result.length;
    //处理数据
  }else if(xhr.readyState == 4){
    //请求结束
  }
}
```
  Comet连接的管理是很容易出错的，需要时间不短改进才能达到完美。社区认为Comet是未来Web的一个重要组成部分，为了简化这一技术，又为Comet创建了两个新的接口
  
  SSE（服务器发送事件）
  
  SSE(Server-Sent Events)简化了Comet的实现。SSE支持短轮询、长轮询和HTTP流，而且能在断开连接时自动确定何时重新连接。
  
  服务器通过这个连接可以发送任意数量的数据。服务器响应的MIME类型必须是 text/event-stream,而且是JavaScript API能解析的。
  1. SSE API
    
    var source = new EventSource(url); //创建一个新的EventSource对象，URL必须同源
    
    source.readyState // 0:正连接到服务器；1:打开了连接；2:关闭了连接
    
    source.open //在连接时触发
    
    source.message //从服务器接收到新事件时触发，服务器发回的数据保存在event.data中
    
    source.error //无法建立连接时触发
    
    source.close // 强制立即断开并不再重新连接。默认情况下，EventSource对象会保持与服务器的活动连接。如果连接断开，还会重新连接。
  2. 事件流
    
    服务器响应的MIME类型为 text/event-stream 。响应的格式是纯文本
```
data:foo

data:bar

data:foo
data:bar
```
    假设服务器返回上述响应,事件流中的message事件分别为
    1. event.data 为foo (只有包含data:的数据行后面有空行时才会触发message事件)
    2. event.data 为bar
    3. event.data 为foo\nbar (对于多个连续的以data:开头的数据行，将作为多段数据解析，每个值之间以一个换行符分隔)
```
data:foo
id:1
```
    通过id前缀可以给特定事件指定一个关联ID，这个ID行位于data:行前或行后皆可
    
    设置了ID后，EventSource对象会跟踪上一次触发的事件。如果连接断开了，会向服务器发送一个包含名为Last-Event-ID的特殊HTTP头部请求，以便服务器知道下一次该触发哪个事件。
    在多次连接的事件流中，这种机制可以确保浏览器以正确的顺序收到连接的数据段。
  3. Web Sockets
  Web Sockets的目标是在一个单独的持久连接上提供全双工、双向通信。在JavaScript中创建了Web Sockets之后，浏览器会发送一个HTTP请求以发起连接。在取得服务器响应之后，建立的连接的连接会使用HTTP升级，从HTTP协议交换为Web Socket协议。这也意味着使用标准的HTTP服务器无法实现web socket，只有支持这种协议法人专门服务器才能正常工作
  
  Web Sockets 使用了自定义的协议： ws:// wss://
  1. Web Sockets API
    
    创建连接
    
    var socket = new WebSocket('ws://example.com/test') //必须传入绝对URL，不限制同源
    
    实例化WebSocket对象后，浏览器会马上尝试创建连接。
    
    与XHR类似，WebSocket 也有一个表示当前状态的 readyState 属性,其值永远从0开始
    - WebSocket.OPENING(0): 正在建立连接
    - WebSocket.OPEN(1): 已建立连接
    - WebSocket.CLOSING(2): 正在关闭连接
    - WebSocket.CLOSE(3): 已关闭连接
    关闭连接
    
    socket.close();//调用后readyState的值立即变为2，关闭后变为3
    
    传送数据
    
    socket.send('Hello world');//只能发送纯文本数据
    
    socket.onmessage = function(event){this.data = event.data}//返回的同样是字符串
    
    相关事件
    - open: 成功建立连接时触发
    - error: 发生错误时触发
    - close: 连接关闭时触发
    WebSocket 对象不支持DOM2 级事件侦听，因此必须使用DOM 0 级语法分别定义每个事件的处理程序
    在这三个事件中，只有close事件的event对象有额外的信息
```
socket.onclose = function(event){
  console.log(event.wasClean) //连接是否已经明确地关闭了
  console.log(event.code) //服务器返回的数值状态码
  console.log(event.reason) //服务器发回的字符串信息
}
```

Ajax (cover JS高程)

story

XMLHttpRequests

Get

Post

XMLHttpRequest 2级

load

progress

CORS

其他跨域技术

SSE（服务器发送事件）

创建连接

传送数据

相关事件

猜你喜欢

热点阅读