前后端交互模式

Posted 2020-12-17 langkyesir

一、原生Ajax

1.1ajax概述

Ajax 即“Asynchronous javascript And XML”（异步 JavaScript 和 XML），是一种用于客户端与服务端进行数据交互的一种技术。

Ajax 能够创建交互式、快速动态网页应用，无需重新加载整个网页的情况下，能够更新部分网页。

Ajax 可以使网页实现异步更新,在不重新加载整个网页的情况下，对网页的某部分进行更新。

Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

1.2Ajax使用

传统的前后端异步数据交互，使用原生的JavaScript创建一个XMLHttpRequest实例对象来实现。

new XMLHttpRequest();

1.2.1主要方法

• open(method, url, asycn)

1. method: 请求的类型；GET 或 POST。
2. url: 统一资源定位符（定位文件在服务器上的位置）。
3. `asycn: 是否异步；true 或 false。

• send(String)

• **String**: 发送到服务器的数据（仅用于POST请求)

1.2.2请求方式

• GET

优点：与POST相比，GET轻巧快捷，并且在大部分情况下都能用。

缺点：

无法使用缓存文件（更新服务器上的文件或数据库）；
无法向服务器发送大量数据（POST没有数据量限制）；
发送包含未知字符的用户输入时，参数暴露在地址栏。

• POST

优点：

能够携带的数据大小没有限制；
隐藏请求的参数、数据体，相比GET更加安全，更稳定可靠；
能够发送文件流。

缺点：由于大多数情况下发送的数据量较大，响应时间会比GET稍慢。

1.3实例

创建XMLHttpRequest()实例

let xhr = new XMLHttpRequest();

1.3.1请求

1. GET请求

• 无参请求

xhr.open("GET","index.html",true);
xhr.send();

• 带参请求

xhr.open("GET","user?method=view&id=1",true);
xhr.send();

2. POST请求

• 无参请求

xhr.open("POST","index.html",true);
xhr.send();

• 带参请求

xhr.open("POST","user",true);
xhr.send("method=delete&id=1");

1.3.2响应

响应主体分为xhr.responseText与xhr.responseXML两类。

• 当响应数据为XML时：

let xml_doc = xhr.responseXML;

• 当相应数据为Text时：

let text_doc = xhr.responseText;

1.4XHR属性与XHR方法

XMLHttpRequest简称：XHR。

1.4.1XHR属性

#	属性名	描述
1	readyState	存储函数（或函数名），每当readyState的属性改变时，就会调用该函数。
2	readyState	存有的XMLHttpRequest的状态从0到4发生变化。0：请求未初始化;1：服务器连接已建立;2：请求已接收;3：请求处理中;4：请求已完成，且响应已就绪
3	reponseText	以文本形式返回响应。
4	responseXML	以XML格式返回响应
5	status	将状态返回为数字（例如，“Not Found”为404，“OK”为200）
6	statusText	以字符串形式返回状态（例如，“Not Found”或“OK”）

1.4.2XHR方法

#	属性名	描述
1	abort()	取消当前请求。
2	getAllResponseHeaders()	以字符串形式返回完整的HTTP标头集。
3	getResponseHeader( headerName )	返回指定HTTP标头的值。
4	void open（method，URL）	打开指定获取或交的方法和URL的请求。
5	void open（method，URL，async）	与上面相同，但指定异步或同步。
6	void open（method，URL，async，userName，password）	与上面相同，但指定用户名和密码。
7	void send（content）	发送获取请求。
8	setRequestHeader（ label，value）	将标签/值对添加到要发送的HTTP标头。

---

二、Jquery封装的Ajax API

三、ES6+的Promise

四、Axios插件

五、ES7+新语法async/await