首頁 web前端 js教程 只需四步驟即可實現ajax發送非同步請求

只需四步驟即可實現ajax發送非同步請求

Mar 30, 2018 pm 05:33 PM
ajax 非同步

這次帶給大家只需四步驟即可實現ajax發送非同步請求,四步實現ajax發送非同步請求的注意事項有哪些,以下就是實戰案例,一起來看一下。

ajax發送非同步請求,供大家參考,具體內容如下

第一步(得到XMLHttpRequest)

ajax其實只需要學習一個對象:XMLHttpRequest,如果掌握了它,就掌握了ajax!!!

##1.得到XMLHttpRequest

大多數瀏覽器都支援:var xmlHttp=new XMLHttpRequest();

IE6 .0:var xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
IE5.0以更早版本的IE:var xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);

2.編寫建立XMLHttpRequest物件的函數

function createXMLHttpRequest(){
     try{
     return new XMLHttpRequest();
     } catch(e){
     try{
     return new ActiveXObject(“Msxml2.XMLHTTP”);
    }catch(e){
     try{
      return new ActiveXObject(“Microsoft.XMLHTTP”);
     }catch(e){
       alert(“哥们儿,你用的是什么浏览器啊?”);
       throw e;
    }
    }
     } 
}
登入後複製

第二步驟(開啟與伺服器的連線)

xmlHttp.open():用來開啟與伺服器的連線,它需要三個參數:   

請求方式:可以是GET與POST

請求的URL:指定伺服器端資源,例如:/day23_1/A
Servlet請求是否為非同步:如果為true表示發送非同步請求,否則同步請求

xmlHttp.open(“GET”,”/day23_1/AServlet”,true);//例如

第三步驟(傳送請求)

xmlHttp.send(null):如果沒有給予可能會造成部分瀏覽器無法傳送! 

      參數:就是請求體內容!如果是GET請求,必須給null。

      如果是
POST請求,如下

#xmlHttp.send(“username=zhangSan&password=123”);

第四個步驟:

在xmlHttp物件的一個事件上註冊監聽器:onreadystatechange

xmlHttp物件一共有5個狀態

0:初始化未完成狀態,只是創建了XMLHttpRequest物件,尚未呼叫open()方法

1:請求已開始,open()方法已呼叫,但還沒呼叫send()方法
2:請求傳送完成狀態,send()方法已調用
3:開始讀取伺服器回應
4:讀取伺服器回應結束(通常我們只關心最後這個狀態!!!)

得到xmlHttp物件的狀態

var state = xmlHttp.readyState;//可能是0、1、2、3、4
登入後複製
得到伺服器回應的

狀態碼(200:成功304:狀態沒有改變404 500:伺服器錯誤)

var status=xmlHttp.status;//例如200、404、500
登入後複製
得到伺服器回應的內容

var content=xmlHttp.responseText;//得到服务器的响应的文本格式的内容(这更通用)
var content=xmlHttp.responseXML;//得到服务器的响应的xml响应的内容,它是document对象了!
登入後複製
所以監聽器應該這樣寫

xmlHttp.onreadystatechange = function(){
  //xmlHttp的5种状态都会调用本方法
    if(xmlHttp.readyState ==4 && xmlHttp.status == 200){
  //双重判断:判断是否为4状态,而且还要判断是否为200
      var text=xmlHttp.responseText;
     } 
};
登入後複製
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

實作無刷新下拉動連線的Ajax+Servlet(附程式碼)

ajax取得json數據為undefined應該如何使用

以上是只需四步驟即可實現ajax發送非同步請求的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

解決jQuery AJAX請求遇到403錯誤的方法 解決jQuery AJAX請求遇到403錯誤的方法 Feb 20, 2024 am 10:07 AM

標題:解決jQueryAJAX請求出現403錯誤的方法及程式碼範例403錯誤是指伺服器禁止存取資源的請求,通常會導致出現這個錯誤的原因是請求缺少權限或被伺服器拒絕。在進行jQueryAJAX請求時,有時會遇到這種情況,本文將介紹如何解決這個問題,並提供程式碼範例。解決方法:檢查權限:首先要確保請求的URL位址是正確的,同時驗證是否有足夠的權限來存取該資

PHP 與 Ajax:建立一個自動完成建議引擎 PHP 與 Ajax:建立一個自動完成建議引擎 Jun 02, 2024 pm 08:39 PM

