ajax–實現非同步請求，接受響應及執行回調
- 2021 年 5 月 5 日
- 筆記
ajax最大的優點是在不重新載入整個頁面的情況下,可以與伺服器交換數據並更新部分網頁的內容
ajax指是一種創建互動式網頁應用的網頁開發技術，其實就是實現前後端交互。
1）ajax是非同步javascript，非同步的意思即非阻塞，就像執行緒，在程式碼運行到ajax請求時，它會分成兩條線，一條線去運行ajax請求裡面的內容，另一條線去運行主程式（即ajax請求後面的程式碼），當然我們可以因需要非同步設置成同步（即在運行到ajax請求時，將阻塞運行完ajax請求後，再去運行ajax外，後面的程式碼）
2）注意ajax請求是由jquery發起的，因此用於jquery程式碼塊中。
3）執行相應的視圖函數（這裡是在一個py，php等文件創建一個視圖函數，或者class類，給這個視圖函數分級設置一個url地址，ajax請求中的url即填寫完整的url地址），返回json內容。
4）執行相應的回調函數（即返回成功後的執行success裡面的 js，jquery去影響web頁面），通過判斷 json 內容，進行相應的處理。
ajax不需要任何瀏覽器插件
現在我們搭建一個伺服器環境，為什麼要搭建伺服器環境呢？因為ajax請求一般都是需要伺服器調用資料庫。現在這裡有個比較方便的軟體 — wampserver
這個wampsever就是在window下的apache、php和mysql的伺服器軟體
這裡我們需要安裝wampsever 安裝過程的具體步驟自己在百度中找教程（最好不要安裝在C盤，找個記憶體多一點的盤安裝）
在安裝的文件夾中找一個www的文件夾，www文件就是網站內容所在區域 本地IP:127.0.0.1 埠號80 本地域名locolhost
在pycharm中open打開www文件，在此文件中寫html，css，js,php等。
ajax要有後台伺服器，可以用java，python，php搭建一個後台伺服器。
寫前端html文件的時候的用法：$.ajax({ })。$.ajax是所有ajax方法中最底層的方法。所有其他的方法都是基於$.ajax()方法的封裝。
此方法中的參數有:（這裡只寫了一部分）注意都要用引號引住。
| 參數 | 類型 | 說明 |
| url | 為string（因此要用引號引起來） | 發送請求的地址 |
| type | string | 請求的方式：post或get請求。默認為get請求 |
| data | Object或string | 發送伺服器的數據，鍵值對，字元串或對象，這裡post請求有此參數，get請求直接在地址處？後面傳參即可 |
| dataType | string | 後端返回給前端的數據類型，比如html，xml，json。本來是string,在ajax請求時設置dataType為json，將字元串；類型變為json類型 |
| success | function | 請求成功後調用的回調函數，需要操作的東西一般在這裡寫 用法success:function(e 這個字母e可以是其他英文){寫內容} 注意這個（）裡面的e或者說其他東西就是後端HttpResponse或者JsonResponse返回的東西，這裡與dataType有關 |
| error | function | 請求失敗時調用的回調函數 |
| async | Boolean | 是否非同步處理，默認為True,false為同步處理 |
post請求中參數data的兩種寫法：
1）「後端要接收的參數名=」+前端某個input的 val（）或value值+「&後端要接收的參數名=」+前端的input中的值 例>>>
2）字典傳參 {「後端要接收的參數名」：前端某個input的 val（）或value值 ，”後端要接收的參數名”：前端的input中的值 } 例>>>
get請求中前端向後端傳參的方法：
在post請求進行前後端數據的交換，python後端 request.POST.get(「前端給後端要接收的參數在data時起名，如上 un 和 pa 」) 接收前端的數據，當然這是對POST請求時的接收方式，get請求時，則將POST改為GET即可。
這裡就是後端接收上圖前端數據的方法 
下圖是實現前後端交互時前端需要的操作，這裡還設置了同步
另外我們可以直接 0$.get() 或 $.post()
先說$.get()請求 （參數之間用逗號隔開）
第一個參數：請求的介面，即要訪問的地址
第二個參數：請求介面時攜帶的參數 可以是字典的形式傳參 
或者這樣傳參：
第三個參數：介面請求成功後的回調參數，即原本$.ajax()中的success後面的function（）
第四個參數：介面返回的數據類型，即設置後端返回給前端返回的數據類型，本來不管後端返回是HttpResponse或者JsonResponse，沒有前端這個參數都會顯示後端返回的是字元串類型，有了這個參數，就可以使字元串變成該有的形式，比如這裡寫「json」，後端傳的數據就變成了 json 類型
$.post()的相關用法：(跟$.get()的用法類似)
第一個參數：請求的介面，即要訪問的地址
第二個參數：請求介面時攜帶的參數 可以是字典的形式傳參
第三個參數：介面請求成功後的回調參數，即原本$.ajax()中的success後面的function（）
現在我們先講一下用php做一個後台伺服器（這裡為什麼先講一下用php做後台伺服器呢？因為用python做後台伺服器需要的東西有點多，暫且先拿php用一下）
寫php文件：在www中新創建一個file文檔>>>此文檔以 <?php 開頭 ，以 ？> 結尾。第一個注意點運行此文件時要開啟wampsever軟體
php有一個名句–遍地是黃金。 變數都是由$為開頭的。
第一步:在php文件中獲取前端傳遞過來的數據。這裡注意在php文件中的變數名由$開頭的變數名，前端是post請求則在獲取的時候$_POST獲取，前端是get請求則用$_GET獲取（方法例下–$name=$_POST[‘在前端傳遞來的數據’]）
第二步：在資料庫中查詢（這裡先不寫）
第三步：根據資料庫查詢的結果不同，返回給前端不同的數據。
第四個參數：介面返回的數據類型。
還有一個知識點：你發現在jquery中收集表單中的數據時，需要對每個標籤$() ，這裡有個快速收集表單提交的數據的方法
serializeArray()可以很方便的收集表單裡面的數據 例如 這裡表單有id屬性可以$(‘input’），也可以$(“#register”).serializeArray()收集表單數據
收集的數據為 [{},{},…] （列表嵌套字典的形式）類型
還有一個ajax中涉及到的知識點：跨域
什麼是跨域呢？比如說自己懶得弄介面了，去網上找個現成的，（比如要在前端弄個天氣預報板塊，自己不寫後端，直接用網上免費的一些網站）。
例如 >>> 在wampserver中瀏覽器輸入 127.0.0.1:80 和 輸入localhost:80 都能打開wampserver的www文件(wampserver的首頁),127.0.0.1是它的ip地址 ，localhost是它的域名。但在瀏覽器下訪問的是127.0.0.1，而ajax請求的是localhost時，會報錯。
這時我們只需在後端寫下下面兩個程式碼即可實現跨域：
