Ajax學習筆記demo

And傑然發表於2022-04-29
筆記

AJAX學習

AJAX簡介：

全稱：Asynchronous JavaScript and XML （JavaScript執行非同步網路請求（JS和XML）），通過AJAX可以在瀏覽器向伺服器傳送非同步請求

優勢：無重新整理獲取資料

使命:在asp.net mvc中為了降低Controller與View的耦合性，同時提高伺服器的效能，實現真正的前後端分離，通過Ajax傳送請求，當服務端接受該請求後將處理的資料通過JSON資料格式返回給檢視，最後通過瀏覽器渲染呈現給使用者。

工作原理流程圖：

非同步請求的工作流程

注意：AJAX不是新的程式語言。

XML簡介：

XML 可擴充套件標記語言

XML 被設計用來傳輸和儲存資料

XML 和HTML類似 HTNL裡是預訂標籤 XML裡沒有預訂標籤

比如有一個商品資料

goodsname="麻辣條"；price=5.00；

XML表示：

<goods>

<goodsnaame>麻辣條</goodsname>

<price>5.00</price>

</goods>

JSON表示：

{"goodsname:"麻辣條"，“price”:"5.00"}

AJAX優點：

  1. 可以無需重新整理頁面與伺服器進行通訊

    同步互動：客戶端傳送一個檢視圖片的請求，待服務端響應結束後才能傳送第二個請求（第二個請求：看價格等）。

    非同步互動：客戶端傳送看照片的請求後，不需要等待服務端響應結束就可以傳送二個請求。

  2. 允許你根據使用者事件更新部分頁面的內容（事件：滑鼠事件、鍵盤事件等等）

  3. 可以減少伺服器壓力，也可以節省頻寬，提高響應速度，增強使用者體驗

AJAX缺點：

  1. 沒有瀏覽歷史，不能回退
  2. 存在跨域問題（跨域：資源共享 (CORS)（或通俗地譯為跨域資源共享）是一種基於 HTTP 頭的機制，該機制通過允許伺服器標示除了它自己以外的其它 origin（域，協議和埠），使得瀏覽器允許這些 origin 訪問載入自己的資源）
  3. SEO不友好（SEO:搜尋引擎優化 (SEO) 通常是指對網站的部分內容進行細微的修改）

HTTP協議：

簡介：超文字傳輸協議（HTTP)是一個用於傳輸超媒體文件（例如 HTML）的應用層協議，用於從全球資訊網（WWW:World Wide Web ）伺服器傳輸超文字到本地瀏覽器的傳送協議。

工作原理：HTTP協議工作於客戶端-服務端架構上。瀏覽器作為HTTP客戶端通過URL向HTTP服務端即WEB伺服器傳送所有請求。

Web伺服器有：Apache伺服器，IIS伺服器（Internet Information Services）等。

Web伺服器根據接收到的請求後，向客戶端傳送響應資訊。

HTTP預設埠號為80，但是你也可以改為8080或者其他埠。

客戶端請求訊息：

客戶端傳送一個HTTP請求到伺服器的請求訊息包括：請求行（request line）、請求頭部（header）、空行和請求資料四部分組成

image-20220425213957575

響應報文:HTTP 響應與 HTTP 請求相似 狀態行、響應頭、響應正文

常見的狀態碼：

  • 200 ok 客戶端請求成功
  • 301 Moved Permanently 請求永久重定向
  • 302 Moved Temporarily 請求臨時重定向
  • 304 Not Modified 檔案未修改，可以直接使用快取的檔案
  • 400 Bad Request 由於客戶端請求語法錯誤，不能被伺服器所理解
  • 401 Unauthorized 請求未經授權
  • 403 Forbidden 伺服器收到請求，但是拒絕提供訪問
  • 404 Not Found 請求的資源不存在
  • 500 Internal Server Error 伺服器發生不可預期的錯誤，導致無法完成客戶端的請求
  • 503 Service Unavailable 伺服器當前不能夠處理客戶端的請求，稍後再試

詳細學習地址：

安裝node.js

地址：

介紹：Node.js是一個Javascript執行環境，通俗的說：Node.js就是執行在服務端的JavaScript；比如它能做什麼：命令列工具、單元測試工具、複雜邏輯的網站等等。

最大的特點：採用非同步式I/O與事件驅動

Ajax基本語法：

$.ajax({	
// 傳送地址 
// 1.不寫預設朝當前所在url提交資料 	
// 2.全寫 指名道姓 https://www.baidu.com 	
// 3.只寫字尾/login/	url: '',  	type: 'get/post',  
// 請求方式 預設 get  	data: {'username':'jason', 'password':123} 
// 要傳送的資料	success:function(args){		
// 回撥函式(非同步回撥機制)	}})解析(重要):  
//  1.當你在利用ajax進行前後端互動的時候    
//  2.當後端給你返回結果的時候會自動觸發 args接受後端的返回結果

$.ajax({    

      type: '',       // 請求的方式，例如 GET 或 POST    

      url: '',        // 請求的 URL 地址    

      data: { },      // 這次請求要攜帶的資料    

      success: function(res) { } // 請求成功之後的回撥函式

})

get請求和post請求的差別：

  • GET請求的資料會暴露在位址列中，而POST請求則不會
  • get有資料傳輸長度限制，而post沒有更好地用於提交傳輸大量資料
  • 當輸入傳輸未知字元等，post比get更穩定更可靠，安全性更高（比如提交使用者、密碼等）

Ajax demo練習

<script type="text/javascript">
		$(function(){
		        //請求引數
		        var list = {};
		        //
		        $.ajax({
		            //請求方式
		            type : "POST",
		            //請求的媒體型別
		            contentType: "application/json;charset=UTF-8",
		            //請求地址
		            url : "http://localhost:8080/admin/Index/",
		            //資料，json字串
		            data : JSON.stringify(list),
		            //請求成功
		            success : function(result) {
		                console.log(result);
		            },
		            //請求失敗，包含具體的錯誤資訊
		            error : function(e){
		                console.log(e.status);
		                console.log(e.responseText);
		            }
		        });
		    });
	 </script>

相關文章