Ajax我選擇這樣入門

来源:http://www.cnblogs.com/hyea/archive/2016/05/28/5538063.html
-Advertisement-
Play Games

什麼是AJAX？ AJAX的意思就是非同步的JavaScript和XML。簡而言之，它是使用XMLHttpRequest對象與伺服器端通信的腳本語言。它可以發送及接收各種格式的信息，包括JSON、XML、HTML和文本文件。AJAX最為吸引人的就是它的“非同步”特性，這意味著AJAX可以無需刷新頁面而與 ...


什麼是AJAX？

AJAX的意思就是非同步的JavaScript和XML。簡而言之，它是使用XMLHttpRequest對象與伺服器端通信的腳本語言。它可以發送及接收各種格式的信息，包括JSON、XML、HTML和文本文件。AJAX最為吸引人的就是它的“非同步”特性，這意味著AJAX可以無需刷新頁面而與伺服器端進行通信。允許你根據用戶事件來更新部分頁面內容。

可以考慮的兩個特性：

  • 向伺服器端發送請求，而不用重新載入頁面。
  • 從伺服器端接收數據並處理。

第一步：如何發送一個HTTP請求

需要通過XMLHttpRequest實現使用JavaScript向伺服器端發送一個HTTP請求。而Internet Explorer（IE）中引入一個名為XMLHTTP的ActiveX對象實現與XMLHttpRequest相同的功能，Mozilla、Safari和其他瀏覽器則使用XMLHttpRequest。

如果要相容各個瀏覽器的話，可以這樣來做：

1
2
3
4
5
6
 
var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

註意：出於演示目的，上面創建XMLHTTP實例是簡化了的代碼。關於更加真實的例子，請參閱本文的第三步。

接下來，當接收到伺服器端響應時，需要告訴HTTP請求對象使用JavaScript函數來處理響應。將XMLHttpRequest對象的onreadystatechange屬性設置為該函數的名稱，當請求的狀態變化時，該函數會被調用。

1
 
httpRequest.onreadystatechange = nameOfTheFunction;

註意：該函數名沒有傳遞參數的括弧和參數，這表示只是分配了一個函數的引用，而不是真正調用該函數。當然，也可以動態定義一個匿名函數，這樣可以實時地處理響應。

1
2
3
 
httpRequest.onreadystatechange = function(){
    // process the server response
};

在處理完伺服器端的響應之後，我們就可以調用XMLHttpRequest對象的open()和send()方法向伺服器端發送請求了。

1
2
 
httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send(null);
  • open()方法的第一個參數：HTTP請求方法 - GET、POST、HEAD及任何伺服器端支持的方法。根據HTTP標準保持大寫，否則一些瀏覽器（例如火狐）可能無法處理請求。關於HTTP請求方法的更多信息，你可以查看W3C規範
  • open()方法的第二個參數：請求的URL。出於安全考慮，不能調用第三方域的頁面內容。當調用open()方法時，一定確認使用相同功能變數名稱內的頁面，否則會得到“permission denied”的錯誤提示。常見的錯誤是使用domain.tld訪問網站，卻使用www.domain.tld來請求頁面。如果真的需要發送一個請求到另一個域的話，可以查看HTTP訪問控制
  • open()方法的第三個參數：可選，是否是非同步請求。如果是true（預設值），表示是非同步請求。

send()方法的參數表示當請求為POST時，向伺服器端發送請求的數據內容。如果發送的是表單數據格式的話，伺服器端可以向字元串一樣地解析。

1
 
"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"

向伺服器端發送的數據格式也可以是JSON、SOAP等格式。

註意：如果使用POST方式發送數據的話，在調用send()方法前，需要設置請求的MIME類型。：

1
 
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

第二步：處理伺服器端的響應

當發送請求時，已經定義了一個函數來處理響應。

1
 
httpRequest.onreadystatechange = nameOfTheFunction;

這個函數可以做什麼呢？首先，該函數需要檢查請求的狀態。如果狀態值為4的話，這表示接收到完成的伺服器端響應，可以繼續處理。

1
2
3
4
5
 
if (httpRequest.readyState === 4) {
    // everything is good, the response is received
} else {
    // still not ready
}

readyState的值列表如下：

  • 0 - 未初始化
  • 1 - 正在載入
  • 2 - 載入完畢
  • 3 - 交互中
  • 4 - 完成

接下來需要檢查HTTP伺服器端響應的狀態代碼，W3C網站 列出了所有的狀態代碼。下麵的例子中，通過是否為200 OK的狀態碼來判斷AJAX調用是否是成功的。

