淺談ajax

来源:http://www.cnblogs.com/peke/archive/2017/11/27/7906780.html
-Advertisement-
Play Games

ajax介紹 ajax即“Asynchronous Javascript And XML”(非同步JavaScript和XML),是指一種創建互動式網頁應用的網頁開發技術,它並不是一門新的語言。 通過在後臺與伺服器進行少量數據交換,ajax可以使網頁實現非同步更新。 這意味著可以在不重新載入整個網頁的情 ...


ajax介紹

       ajax即“Asynchronous Javascript And XML”(非同步JavaScript和XML),是指一種創建互動式網頁應用的網頁開發技術,它並不是一門新的語言。

       通過在後臺與伺服器進行少量數據交換,ajax可以使網頁實現非同步更新。       

       這意味著可以在不重新載入整個網頁的情況下,對網頁的某部分進行更新。而傳統的網頁如果需要更新內容,必需重載整個網頁面。

 

ajax技術體系

         XHTML和CSS

   使用文檔對象模型(Document Object Model)作動態顯示和交互

   使用XML和XSLT做數據交互和操作

   使用XMLHttpRequest進行非同步數據接收

 

ajax的工作流程

 

 

關於XmlHttpRequest對象

 

屬性:

   readyState

       0: 請求未初始化

       1: 伺服器連接已建立

       2: 請求已接收

       3: 請求處理中

       4: 請求已完成,且響應已就緒

   State

       200:     "OK"

       404: 未找到頁面

   responseText

       獲得字元串形式的響應數據。

   responseXML

       獲得 XML 形式的響應數據。

   onreadystatechange

       存儲函數(或函數名),每當 readyState     屬性改變時,就會調用該函數。

 

方法:

xmlHttpRequst對象利用send()和open()方法與伺服器進行交互。

    open(method,url,async)

        method:請求的類型;GET 或 POST

        url:文件在伺服器上的位置

        async:true(非同步)或 false(同步)

 

    send(string) 

          string:僅用於 POST 請求

如果是post請求,必須使用 setRequestHeader() 來添加 HTTP 頭。然後在send() 方法中設置發送的數據,例如:

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

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 

xmlhttp.send("fname=Bill&lname=Gates");

 

ajax的使用步驟

 

1、創建XMLHttpRequest對象

    不同的瀏覽器使用的非同步調用對象也有所不同,在IE瀏覽器中非同步調用使用的是XMLHTTP組件中的XMLHttpRequest對象,而在Netscape、Firefox瀏覽器中則直接使用XMLHttpRequest組件。因此,在不同瀏覽器中創建XMLHttpRequest對象的方式都有所不同。

      在IE瀏覽器中創建XMLHttpRequest對象的方式如下所示:

   var xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

          在Netscape瀏覽器中創建XMLHttpRequest對象的方式如下所示:

   var xmlHttpRequest = new XMLHttpRequest();

 

2、創建HTTP請求

      創建了XMLHttpRequest對象之後,必須為XMLHttpRequest對象創建HTTP請求,用於說明XMLHttpRequest對象要從哪裡獲取數據.通常可以是網站中的數據,也可以是本地中其他文件中的數據.

      創建HTTP請求可以使用XMLHttpRequest對象的open()方法,其語法代碼如下所示:

      XMLHttpRequest.open(method,URL,flag,name,password)

 

代碼中的參數解釋如下所示:

      method:該參數用於指定HTTP的請求方法,一共有get、post、head、put、delete五種方法,常用的方法為get和post。

      URL:該參數用於指定HTTP請求的URL地址,可以是絕對URL,也可以是相對URL。

      flag:該參數為可選參數,參數值為布爾型。該參數用於指定是否使用非同步方式。true表示非同步方式、false表示同步方式,預設為true。

      name:該參數為可選參數,用於輸入用戶名。如果伺服器需要驗證,則必須使用該參數。

      password:該參數為可選參數,用於輸入密碼。如果伺服器需要驗證,則必須使用該參數。通常可以使用以下代碼來訪問一個網站文件的內容。

 

3、設置響應HTTP請求狀態變化的函數

        創建完HTTP請求之後,應該就可以將HTTP請求發送給Web伺服器了。然而,發送HTTP請求的目的是為了接收從伺服器中返回的數據。從創建XMLHttpRequest對象開始,到發送數據、接收數據、XMLHttpRequest對象一共會經歷以下5中狀態。

 

      ⑴未初始化狀態。在創建完XMLHttpRequest對象時,該對象處於未初始化狀態,此時XMLHttpRequest對象的readyState屬性值為0。

      ⑵初始化狀態。在創建完XMLHttpRequest對象後使用open()方法創建了HTTP請求時,該對象處於初始化狀態。此時XMLHttpRequest對象的readyState屬性值為1。

      ⑶發送數據狀態。在初始化XMLHttpRequest對象後,使用send()方法發送數據時,該對象處於發送數據狀態,此時XMLHttpRequest對象的readyState屬性值為2。

      ⑷接收數據狀態。Web伺服器接收完數據併進行處理完畢之後,向客戶端傳送返回的結果。此時,XMLHttpRequest對象處於接收數據狀態,XMLHttpRequest對象的readyState屬性值為3。

      ⑸完成狀態。XMLHttpRequest對象接收數據完畢後,進入完成狀態,此時XMLHttpRequest對象的readyState屬性值為4。此時接收完畢後的數據存入在客戶端電腦的記憶體中,可以使用responseText屬性或responseXml屬性來獲取數據。

 

       只有在XMLHttpRequest對象完成了以上5個步驟之後,才可以獲取從伺服器端返回的數據。因此,如果要獲得從伺服器端返回的數據,就必須要先判斷XMLHttpRequest對象的狀態。

 

      XMLHttpRequest對象可以響應readystatechange事件,該事件在XMLHttpRequest對象狀態改變時(也就是readyState屬性值改變時)激發。因此,可以通過該事件調用一個函數,併在該函數中判斷XMLHttpRequest對象的readyState屬性值。如果readyState屬性值為4則使用responseText屬性或responseXml屬性來獲取數據。

 

