記錄AJAX充電點點滴滴

来源:https://www.cnblogs.com/Army-Knife/archive/2019/12/13/12035884.html
-Advertisement-
Play Games

首先要明白什麼是 AJAX ？ AJAX = 非同步 JavaScript 和 XML。 AJAX 是一種用於創建快速動態網頁的技術。 通過在後臺與伺服器進行少量數據交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。 傳統的網頁（不使用 AJAX ...


首先要明白什麼是 AJAX ？

AJAX = 非同步 JavaScript 和 XML。

AJAX 是一種用於創建快速動態網頁的技術。

通過在後臺與伺服器進行少量數據交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。

有很多使用 AJAX 的應用程式案例：新浪微博、Google 地圖、開心網等等。

1、AJAX - 創建 XMLHttpRequest 對象

XMLHttpRequest 對象

 所有現代瀏覽器都支持 XMLHttpRequest 對象 （IE5 和IE6 使用AcActiveXObject）。

XMLHttpRequest 用於在後臺與伺服器交換數據。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象。

創建 XMLHttpRequest 對象的語法：

variable = new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：

variable=new ActiveXObject( "Microsoft.XMLHTTP" );

為了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支持 XMLHttpRequest 對象。如果支持，則創建 XMLHttpRequest 對象。如果不支持，則創建 ActiveXObject ：

1.1  XHR創建對象：

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

1.2、AJAX - 向伺服器發送請求

XMLHttpRequest 對象用於和伺服器交換數據。

向伺服器發送請求

 

如需將請求發送到伺服器，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法：

xmlhttp.open("GET","test1.txt",true);  //規定請求的類型、URL 以及是否非同步處理請求。
xmlhttp.send();  //將請求發送到伺服器。
方法描述
open(method,url,async)

規定請求的類型、URL 以及是否非同步處理請求。

  • method：請求的類型；GET 或 POST
  • url：文件在伺服器上的位置
  • async：true（非同步）或 false（同步）
send(string)

將請求發送到伺服器。

  • string：僅用於 POST 請求

 

GET 還是 POST？

與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。

然而，在以下情況中，請使用 POST 請求：

  • 無法使用緩存文件（更新伺服器上的文件或資料庫）
  • 向伺服器發送大量數據（POST 沒有數據量限制）
  • 發送包含未知字元的用戶輸入時，POST 比 GET 更穩定也更可靠

GET 請求

一個簡單的 GET 請求：

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

在上面的例子中，您可能得到的是緩存的結果。

------解決方案--------------------

ajax請求 如果兩次請求地址一樣 伺服器只會處理第一次請求
第二次請求返回內容和第一次一樣  
加 Math.random() 使每次請求地址不相同 伺服器每次都去做不同的響應 
------解決方案--------------------
Math.random()是調用javascript語法中的數學函數，能夠產生隨機數。
在Ajax請求中作為URL參數傳遞，能夠有效的避免“ajax緩存”
在IE 6系列的瀏覽器中，預設提交給一個地址例如：aa.aspx ,將自動緩存，第二次再請求aa.aspx時候，就不會再重覆請求了。當然，也可以使用new date () 時間戳的形式作為參數傳遞。

為了避免這種情況，請向 URL 添加一個唯一的 ID：

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();

如果您希望通過 GET 方法發送信息，請向 URL 添加信息：

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

 

POST 請求

一個簡單 POST 請求：

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

如果需要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。然後在 send() 方法中規定您希望發送的數據：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");  //向請求中添加 TTTP 頭;
xmlhttp.send("fname=Bill&lname=Gates");
方法描述
setRequestHeader(header,value)

向請求添加 HTTP 頭。

  • header: 規定頭的名稱
  • value: 規定頭的值

 

url - 伺服器上的文件

open() 方法的 url 參數是伺服器上文件的地址：

xmlhttp.open("GET","ajax_test.asp",true);

該文件可以是任何類型的文件，比如 .txt 和 .xml，或者伺服器腳本文件，比如 .asp 和 .php （在傳迴響應之前，能夠在伺服器上執行任務）。

 

非同步 - True 或 False？

AJAX 指的是非同步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

XMLHttpRequest 對象如果要用於 AJAX 的話，其 open() 方法的 async 參數必須設置為 true：

xmlhttp.open("GET","ajax_test.asp",true);

對於 web 開發人員來說，發送非同步請求是一個巨大的進步。很多在伺服器執行的任務都相當費時。AJAX 出現之前，這可能會引起應用程式掛起或停止。

通過 AJAX，JavaScript 無需等待伺服器的響應，而是：

  • 在等待伺服器響應時執行其他腳本
  • 當響應就緒後對響應進行處理

Async = true

當使用 async=true 時，請規定在響應處於 onreadystatechange 事件中的就緒狀態時執行的函數：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)   // 請求完成併成功返回
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

 

Async = false

如需使用 async=false，請將 open() 方法中的第三個參數改為 false：

xmlhttp.open("GET","test1.txt",false);

我們不推薦使用 async=false，但是對於一些小型的請求，也是可以的。

請記住，JavaScript 會等到伺服器響應就緒才繼續執行。如果伺服器繁忙或緩慢，應用程式會掛起或停止。

註釋：當您使用 async=false 時，請不要編寫 onreadystatechange 函數 - 把代碼放到 send() 語句後面即可：

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

 

1.3 AJAX - 伺服器響應

如需獲得來自伺服器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

屬性描述
responseText 獲得字元串形式的響應數據。
responseXML 獲得 XML 形式的響應數據。