1
2
3
4
5
6
7
 
if (httpRequest.status === 200) {
    // perfect!
} else {
    // there was a problem with the request,
    // for example the response may contain a 404 (Not Found)
    // or 500 (Internal Server Error) response code
}

在檢查了請求的狀態和響應的狀態碼後，就可以接收伺服器端發送的數據並處理。有兩種選項訪問這些數據：

  • httpRequest.responseText - 將伺服器端響應作為文本字元串返回
  • httpRequest.responseXML - 將響應作為一個XMLDocument對象返回，該對象可以使用JavaScript DOM函數進行遍歷。

註意，上述步驟只有非同步請求（open()方法的第三個參數設置為true）時才是有效的。如果使用同步請求的話，是不需要指定函數的。在調用send()方法後就可以訪問到伺服器端返回的數據，因為腳本會停止並等待伺服器端的響應。

第三步：一個簡單的例子

下麵來做一個簡單的HTTP請求。JavaScript將請求一個包含“I’m a test.”文本的“test.html”HTML文檔，然後使用alert()方法列印test.html文件的內容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
  Make a request
</span>
<script type="text/javascript">
(function() {
  var httpRequest;
  document.getElementById("ajaxButton").onclick = function() { makeRequest('test.html'); };

  function makeRequest(url) {
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
      httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
      try {
        httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } 
      catch (e) {
        try {
          httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } 
        catch (e) {}
      }
    }

    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    httpRequest.onreadystatechange = alertContents;
    httpRequest.open('GET', url);
    httpRequest.send();
  }

  function alertContents() {
    if (httpRequest.readyState === 4) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert('There was a problem with the request.');
      }
    }
  }
})();
</script>

在這個例子中：

  • 在瀏覽器中用戶單擊“Make a request”鏈接；
  • 事件處理器調用makeRequest()方法，通過向該函數傳遞的參數，請求一個處在同一目錄中的“test.html”HTML文件；
  • 請求後，（onreadystatechange）執行 alertContents()方法；
  • alertContents()方法用於檢查如果正確地接收到響應，利用alert()方法列印“test.html”文件包含的內容。

註意：如果你發送一個請求後返回的是一段XML代碼，而不是一個靜態的XML文件的話，在Internet Explorer中必須設置一些響應頭。如果沒有設置響應頭“Content-Type: application/xml”的話，當試圖訪問XML元素時IE將拋出一個”Object Expected”的JavaScript錯誤。

註意：如果沒有設置頭“Cache-Control: no-cache”的話，瀏覽器將緩存響應並不會重新提交請求。可以添加像時間戳或一個隨機數的不同GET請求參數（參考 bypassing the cache）。

註意：如果httpRequest變數是全局的，makeRequest()方法因為衝突可能會被重寫。將httpRequest變數定義在一個閉包中的話，可以避免AJAX函數的衝突。

註意：如果出現通信錯誤（如伺服器端被關閉），當試圖訪問狀態欄位時在onreadystatechange的方法中將會拋出一個異常。確保if語句聲明在try..catch語句中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function alertContents() {
  try {
    if (httpRequest.readyState === 4) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert('There was a problem with the request.');
      }
    }
  }
  catch( e ) {
    alert('Caught Exception: ' + e.description);
  }
}

第四步：使用XML進行響應

在前面的例子中，當接收到響應後使用XMLHttpRequest對象的responseText屬性訪問“test.html”文件包含的內容。現在嘗試一下responseXML屬性。

首先，創建一個用於請求的名為“test.xml”的有效XML文檔，代碼如下：

1
2
3
4
 
<?xml version="1.0" ?>
<root>
    I'm a test.
</root>

在腳本中，只需要修改請求行：

1
 
onclick="makeRequest('test.xml')">

然後在alertContents()方法中，需要使用如下代碼替換alert(httpRequest.responseText);這一行代碼：

1
2
3
 
var xmldoc = httpRequest.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);

這段代碼需要由responseXML給予的XMLDocument對象，然後使用DOM方法來訪問XML文檔中的數據。

第五步：處理數據

最後，向伺服器端發送一些數據並接收響應。這次JavaScript腳本請求一個動態頁面“test.php”，該頁面將根據發送的數據返回一個“computedString”-“Hello, [user data]!”，並使用alert()方法進行列印。

首先，向HTML頁面中添加一個文本框，用戶可以通過該文本框輸入他們的名字：

1
2
3
4
5
6
 
