前后端交互模式

一、原生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();
  1. 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

jQuery 提供多个与 AJAX 有关的方法。它将原生的Ajax进行了封装，提高了它的易用性。

ajax() 方法通过 HTTP 请求加载远程数据。

2.1Ajax()方法

jQuery.ajax(url,[settings])

该方法能够向服务器发送任意请求方式，配置一系列参数（如请求头、响应头、请求类型，响应类型、请求数据类型、相应数据类型...)

$.ajax({
  url:"register",
  type:"post",
  dataType:"json",
  data:{username:"langkye",password:"admin",gender:"male"},
  success:function(response){
    // 请求成功处理的逻辑；response服务器响应的数据
  },
  error:function(response){
    // 请求失败处理的逻辑；response错误信息
  }
});

2.2get()方法

jQuery.get(url, [data], [callback], [type])

url,[data],[callback],[type] | String,Map,Function,String

  • url:待载入页面的URL地址
  • data:待发送 Key/value 参数。
  • callback:载入成功时回调函数。
  • type:返回内容格式，xml, html, script, json, text, _default。
$.get("index", 
  { name: "Python", number: 54 },
  function(response){
     // TODO
  }
);

2.3post()方法

jQuery.post(url, [data], [callback], [type])

url,[data],[callback],[type] | String,Map,Function,String

  • url:发送请求地址。
  • data:待发送 Key/value 参数。
  • callback:发送成功时回调函数。
  • type:返回内容格式，xml, html, script, json, text, _default。
$.post("user/view", 
  { "func": "getAllUsers" },
  function(data){
    // TODO
  }, 
  "json"
);

2.4load()方法

load(url, [data], [callback])
载入远程 HTML 文件代码并插入至 DOM 中。

  • url,[data,[callback]] | String,Map/String,Callback
  • url:待装入 HTML 网页网址。
  • data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。
  • callback:载入成功时回调函数。
$("#feeds").load("feeds.php", {limit: 25}, function(){
   // TODO
 });

2.5serializeArray()方法

序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。
'''注意'''，此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。
返回的JSON对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对——name参数和value参数（如果value不为空的话）

let fields = $("select, :radio").serializeArray(); // 获取select选框、单选框键和值并序列化为数组对象
jQuery.each( fields, function(index, field){
  // TODO 
  // index:索引
  // field:每一项键值对
});

2.6其他方法

  • ajaxComplete(callback)

AJAX 请求完成时执行函数。Ajax 事件。

$("#msg").ajaxComplete(function(event,request, settings){
   // TODO 请求完成处理的逻辑
 });
  • ajaxError(callback)

AJAX 请求发生错误时执行函数。Ajax 事件。

$("#msg").ajaxError(function(event,request, settings){
  // TODO 请求失败处理的逻辑
});
  • ajaxSend(callback)

AJAX 请求发送前执行函数。Ajax 事件。

$("#msg").ajaxSend(function(evt, request, settings){
  // TODO 请求开始前处理的逻辑
 });
  • ajaxStop(callback)

AJAX 请求结束时执行函数。Ajax 事件。

$("#loading").ajaxStop(function(){
  // TODO
 });
  • ajaxSuccess(callback)

AJAX 请求成功时执行函数。Ajax 事件。

$("#msg").ajaxSuccess(function(evt, request, settings){
  // TODO
 });
  • jQuery.ajaxSetup([options])

设置Ajax全局配置

eq: 设置 AJAX 请求默认地址为 "locaolhost:80/"，禁止触发全局 AJAX 事件，用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。

$.ajaxSetup({
  url: "locaolhost:80/",
  global: false,
  type: "POST"
});
// 发送请求
$.ajax({ data: reqData });

更多细节请看 官方文档


三、Promise

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理且更强大。它最早由社区提出并实现，ES6将其写进了语言标准，统一了用法，并原生提供了Promise对象。

Promise 能够将异步操作和结果进行分离，通过Pormise的API能够拿到异步操作的处理的结果，解决了”回调地狱“的问题。

  • 基本语法
let promise = new Promise(function(resolve, reject){
    // resolve, reject 分别对应成功和失败的回调函数
    let isSuccess = true;
    if (isSuccess /* 异步操作成功 */) {
        resolve(value);
    } else {
        reject(error);
    }
});
  • then && catch
promise.then((response)=>{
  // 处理Promise()返回的数据，和相应的逻辑
}).catch(error =>{
    // 失败的逻辑
});

promise.then().then()...

更多细节参考 官方文档


四、Fetch

更多细节参考 MDN官方文档


五、Axios插件

Axios下载/ 0.19.2版本

或直接引入cdn :

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>

4.1常用API

  • get()  : 查询

  • post()  ：添加

  • put()   ：修改

  • delete()：删除

4.2基本语法

  • GET

以?拼接参数

axios.get("index?id=3")
  .then((result)=>{ 
    // TODO
  }
);

以路径作为参数

axios.get("index/3")
  .then((result)=>{ 
    // TODO
  }
);

通过对象传递参数

axios.get("index",
  {id:3},
).then((result)=>{
    // TODO
  }
);
  • POST
axios.post("index.html",
  {uername:"langkye",
    password:"admin"
  })
  .then((result)=>{
    // TODO
  }
);
  • DELETE

该方法和 GET 类似

  • PUT

该方法和 POST 类似

4.3axios参数传递

  • 通过URLSearchParams传递参数(application/x-www-form-urlencoded)
const params = new URLSearchParams();
params.append('key1','value1');
params.append('key2','value2');
// ...
axios.post(url,params).then((response)=>{/* TODO */ });

4.4axios响应结果

4.4.1重要属性

  • data：实际响应数据

  • headers：响应头信息

  • status：响应状态码

  • statusText：响应状态信息

4.5axios全局配置

axios.defaults.timeout = 300;  // 响应超时时间
axios.defaults.baseURL = "http://localhost:80/";  // 默认地址
axios.defaults.headers['token'] = '...';  // 设置响应头token和值
axios.defaults.headers['auth'] = '...';  // 设置响应头自定义参数类型和值
// ...

更多细节请参考 官方文档


六、async/await

ES7 所引入的语法，用于处理修饰异步操作

  • async

异步，修饰函数，表明所修饰的函数为一个异步函数，即修饰处理Promise()请求的函数，必定返回Promise对象。
该关键字作用在异步方法的声明前

  • await

等待,await命令后面是一个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值。另一种情况是，await命令后面是一个thenable对象（即定义then方法的对象），那么await会将其等同于 Promise 对象。
该关键字作用与异步任务前

so anyway ...

asycn function foo(){
    const result = await axios.get("index");
    if (result == null) {
        throw "get filed";  // => resolve
    }
    else{
        return result;    // reject
    }
}
foo.then((reslut)=>{
  // TODO
}).catch((error)=>{
   // TODO
});

官网文档 asycn function() | await

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/langkyeSir/p/13293024.html