【前端】前后端通信

前端开发主要完成的两件事：
1）界面搭建
2）数据交互
本知识页参考：
https://juejin.cn/post/6925296067378429960

0. XMLHttpRequest

1. 客户端的一个API，为浏览器和服务器通信提供了一个便携通道。现代浏览器支持XMLHttpRequest API，如IE 7+、
   1. 创建XMLHttpRequest对象：在后台与服务器交换数据，创建XMLHttpRequest对象的方法如下

   var xhr = new XMLHttpRequest()
   

   2. 建立连接

   function createXHR() {var XHR = [function() { return new XMLHttpRequest() },function() { return new ActiveXObject ("Msxml2.XMLHTTP") },function() {return new ActiveXObject ("Msxml3.XMLHTTP")},function () { return new ActiveXObject ("Microsoft.XMLHTTP") }]var xhr = null// 尝试调用函数for (var i = 0; i <XHR.length; i++) {try {xhr = XHR[i]()} catch (e) {continue}break}return xhr
   }
   // 建立连接
   xhr.open(method, url, async, username, password)
   // 其中xhr是XMLHttp
   xhr.send(body) // 
   // 异步通信
   let xhr = createXHR()
   xhr.open("GET", "server.txt", "false")
   xhr.send(null)
   console.log(xhr.responseText) 
   

   3. 发送请求
      1. get请求
         1. 简单字符串，不适用大容量或加密数据

      2. post请求：发送任意类型、长度的数据，多用于表单提交，以send()方法传递而不是查询字符串
      3. 获取HTML字符串

       <table border="1" width="100%"><tr><td>RegExp.exec()</td>通用的匹配模式</tr><tr><td>RegExp.exec()</td></tr></table>
      

      4. 获取和设置头部消息

      var xhr = createXHR()
      var url = "server.txt"
      xhr.open()
      xhr.onreadystatechange = function() {if(xhr.readyState==4&&xhr.status==200) {console.log(xhr.getAllResponseHeaders())}
      }
      xhr.send(null)
      

      5. getResponseHeader()

      [{user:"css8", pass}]
      

      6. Header-name表示头部消息名称
         1. value表示消息的具体值

            let xhr = createXHR()
            let url = "server.txt"
            

         2. 使用post方法

         3. fetch()
         4. XMLHttpRequest
   4. 串行格式化
      1.

1. Ajax

使用AJAX(Asynchronous Javascript And XML)，使用XMLHttpRequest 技术构建更复杂，动态的网页的编程实践。
XHR由微软引入，首次在请求时，用于与服务器交互。

1. 特点：
   1. XHR：在不刷新页面的情况下，请求URL获取服务器数据，
2. 除JS外，jQuery、Axios、vue-resource 都可以实现 Ajax 编程
3. 共性

1.1 原生JS

1. 使用方式

var url = 'https://api.github.com/users/chriscoyier/repos'
var xhr = new XMLHttpRequest()
xhr.open('GET', url, false)
xhr.onreadystatechange = function() {if(xhr.readyState === 4) {if(xhr.status === 200 || xhr.status === 304) {console.log('response:', xhr.response)}}
}
xhr.send()

1. JS封装

var Ajax = {get: function(url, callback) {var xhr = new XMLHttpRequest()xhr.open('GET', url, false)xhr.onreadystatechange = function() {if(xhr.readyState === 4) {if(xhr.status === 200 || xhr.status === 304) {console.log(xhr.response)callback(xhr.response)}}}xhr.send()},post: function(url, data, callback) {var xhr = new XMLHttpRequest()xhr.open('POST', url, false)xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status === 200 || xhr.status === 304) {console.log(xhr.response)callback(xhr.response)}}}xhr.send(data)}
}

1.2 JQuery

1. 实现Ajax的方法

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>$(function(){const list = {}const url = ''$.ajax({type: "POST",contentType: "application/json;charset=UTF-8",url: url,data: JSON.stringify(list),success: res => console.log('res', res),error: err => console.log('err', err)})})
</script>

1. vue-resource

1.3 Axios

1. axios基本特性
   1.
2. 基本用法
3. 常用API
4. axios参数传递
5. axios响应结果
6. axios全局配置
7. axios拦截器

1.4 Promise

1. 使用ES6的Promise完成GET
2. 1
3. 1

2. Fetch

3.

4. 写的好累啊！

5. 实时通信的实现

本部分知识点参考：https://blog.csdn.net/dyk11111/article/details/134007708

5.1 WebSocket

5.2 轮询（poll）

5.3 长轮询