<label>Your name: 
  <input type="text" id="ajaxTextbox" />
</label>
<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
  Make a request
</span>

還需要添加一行事件處理器用於從文本框獲取用戶的數據，並將該數據隨著URL傳遞給makeRequest()方法：

1
2
3
4
 
document.getElementById("ajaxButton").onclick = function() { 
    var userName = document.getElementById("ajaxTextbox").value;
    makeRequest('test.php',userName); 
};

修改makeRequest()方法用於接收用戶數據併發送給伺服器端。將請求方式從GET修改為POST，用戶數據作為參數傳遞給httpRequest.send()方法：

1
2
3
4
5
6
7
8
9
 
function makeRequest(url, userName) {

  ...

  httpRequest.onreadystatechange = alertContents;
  httpRequest.open('POST', url);
  httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  httpRequest.send('userName=' + encodeURIComponent(userName));
}

alertContents()方法可以向第三步一樣利用alert()方法列印伺服器端返回的數據。假設伺服器端返回的是computedString和用戶數據的話，如果用戶在文本框中輸入“Jane”伺服器端響應的內容會像是這樣：

{“userData”:”Jane”,”computedString”:”Hi, Jane!”}

在alertContents()方法中使用這些數據，不僅可以使用alert()方法列印responseText的內容，還可以將其解析並列印computedString屬性內容：

1
2
3
4
5
6
7
8
9
10
 
function alertContents() {
  if (httpRequest.readyState === 4) {
    if (httpRequest.status === 200) {
      var response = JSON.parse(httpRequest.responseText);
      alert(response.computedString);
    } else {
      alert('There was a problem with the request.');
    }
  }
}

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

-Advertisement-
Play Games
更多相關文章
  • 外觀模式及php實現
    外觀模式： 外觀模式(Facade Pattern)：外部與一個子系統的通信必須通過一個統一的外觀對象進行，為子系統中的一組介面提供一個一致的界面，外觀模式定義了一個高層介面，這個介面使得這一子系統更加容易使用。外觀模式又稱為門面模式，它是一種對象結構型模式。 目的： 1、為一個複雜子系統提供簡單的 ...
  • 裝飾者模式及php實現
    裝飾模式(Decorator Pattern) ： 動態地給一個對象增加一些額外的職責(Responsibility)，就增加對象功能來說，裝飾模式比生成子類實現更為靈活。其別名也可以稱為包裝器(Wrapper)，與適配器模式的別名相同，但它們適用於不同的場合。根據翻譯的不同，裝飾模式也有人稱之為“ ...
  • 適配器模式和php實現
    1. 概述 將一個類的介面轉換成客戶希望的另外一個介面。Adapter模式使得原本由於介面不相容而不能一起工作的那些類可以在一起工作。 2. 解決的問題 即Adapter模式使得原本由於介面不相容而不能一起工作的那些類可以在一起工作。 3. 模式中的角色 3.1 目標介面（Target）：客戶所期待 ...
  • 理清那麼多個OO（面向對象）
    OOA - Object-Oriented Analysis(面向對象分析) OOT - Object-Oriented Testing (面向對象測試) OOP - Object-Oriented Programming (面象對象編程) OOD - Object-Oriented Design( ...
  • 一道有趣的函數式建模練習
    一道有趣的函數式建模練習 領域建模在於不斷挖掘領域的本質，然後用優秀的代碼簡潔地表現出來。而函數式非常適合將領域映射到數學本質上。前一陣子學習erlang，用erlang做了一些練習，分享其中的一個。 practice 1 : count tiangle 題目： 數數如下圖形中一共包含多少三角形？ ...
  • Bootstrap富文本編輯器-bootstrap-wysiwyg
    在進行英語試題的錄入中，因為英語試題經常會有類似如下的試題： My friend watches dragon boat races at the Dragon Boat Festival.(對劃線部分提問) ——lxx____ is the Double Ninth Festival? ——It  ...
  • bootstrap和jQuery.Gantt的css衝突問題
    bootstrap是廣泛使用的一個前端框架， 而jQuery.Gantt在目前也是一個很好用的用於繪製甘特圖的插件。 這次在同時使用它們時，發現甘特圖顯示異常，如圖 不載入bootstrap.css，甘特圖就不會出問題，很容易就定位出是bootstrap的css衝突問題。 但是要實際定位到具體是哪個 ...
  • HTML Basic Document and UML
    HTML Basic Document Text Elements Logical Styles Physical Styles Links, Anchors, and Image Elements Unordered list Ordered list Definition list Tables ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類