使用PHP和Ajax建置自動完成建議引擎:伺服器端腳本:處理Ajax請求並傳回建議(autocomplete.php)。客戶端腳本:發送Ajax請求並顯示建議(autocomplete.js)。實戰案例:在HTML頁面中包含腳本並指定search-input元素識別碼。

解決jQuery AJAX請求403錯誤的方法 解決jQuery AJAX請求403錯誤的方法 Feb 19, 2024 pm 05:55 PM

jQuery是一個受歡迎的JavaScript函式庫,用來簡化客戶端端的開發。而AJAX則是在不重新載入整個網頁的情況下,透過發送非同步請求和與伺服器互動的技術。然而在使用jQuery進行AJAX請求時,有時會遇到403錯誤。 403錯誤通常是伺服器禁止存取的錯誤,可能是由於安全性原則或權限問題導致的。在本文中,我們將討論如何解決jQueryAJAX請求遭遇403錯誤

如何解決jQuery AJAX報錯403的問題? 如何解決jQuery AJAX報錯403的問題? Feb 23, 2024 pm 04:27 PM

如何解決jQueryAJAX報錯403的問題?在開發網頁應用程式時,經常會使用jQuery來發送非同步請求。然而,有時在使用jQueryAJAX時可能會遇到錯誤代碼403,表示伺服器禁止存取。這種情況通常是由伺服器端的安全性設定所導致的,但可以透過一些方法來解決這個問題。本文將介紹如何解決jQueryAJAX報錯403的問題,並提供具體的程式碼範例。一、使

如何使用Ajax從PHP方法取得變數? 如何使用Ajax從PHP方法取得變數? Mar 09, 2024 pm 05:36 PM

使用Ajax從PHP方法取得變數是Web開發中常見的場景,透過Ajax可以實作頁面無需刷新即可動態取得資料。在本文中,將介紹如何使用Ajax從PHP方法中取得變量,並提供具體的程式碼範例。首先,我們需要寫一個PHP檔案來處理Ajax請求,並傳回所需的變數。下面是一個簡單的PHP檔案getData.php的範例程式碼:

Python asyncio 進階指南:從初學者到專家 Python asyncio 進階指南:從初學者到專家 Mar 04, 2024 am 09:43 AM

並發和非同步編程並發編程處理同時執行的多個任務,非同步編程是一種並發編程,其中任務不會阻塞線程。 asyncio是python中用於非同步程式設計的函式庫,它允許程式在不阻塞主執行緒的情況下執行I/O操作。事件循環asyncio的核心是事件循環,它監控I/O事件並調度相應的任務。當一個協程準備好時,事件循環會執行它,直到它等待I/O操作。然後,它會暫停協程並繼續執行其他協程。協程協程是可暫停和恢復執行的函數。 asyncdef關鍵字用於建立協程。協程使用await關鍵字等待I/O作業完成。 asyncio的基礎以下

PHP 與 Ajax:建立動態載入內容的解決方案 PHP 與 Ajax:建立動態載入內容的解決方案 Jun 06, 2024 pm 01:12 PM

Ajax(非同步JavaScript和XML)允許在不重新載入頁面情況下新增動態內容。使用PHP和Ajax,您可以動態載入產品清單:HTML建立一個帶有容器元素的頁面,Ajax請求載入資料後將資料加入到該元素中。 JavaScript使用Ajax透過XMLHttpRequest向伺服器傳送請求,從伺服器取得JSON格式的產品資料。 PHP使用MySQL從資料庫查詢產品數據,並將其編碼為JSON格式。 JavaScript解析JSON數據,並將其顯示在頁面容器中。點選按鈕觸發Ajax請求,載入產品清單。

PHP 與 Ajax:提升 Ajax 安全性的方法 PHP 與 Ajax:提升 Ajax 安全性的方法 Jun 01, 2024 am 09:34 AM

為了提升Ajax安全性,有幾種方法:CSRF保護:產生令牌並將其傳送到客戶端,在請求中新增至伺服器端進行驗證。 XSS保護:使用htmlspecialchars()過濾輸入,防止惡意腳本注入。 Content-Security-Policy頭:限制惡意資源加載,指定允許載入腳本和樣式表的來源。驗證伺服器端輸入:驗證從Ajax請求接收的輸入,防止攻擊者利用輸入漏洞。使用安全Ajax函式庫:利用jQuery等函式庫提供的自動CSRF保護模組。

See all articles