responseText 屬性

如果來自伺服器的響應並非 XML，請使用 responseText 屬性。

responseText 屬性返回字元串形式的響應，因此您可以這樣使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

例：

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
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");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/test1.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">通過 AJAX 改變內容</button>

</body>
</html>

responseXML 屬性

如果來自伺服器的響應是 XML，而且需要作為 XML 對象進行解析，請使用 responseXML 屬性：

請求 books.xml 文件，並解析響應：

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  }
document.getElementById("myDiv").innerHTML=txt;

例：

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
var txt,x,i;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    xmlDoc=xmlhttp.responseXML;
    txt="";
    x=xmlDoc.getElementsByTagName("title");
    for (i=0;i<x.length;i++)
      {
      txt=txt + x[i].childNodes[0].nodeValue + "<br />";
      }
    document.getElementById("myDiv").innerHTML=txt;
    }
  }
xmlhttp.open("GET","/example/xmle/books.xml",true);
xmlhttp.send();
}
</script>
</head>

<body>

<h2>My Book Collection:</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">獲得我的圖書收藏列表</button>
 
</body>
</html>

 

1.4  AJAX - onreadystatechange 事件

當請求被髮送到伺服器時，我們需要執行一些基於響應的任務。

每當 readyState 改變時，就會觸發 onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態信息。

下麵是 XMLHttpRequest 對象的三個重要的屬性：

屬性描述
onreadystatechange 存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
readyState

存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。

  • 0: 請求未初始化
  • 1: 伺服器連接已建立
  • 2: 請求已接收
  • 3: 請求處理中
  • 4: 請求已完成，且響應已就緒
status

200: "OK"

404: 未找到頁面

 

在 onreadystatechange 事件中，我們規定當伺服器響應已做好被處理的準備時所執行的任務。

當 readyState 等於 4 且狀態為 200 時，表示響應已就緒：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

例：

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
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");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/test1.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">通過 AJAX 改變內容</button>

</body>
</html>

註釋：onreadystatechange 事件被觸發 5 次（0 - 4），對應著 readyState 的每個變化。

使用 Callback 函數

callback 函數是一種以參數形式傳遞給另一個函數的函數。

如果您的網站上存在多個 AJAX 任務，那麼您應該為創建 XMLHttpRequest 對象編寫一個標準的函數，併為每個 AJAX 任務調用該函數。

該函數調用應該包含 URL 以及發生 onreadystatechange 事件時執行的任務（每次調用可能不盡相同）：

function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}

例：

<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("/ajax/test1.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">通過 AJAX 改變內容</button>

</body>
</html>

 

// code for IE7+, Firefox, Chrome, Opera, Safari

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • kafka2.3.1+zookeeper3.5.6+kafka-manager2.0.0.2集群部署（centos7.7）
    kafka2.3.1+zookeeper3.5.6+kafka-manager2.0.0.2集群部署（centos7.7） ...
  • 1.Android-入門之系統架構介紹
    1.Android 系統架構 android分為四個層，從高層到低層分別是應用程式層、應用程式框架層、系統運行庫層和linux核心層,如下圖所示: 2.application應用程式層 該層提供一些核心應用程式包，例如電子郵件、簡訊、日曆、地圖、瀏覽器和聯繫人管理等。同時，開發者可以利用Java語言 ...
  • android studio學習----目錄結構
    項目結構：一個視窗只有一個項目，項目 叫 Project 代表一個workspace 一個項目的結構跟eclipse區別還是蠻大的： 首先看APP結構：app放的其實就是 java文件和資源文件 切換 目錄結構 比如切換到project界面 1、Studio中有Project和Module的概念，前 ...
  • 安卓逆向基礎(001)-APK安裝流程
    1.在/data/app下以報名為文件夾名新建文件夾 APK包存放在這裡 以及lib文件 存放so 2./data/dalvik cache 存放dex dex是dalvik虛擬機可執行文件 3./data/data/ 存放應用數據 剛開始沒什麼數據 打開apk後資源釋放 數據變多 4./data/ ...
  • jTopo HTML5 Canvas 畫圖組件
    jTopo是什麼? jTopo（Javascript Topology library)是一款完全基於HTML5 Canvas的關係、拓撲圖形化界面開發工具包。 jTopo關註於數據的圖形展示，它是面向開發人員的，需要進行二次開發。 使用jTopo很簡單，可以快速創建一些關係圖、拓撲等相關圖形化的展 ...
  • 使用dva改造React舊項目的數據流方案
    前言 最近在給自己的腳手架項目轉到TypeScript時，遇到了一些麻煩。 項目之前採用的是react + react redux + redux thunk + redux actions +redux promise的體系。 當項目轉TypeScript時,react和react redux這種 ...
  • JS Math對象、日期對象、函數、定時器
    Math對象 開平方：sqrt 絕對值：abs π：PI x的y次方：pow 四捨五入取整：round 向下取整：floor 向上取整：ceil 最大值：max 最小值： min 隨機數：random 日期對象 獲取當前時間：Date() 獲取年：getFullYear 獲取月：getMonth 獲 ...
  • ES6轉ES5
    本人近期接到一個天大的“好消息”：zxbc項目某些客戶為保險業等種種原因要支持IE…… 2013年，ES6草案凍結，2015年6月，ES6正式通過，成為國際標準。都9102啦，Chrome還好啦，升級到最新版本，大部分ES6還是ok的，但是萬惡之源IE呢？作為一個前端開發者，相容萬惡的IE，頓時，胸 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類