---

前言

提示：這里可以添加本文要記錄的大概內容：

通過 ajax 進行前后端交互

案例

此項目用到了javaweb知識

首先創建JavaWeb項目編寫代碼：

package ajax;import java.io.IOException;
import java.util.ArrayList;
import java.util.List;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.google.gson.Gson;@WebServlet("/ajax")
public class ajax extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// 將Gson庫放在WEB-INF/lib目錄下// 運行時加載Gson庫try {Class.forName("com.google.gson.Gson");} catch (ClassNotFoundException e) {e.printStackTrace();return;}List<User> list = new ArrayList<User>();list.add(new User(1,"張三","23"));list.add(new User(2,"李四","28"));Gson gson = new Gson();response.setContentType("application/json");response.setCharacterEncoding("utf-8");response.getWriter().print(gson.toJson(list));}class User {private int id;private String name;private String age;public User(int id, String name, String age) {super();this.id = id;this.name = name;this.age = age;}public int getId() {return id;}public void setId(int id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getSex() {return age;}public void setSex(String sex) {this.age = age;}}
}
//最后將Gson庫的jar包重新復制到WEB-INF/lib目錄下，或者在Java Web項目的classpath中添加Gson庫的jar包

運行結果：

接下來創建vue項目

創建完項目進入安裝Axios框架npm i axios

打開根組件刪掉全部代碼重新生成

在template標簽內加上一個按鈕

<!-- 看到按鈕就想到事件 -->
<button @click="send">發送請求</button>

接下來在methods里面配置方法

  methods: {send(){},

用axios框架發送請求，首先需要先在script標簽中導入這個框架

// 第一個axios是自定義名字
import axios from 'axios'

現在回到send方法內部，導入axios調用

  methods: {send(){// get方法代表向后端發送請求   參數是后端項目程序地址// then方法代表處理后端發送回的響應數據axios.get('http://localhost:8888/ajax/ajax').then( (resp)=>{//log測試console.log(resp.data);} )}},

localhost是本地地址，也可以寫自己IP地址
運行代碼后右鍵開發者模式點擊控制臺，然后點擊發送請求按鈕：

跨域訪問

代理服務器的目的：
代理服務器的主要目的是為客戶端提供一種間接訪問網上資源的方式，客戶端向代理服務器發送請求，代理服務器自動轉發，從而代替客戶端完成請求和響應

對于代理服務器的理解可以參考下面這個比喻：假設你需要訪問一個網站，但是由于某些原因無法直接連接該網站，這時候你可以使用一個代理服務器來幫助你連接該網站。代理服務器就像是一個中間人，它接收你的請求，然后將請求轉發給目標網站，接著將目標網站的響應返回給你。
這個過程就好像是一個郵遞員，他接收用戶發出的請求，將請求轉發給目標服務器，在目標服務器響應后將響應返回給用戶。這個過程就好比是一個人需要向另一個人發送信件，但是由于某些原因不能直接發送，所以需要寄給郵遞員，由郵遞員幫忙送到另一個人手里。代理服務器可以提高訪問速度、保護隱私、過濾內容等等。
因此，代理服務器可以在一些特定的情況下幫助你繞過一些限制和策略，從而達到訪問目標網站的目的。

在項目內最下面有個vue.config.js文件，代理服務器加上去（第三行后）

  devServer: {proxy: {'/api':{target: 'http://localhost:8888/ajax/',ws: true,changeOrigin: true,pathRewrite: {'^/api':''}}}}

這時回到根組件，send方法內的axios地址要改成代理服務器地址

      axios.get('/api/ajax')  

重啟項目，刷新頁面，點擊按鈕：

接下來完善項目，因為在實際項目中用戶不會去查看控制臺
應該把數據發回來后渲染到視圖上

在data中做一個配置項，把發回來的響應數據賦值給data中的配置數據，一賦值vue就監聽到了，數據就改變，立刻修改數據同步到視圖上

  data () {return {// 返回到數據是個數組，包含多個數據arr:[]}},

接下來在methods內標簽的send方法中刪掉log輸出，加上

//等于發送回來的相應數據
this.arr = resp.data

完善html代碼，這里加了個表格

<template><div><!-- 看到按鈕就想到事件 --><button @click="send">發送請求</button><table><tr><th>id</th><th>名字</th><th>年齡</th></tr><tr v-for="(item, index) in arr" :key="index"><th>{{ item.id }}</th><th>{{ item.name }}</th><th>{{ item.age}}</th></tr></table></div>
</template>

加上css樣式：

<style scoped>
table {border-collapse: collapse;width: 100%;margin-top: 50px;
}th, td {border: 1px solid black;padding: 8px;text-align: center;
}thead {background-color: #f2f2f2;
}tr:nth-child(even) {background-color: #f2f2f2;
}button {margin-bottom: 20px;padding: 10px 20px;border: none;border-radius: 4px;background-color: #4CAF50;color: white;
}
</style>

運行效果：

總結?

異步請求的同源策略：

瀏覽器發送的請求必須和前端服務器IP地址一樣、端口號一樣

前后端分離項目采用的是Ajax異步請求通信方式：

采用 axios 框架發送異步請求
瀏覽器發送 Ajax 請求時，會有同源策略限制，禁止跨域請求
前端 和 后端項目的協議、IP地址、端口號都相同才認為是同源

跨域請求解決方案：

在前端項目中配置代理服務器(安全性高，常用)
在后端項目中設置響應頭為資源共享狀態（風險高）

怎么異步更新數據：

發送 ajax 異步請求
在回調函數中，將相應數據賦值給對應的數據

ajax如何取消請求？
原生ajax終止請求,調用abort()方法
axios終止請求, 用瀏覽器原生的AbortController來終止請求