Ajax 知識入門從這裡開始【簡約版，後期重新歸納整理】

  • 2019 年 10 月 10 日
  • 筆記

基本概念

Ajax(Asynchronous JavaScript and XML) 非同步的 JavaScript 和 XML

什麼是非同步呢？

非同步和同步往往是同時被提到的兩個概念，這兩者都是基於客戶端和伺服器端相互通訊的基礎上

  • 同步：客戶端必須的等待伺服器端給予的響應，在此期間不能進行其他操作
  • 非同步：與同步不同，客戶端不需要等待伺服器響應，在此期間可以進行任何操作

簡單概述流程：

同步：發送請求 → 等待伺服器處理 → 返回

非同步：事件觸發 → 伺服器處理 （不等待）→ 處理結束

好處

Ajax 就是一種可以在無需重新載入整個網頁的情況下 就可以實現與客戶端與伺服器的非同步通訊

往簡單了說就是：不用刷新整個網頁，就能修改網頁局部內容

在之前的開發中，如果每一次局部的小修改都進行頁面刷新，這顯然對性能會有所降低，而且用戶正在執行的操作也會中斷

基本流程

上面圖片中基本上所有內容我們都是有一定認識的，只有 XMLHttpRequest 我們似乎是第一次見，那麼這又是什麼呢？

XMLHttpRequest 是Ajax的核心，是一個非常重要的對象，我們下面的程式中會反覆的用到

XMLHttpRequest 基本原理

Ajax中最大的特點 就是請求會被非同步對象XMLHttpRequest進行封裝，然後再發送到伺服器，接著伺服器以流的形式將數據返回給瀏覽器

也正是因為伺服器返回的數據是通過流的形式發送的，XMLHttpRequest對象會不停的監聽伺服器，且得到伺服器數據，所以瀏覽器不需要刷新就可以獲取伺服器端的數據

基本實現

JS實現方式（了解即可）

1、創建核心對象

var xmlhttp;  if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari      xmlhttp=new XMLHttpRequest();  }  else {// code for IE6, IE5      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }

2、建立連接

xmlhttp.open("GET","ajaxServlet?username=tom",true);
  • 參數1：請求方式（Get、Post）
  • get：請求參數在URL後拼，send方法為空
  • post：請求參數在send方法中寫
  • 參數2：URL
  • 參數3：true-非同步，false-同步 3、發送請求
xmlhttp.send();

4、獲取並處理伺服器的響應結果

//方式：xmlhttp.responseText  //時間：響應成功後  //onreadystatechange 對象就緒狀態改變    xmlhttp.onreadystatechange=function() {  //判斷readyState就緒狀態是否為4，判斷status響應狀態碼是否為200  if (xmlhttp.readyState==4 && xmlhttp.status==200) {      //獲取伺服器的響應結果      var responseText = xmlhttp.responseText;      alert(responseText);      }  }

jQuery實現方式

$.ajax({      url:"ajaxServlet1111" ,      type:"POST" ,      data:{"username":"admin","age":20},      success:function (data) {          alert(data);      },      error:function () {          alert("出錯啦...")      },        dataType:"text"  });
  • url：請求路徑
  • type：請求方式
  • date：請求參數，上例中等價於，data: "username=admin&age=20"
  • success：響應成功後的回調函數
  • error：果請求響應出現錯誤，會執行的回調函數
  • dateType：設置接受到的響應數據的格式

發送get請求——$.get()

語法：$.get(url, [data], [callback], [type])

  • url：請求路徑
  • data：請求參數
  • callback：回調函數
  • type：響應結果的類型

發送post請求——$.post()

語法：$.post(url, [data], [callback], [type])

  • url：請求路徑
  • data：請求參數
  • callback：回調函數
  • type：響應結果的類型

結尾：

如果文章中有什麼不足，或者錯誤的地方，歡迎大家留言分享想法，感謝朋友們的支援！

郵箱：[email protected]

如果能幫到你的話，那就來關注我吧！

如果您更喜歡微信文章的閱讀方式，可以關注我的公眾號

如果您更加喜歡PC端的閱讀方式，可以訪問我的個人部落格

域名：www.ideal-20.cn

在這裡的我們素不相識，卻都在為了自己的夢而努力 ❤ 一個堅持推送原創Java技術的公眾號：理想二旬不止

Tags:

VirMach 便宜 VPS