4、設置獲取伺服器返回數據的語句

      如果XMLHttpRequest對象的readyState屬性值等於4,表示非同步調用過程完畢,就可以通過XMLHttpRequest對象的responseText屬性或responseXml屬性來獲取數據。

      但是,非同步調用過程完畢,並不代表非同步調用成功了,如果要判斷非同步調用是否成功,還要判斷XMLHttpRequest對象的status屬性值,只有該屬性值為200,才表示非同步調用成功,因此,要獲取伺服器返回數據的語句,還必須要先判斷XMLHttpRequest對象的status屬性值是否等於200

 

5、發送HTTP請求

      在經過以上幾個步驟的設置之後,就可以將HTTP請求發送到Web伺服器上去了。發送HTTP請求可以使用XMLHttpRequest對象的send()方法,其語法代碼如下所示:

      XMLHttpRequest.send(data)

 

      其中data是個可選參數,如果請求的數據不需要參數,即可以使用null來替代。data參數的格式與在URL中傳遞參數的格式類似。

(註意:只有在使用send()方法之後,XMLHttpRequest對象的readyState屬性值才會開始改變,也才會激發readystatechange事件,並調用函數)

 

6、局部更新

      在通過Ajax的非同步調用獲得伺服器端數據之後,可以使用JavaScript或DOM來將網頁中的數據進行局部更新。常用的局部更新的方式有以下3種:

    1,表單對象的數據更新;

    2,IE瀏覽器中標簽間文本的更新;

    3,DOM技術的局部刷新


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

-Advertisement-
Play Games
更多相關文章
  • 語法: mvn install:install-file -Dfile=jar包的位置(參數一) -DgroupId=groupId(參數二) -DartifactId=artifactId(參數三) -Dversion=version(參數四) -Dpackaging=jar 我把“ojdbc-1 ...
  • JAVA靜態代碼塊會在類被載入時自動執行? 一、先看Java靜態方法,靜態變數 http://www.cnblogs.com/winterfells/p/7906078.html 靜態代碼塊 在類中,可以將某一塊代碼聲明為靜態的,這樣的程式塊叫靜態初始化段。靜態代碼塊的一般形式如下: 編譯通過後,用 ...
  • 上邊有字元串複製直接使用賦值號。 string1=string2; 實際上他執行的是什麼操作? strcpy(string1,string2); ...
  • 首先題主說的20%我不知道從哪方面去理解。接下來我會將自己多年來工作中會經常使用到的技術列出來。 1.html、css 2.java工作原理(jvm) 3.java語法、數據結構和演算法 4.java語言特性(封裝、繼承、多態、抽象) 5.java設計模式(在開發中會經常用到) 6.java反射機制( ...
  • 寫在前面: 對於可移動的列表框,ligerui中也對其進行了封裝,可以直接照著demo拿來用,不過那都是直接在頁面上靜態初始化的數據,那麼如何從後臺獲取? 前面有了對ligerui的一些組件的使用經驗後,在這裡其實 對於從後臺獲取數據在前臺頁面進行顯示,都大同小異。也不是很難。 即要麼是在liger ...
  • 重載是指,一個類中定義了一個成員方法後,通過修改參數個數、參數類型或參數順序,重新實現該方法,則這兩個方法互為對方的重載方法。 重寫是指,子類重新實現父類的成員方法。 重載後的方法,與原方法相比: (1).方法名相同,參數個數、參數類型及參數順序至少有一個不同; (2).返回值類型與訪問許可權修飾符可 ...
  • 1、異常簡介: (1) Java中的所有不正常類都繼承於Throwable類。Throwable主要包括兩個大類,一個是Error類,另一個是 Exception類; (2)其中Error類中包括虛擬機錯誤和線程死鎖,一旦Error出現了,程式就徹底的掛了,被稱為程式終結者; (3) Excepti ...
  • 註意 socket通信預設的情況下是屬於阻塞形式通信,在recv與accept函數會進行阻塞 1.客戶端正常退出的情況下,server端的con的通道會正常的關閉,recv直接賦值為空 2.在windows下,使用pycharm的強制終端客戶端,會造成,con通道的破壞,造成伺服器端的異常(可以通過 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...