Ajax 調用簡介

已發表: 2021-11-01

歡迎來到我們的 Ajax 簡介！ 在本文中，我們將介紹 Ajax 的基礎知識以及如何在實際示例中使用它。 我們還將看一個 Ajax-PHP 調用的示例。 儘管我們已盡最大努力簡化本教程，但 JavaScript、PHP 和 WordPress 的工作知識對於充分理解以下內容非常重要。 考慮到這一點，讓我們開始吧！

什麼是阿賈克斯？

Ajax 代表異步 JavaScript 和 XML。

Ajax 不是一種編程語言，而是一系列結合現有 Web 技術以創建更好的 Web 應用程序的技術。

使用 Ajax 改進網站

Ajax 有很多用途。 其中，最重要的功能之一是 Ajax 調用。 Ajax 調用允許網站在用戶操作時更新其部分內容，而無需重新加載頁面。 因此，與普通的 HTTP 請求相比，我們不必等待服務器響應繼續與網站交互。

傳統上，HTTP 請求是向 Web 服務器發出的，在它們被處理後，服務器會在新的頁面加載中返回更新的輸出。 在 Ajax 請求中，這一系列動作在幕後異步發生，因此用戶不會被打斷。 這提高了交互性和響應能力，並使網站更具活力。

Ajax 如何調用函數？

Ajax 調用始於最終用戶在網站前端執行操作（例如，單擊按鈕）。 執行該操作時，將觸發一個 Javascript 事件，並且其偵聽器調用一個函數。

在函數內部，Ajax 調用被觸發，在 XML 的幫助下，信息被打包，請求被發送到服務器腳本。

注意：如今，幾乎在所有情況下，JSON 都比 XML 更受歡迎，因為它更快、更容易閱讀和編程等等。

在腳本內部，請求是在服務器端腳本語言（如 PHP、Java、Ruby、Python 等）的幫助下處理的。

響應被發送回客戶端，回調函數用接收到的數據更新相應的內容部分。

讓我們在一個例子中看看它是如何工作的

一個簡單的 Ajax 調用示例

讓我們創建一個搜索應用程序，讓您在搜索文章標題列表時實時查看搜索結果。

我們將使用 PHP 作為服務器端腳本語言，並從最終用戶的角度引導您完成這一過程。

第 1 步：HTML 表單

首先，我們需要一個文本框，用戶將在其中填充文本並在某處顯示結果。 因此，讓我們創建一個簡單的 HTML 表單和一個顯示結果的元素。

 <html> <body> <p><b>Search in articles:</b></p> <form> <input type="text" onkeyup="foundArticles(this.value)"> </form> <p>Articles available: <span></span></p> </body> </html>

第 2 步：Javascript 函數

當用戶輸入文本時，我們希望看到實時結果（如果有的話）。 我們將使用 onkeyup Javascript 事件，該事件會在用戶釋放鍵盤上的鍵時觸發一個函數。

該函數必須獲取當前文本作為參數才能繼續該過程。

 <html> <body> <p><b>Search in articles:</b></p> <form> <input type="text" onkeyup="foundArticles(this.value)"> </form> <p>Articles available: <span></span></p> <script type="text/javascript"> function foundArticles(str) { } </script> </body> </html>

讓我們填寫函數。

第 3 步：請求

在函數內部，我們首先必須創建一個XMLHttpRequest對像以便與服務器交互，然後調用另一個函數，該函數將對我們的foundArticles()函數中傳遞的值執行一些操作。

在上述過程中，與服務器的交互是通過使用 Javascript XMLHttpRequest.onready statechange 事件處理程序完成的，該事件處理程序在readyState屬性更改時調用。 讓我們進一步澄清這些步驟：

  • readyState屬性返回客戶端所處的XMLHttpRequest狀態。
  • 每當readyState發生變化時，就會觸發readystatechange事件。
  • onreadystatechange屬性包含觸發readystatechange事件時要調用的事件處理程序。

第 4 步：如何處理請求

現在，我們需要在操作完成後做一些事情，在諮詢了哪些狀態可用後，我們將其設置為狀態 4。

因此，當操作完成後，HTML 元素中 id txtHint的文本應該替換為服務器的響應。 這是我們必須使用responseText屬性的時候，它會在發送請求後返回從服務器接收到的文本。

現在讓我們在foundArticles()函數中添加與我們剛剛描述的內容相對應的代碼。

 function foundArticles(str) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( this.readyState == 4 ) { document.getElementById("txtHint").innerHTML = this.responseText; } } }

注意：我們必須在這裡指出，像這樣渲染 HTML，而不轉義它，在安全方面是不好的做法，我們這樣做只是為了本教程的緣故，以便代碼盡可能簡單。 為了安全起見，請勿將本文中提供的任何代碼用於現實世界！

接下來我們必須將請求發送到服務器並使用返回的數據。

第 5 步：數據

在此示例中，數據將存儲在 PHP 文件中。 我們在同一文件夾下創建一個data.php文件並包含以下代碼：

 <?php // We fill in the posts array with the data to look up to $posts = array( "C Language course", "C++ course", "About Bootstrap", "Learn to write HTML", "All about SS", "CSS3 course", "JAVA course", "JavaScript tutorials", "Learn PHP", "MySQL examples", "Learn Python", "AngularJS", "Photoshop Tutorials", "C#", "ASP.NET", "SAP", "ORACLE", "Wordpress CMS for beginners", "Build your own Android app", "All about SEO", "Illustrator", "Flash", "Action Script" ); // We get the requested value from the URL and store it in a variable $req = $_REQUEST["req"]; $autocomplete = ""; // Iterate $posts if $req is not empty if ($req !== "") { $req = strtolower($req); foreach($posts as $name) { $lowname = strtolower($name); if ( strpos( $lowname , $req ) !== false ) { $autocomplete = $name; } } } // Output echo $autocomplete === "" ? "no suggestion" : $autocomplete;

不要對$req = $_REQUEST["req"];感到困惑。 線。 這就是腳本如何在custom.js文件中檢索查詢的方式，我們稍後會看到。

第 6 步：請求方法

我們將使用XMLHttpRequest對象的 open() 方法來初始化請求，並使用 send() 方法與服務器交換數據。

我們用於 open() 方法的參數是：

  • 方法。 表示 HTTP 請求方法（“GET”、“POST”、“PUT”、“DELETE”等）。
  • 將請求發送到的 URL。
 function foundArticles(str) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( this.readyState == 4 ) { document.getElementById("txtHint").innerHTML = this.responseText; } } xmlhttp.open("GET", "data.php?req=" + str, true); xmlhttp.send(); }

如您所見，open() 方法將 GET 請求初始化為“data.php?req=” + str URL。

然後該 URL 將被 $req = $_REQUEST[“req”]; 使用。 data.php文件中的變量以檢索值。

讓我們看一下示例請求的視覺效果：

此時表單應該可以正常工作。 如果你輸入，讓我們說“課程”這個詞，結果應該是：

“C語言課程”，
“C++課程”，
“CSS3課程”，
“JAVA課程”。

結論

這是一個非常簡單的 Ajax 請求示例，它是構建網站時使用的一種非常流行的技術。 儘管它很簡單，但希望我們能讓您更深入地了解此類請求中的路由，這可能會幫助您開始編寫自己的代碼。 在下一篇文章中，我們將在 WordPress 環境中重溫 Ajax，敬請期待！