当前位置：首页 > article >正文

【前端】前后端通信

article 2025/8/28 19:32:01

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

0. XMLHttpRequest

客户端的一个API，为浏览器和服务器通信提供了一个便携通道。现代浏览器支持XMLHttpRequest API，如IE 7+、

创建XMLHttpRequest对象：在后台与服务器交换数据，创建XMLHttpRequest对象的方法如下

var xhr = new XMLHttpRequest()

建立连接

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)

发送请求

get请求
1. 简单字符串，不适用大容量或加密数据
post请求：发送任意类型、长度的数据，多用于表单提交，以send()方法传递而不是查询字符串

获取HTML字符串

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

获取和设置头部消息

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)

getResponseHeader()

[{user:"css8", pass}]

Header-name表示头部消息名称
1. value表示消息的具体值
```
let xhr = createXHR()
let url = "server.txt"
```
2. 使用post方法
3. fetch()
4. XMLHttpRequest

串行格式化
1.

1. Ajax

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

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

1.1 原生JS

使用方式

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()

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

实现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>