Ajax与WebSocket

ronh
555 阅读4分钟

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

XMLHttpRequest对象是ajax的基础，目前所有浏览器都支持XMLHttpRequest。

XMLHttpRequest 对象

重要方法

open()

xhr.open('get','http://localhost:8080/server?message=hello&data=hhh'，true)
  • open(method, url, async, user, password)重点强调三个参数:
  •   method：发送请求所使用的方法（常用GET、POST）
  •     与POST相比，GET更简单也更快，并且在大部分情况下都能用；然而，在以下情况中，请使用POST请求：
    • 无法使用缓存文件（更新服务器上的文件或数据库）
    • 向服务器发送大量数据（POST 没有数据量限制）
    • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
  •   url：规定服务器端脚本的 URL(该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）)；
  •   async：规定应当对请求进行异步（true）或同步（false）处理；true是在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理；false是等待服务器响应再执行。默认值为true

send()

xhr.send();

该方法可将请求送往服务器。

send(data)，注意data格式；GET发送信息时直接加参数到url上就可以，比如url?a=a1&b=b1

setRequestHeader()

xhr.setRequestHeader('header','value');

POST传数据时，用来添加 HTTP 头（在open之后使用，在send之前使用）

重要事件

onreadystatechange

// 语法为
xhr.onreadystatechange = function(){};
// 或
xhr.addEventListener('readystatechange',function(){});

存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。

var xhr= new XMLHttpRequest(),
    method = "GET",
    url = "https://developer.mozilla.org/";

xhr.open(method, url, true);
// 监听readyState的改变
xhr.onreadystatechange = function () {
    console.log(xhr.readyState);
    
  if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText)
  }
}
xhr.send();

onload

请求完成时触发，使用方法同上

使用addEventListener添加事件时，不用加on，如addEventListener('load')而非onload

重要属性

  1. readyState：存有服务器响应的状态信息。（更加具体的状态码信息可自行百度）

    1. 0: 请求未初始化（代理被创建，但尚未调用 open() 方法）
    2. 1: 服务器连接已建立（open方法已经被调用）
    3. 2: 请求已接收（send方法已经被调用，并且头部和状态已经可获得）
    4. 3: 请求处理中（下载中，responseText 属性已经包含部分数据）
    5. 4: 请求已完成，且响应已就绪（下载操作已完成）

  2. responseText：获得字符串形式的响应数据。

  3. status：响应状态

    1. 1xx：指示信息--表示请求已接收，继续处理
    2. 2xx：成功--表示请求已被成功接收、理解、接受
    3. 3xx：重定向--要完成请求必须进行更进一步的操作
    4. 4xx：客户端错误--请求有语法错误或请求无法实现
    5. 5xx：服务器端错误--服务器未能实现合法的请求
  • 使用方法:
    1. 创建XMLHttpRequest对象
    2. open设置和服务器的交互信息
    3. send设置发送的数据，开始和服务器端交互
    4. onload注册事件，处理响应信息

WebSocket 对象

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket允许服务端主动向客户端推送数据。 在 WebSocket 之前,客户端与服务器之间的交互通常是客户端发起请求,服务器响应请求。

WebSocket 的特点:

  • 建立在 TCP 协议之上,服务器端的实现比较容易。
  • 与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。
  • 数据格式比较轻量,性能开销小,通信高效。
  • 可以发送文本,也可以发送二进制数据。
  • 建立连接后,WebSocket 连接一般长持续连接,较少握手和安全开销。
  • 有效地节约了通信资源和带宽。

简单的用法如下：

var ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = function() {
  ws.send("Hello, World!");
};

ws.onmessage = function(evt) { 
  console.log(evt.data);
};

ws.onclose = function() { 
  console.log("WebSocket closed");
};

当然也可以用addEventListener添加事件，本质上就是使用的发布订阅模式

socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});
  • onopen 回调,WebSocket 连接成功建立时触发
  • onmessage 回调,客户端接收服务端数据时触发
  • onclose 回调,WebSocket 连接关闭时触发

可以使用 ws.send() 向服务器发送数据,在onmessage中通过evt.data 获取接收到的数据

avatar
文章
阅读
粉丝