// 第一步创建XMLHttpRequest对象，兼容ie
let xhr = null;
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
  } else {
  // code for IE6, IE5
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

// 第四步监听返回结果
xhr.onreadystatechange = function() { 
  if (xhr.readyState == 4) { 
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { 
      console.log(xhr.responseText); // 作为响应体返回的文本
    } else { 
      console.log("Request was unsuccessful: " + xhr.status); // 请求失败，返回 响应的 HTTP 状态 
    } 
  } 
};
// readyState 属性
// - 0：未初始化（Uninitialized）。尚未调用 open()方法。
// - 1：已打开（Open）。已调用 open()方法，尚未调用 send()方法。
// - 2：已发送（Sent）。已调用 send()方法，尚未收到响应。
// - 3：接收中（Receiving）。已经收到部分响应。
// - 4：完成（Complete）。已经收到所有响应，可以使用了


// 第二步设置地址
xhr.open('请求方式', url, true);  // url为服务器请求地址，true 该参数规定请求是否异步处理。
// get请求一般用于查询，设置参数时拼接走地址后面 example.php?name1=value1&name2=value
// post请求一般用于修改和删除，设置参数走send里面

// 设置请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// - Accept：浏览器可以处理的内容类型。
// - Accept-Charset：浏览器可以显示的字符集。
// - Accept-Encoding：浏览器可以处理的压缩编码类型。
// - Accept-Language：浏览器使用的语言。
// - Connection：浏览器与服务器的连接类型。
// - Cookie：页面中设置的 Cookie。  Host：发送请求的页面所在的域。
// - Referer：发送请求的页面的 URI。注意，这个字段在 HTTP 规范中就拼错了，所以考虑到兼容性也必须将错就错。（正确的拼写应该是 Referrer。）
// - User-Agent：浏览器的用户代理字符串。

xhr.timeout = 1000; // 设置 1 秒超时，超时会取消请求

// 第三步设置请求参数
xhr.send(null);

xhr.abort();

// get请求参数拼接方法
const addURLParam = (url, name, value) => { 
  url += (url.indexOf("?") == -1 ? "?" : "&"); 
  url += encodeURIComponent(name) + "=" + encodeURIComponent(value); 
  return url; 
}
// post表单传参数
let form = document.getElementById("user-info"); 
xhr.send(new FormData(form));



// 创建WebSocket
let socket = new WebSocket("ws://www.example.com/server.php");

// readyState 属性表示当前状态。
// - WebSocket.OPENING（0）：连接正在建立。
// - WebSocket.OPEN（1）：连接已经建立。
// - WebSocket.CLOSING（2）：连接正在关闭。
// - WebSocket.CLOSE（3）：连接已经关闭。

// 发送数据
let stringData = "Hello world!";  // 字符串
let arrayBufferData = Uint8Array.from(['f', 'o', 'o']); // ArrayBuffe
let blobData = new Blob(['f', 'o', 'o']); // Blob
socket.send(stringData); 
socket.send(arrayBufferData.buffer); 
socket.send(blobData);

// 接受数据
socket.onmessage = function(event) { 
  let data = event.data; 
  // 对数据执行某些操作
};

// 在连接成功建立时触发
socket.onopen = function() { 
  alert("Connection established."); 
}; 

// 在发生错误时触发。连接无法存续
socket.onerror = function() { 
  alert("Connection error."); 
}; 

// 在连接关闭时触发
socket.onclose = function() { 
  alert("Connection closed."); 
};