Ajax的原生方法

Pocher 發布于2019-08-20 18:57 / 2994人閱讀

摘要：它可以發送和接收各種格式的信息，包括，，和文本文件。以文本字符串的形式返回服務器響應作為可以使用函數遍歷的對象返回響應

簡介

Ajax, 是使用XMLHttpRequest對象與服務器進行通信。它可以發送和接收各種格式的信息，包括JSON，XML，HTML和文本文件。它有以下兩個功能：

在不重新加載頁面的情況下向服務器發出請求

接收并處理來自服務器的數據

步驟 1 創建XMLHttpRequest對象

if (window.XMLHttpRequest) { // 新瀏覽器...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // 舊瀏覽器
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

步驟 2 為XMLHttpRequest對象分配處理函數 方法1 分配函數

httpRequest.onreadystatechange = nameOfTheFunction;

方法2 分配匿名函數

httpRequest.onreadystatechange = function () {};

步驟 3 通過open( ),send( )作出HTTP請求

httpRequest.open("GET", "[http://www.example.org/some.file](http://www.example.org/some.file)", true);
httpRequest.send();

open( ) 方法

參數1 HTTP請求的方法 GET、 POST、 HEAD 等，需大寫
參數2 發送請求的URL
參數3 異步選項

send( ) 方法

如果使用POST方法，則send的參數為想要發送到服務器的任何數據

步驟 4 處理服務器響應 1.檢查請求狀態

if (httpRequest.readyState === 4) {
    // Everything is good, the response was received.
} else {
    // Not ready yet.
}

請求狀態代碼

0（未初始化）或（請求未初始化）

1（加載）或（建立服務器連接）

2（已加載）或（請求收到）

3（交互式）或（處理請求）

4（完成）或（請求完成，響應準備就緒）

2.檢查HTTP響應代碼

通過檢查200OK響應代碼，區分AJAX調用是否成功

if (httpRequest.status === 200) {
    // Perfect!
} else {
    // There was a problem with the request.
    // For example, the response may have a 404 (Not Found)
    // or 500 (Internal Server Error) response code.
}

3.進行數據操作

在檢查請求的狀態和響應的HTTP狀態代碼之后，可以使用服務器發送的數據進行任何所需的操作。

httpRequest.responseText - 以文本字符串的形式返回服務器響應
httpRequest.responseXML- 作為XMLDocument可以使用JavaScript DOM函數遍歷的對象返回響應

云服務器 GPU云服務器原生ajax 原生php ajax ajax原生js實現原生js封裝ajax

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84922.html

原生JS與jQuery對AJAX的實現

摘要：原生與對的實現一定義里這么解釋異步的和。二原生實現所有現代瀏覽器以及均內建對象。一般是正常未找到頁面，一般是錯誤，或者后臺沒有創建相應的內部服務錯誤，多為后臺錯誤。基本上通過發送的數據及傳回的數據就能定位問題所在了。原生JS與jQuery對AJAX的實現一、定義 W3C里這么解釋AJAX： AJAX = Asynchronous JavaScript and XML（異步的 Jav...

Chaz 2019-08-21 10:37 評論0 收藏0
原生js實現ajax及get post方法

摘要：使用過的同學，應該對事件綁定方法有一定的了解。實現方式以下為個人類庫中實現方式。代碼中使用到一個基礎方法對象，該對象為的基礎類。如果想了解更多，可以通過點擊進入查看原碼。使用過jQuery的同學，應該對事件綁定方法ajax有一定的了解。在個人類庫jTool 中實現了這個方法，這里就來細說下原生實現方式。實現方式以下為個人類庫jTool 中 Ajax 實現方式。代碼中使用到一個基...

pkhope 2019-08-26 13:54 評論0 收藏0
原生javaScript實現Ajax 和 jQuery實現Ajax

摘要：作者后臺使用的是語言，所以這里以后臺為例子不影響學習一原生使用方法創建對象兼容處理處理低版本不兼容問題準備發送請求方式接口參數名參數值異步執行發送回調是表示數據解析完成，后臺處理完成了。是表示處理的結果是的。作者后臺使用的是php語言，所以這里以php后臺Api為例子,不影響學習Ajax 一、 javaScript原生使用Ajax 1.get方法 //1.創建對象兼容處理 var ...

ssshooter 2019-08-23 17:03 評論0 收藏0
原生JS封裝AJAX請求

摘要：一直在用方法來寫請求，用的多了，不免對這其中是怎么實現的產生了興趣，于是乎，小弟閑來無聊研究了一下原生實現請求，網上看了很多前輩們的關于請求的封裝方法，也借鑒了很多經驗，于是乎就出現了小弟的一個原生封裝的版本，希望大家看了之后能夠明白，下面一直在用jQuery方法來寫ajax請求，用的多了，不免對這其中是怎么實現的產生了興趣，于是乎，小弟閑來無聊研究了一下原生實現ajax請求，網上看...

newsning 2019-08-02 15:56 評論0 收藏0
原生JS封裝AJAX請求

摘要：一直在用方法來寫請求，用的多了，不免對這其中是怎么實現的產生了興趣，于是乎，小弟閑來無聊研究了一下原生實現請求，網上看了很多前輩們的關于請求的封裝方法，也借鑒了很多經驗，于是乎就出現了小弟的一個原生封裝的版本，希望大家看了之后能夠明白，下面一直在用jQuery方法來寫ajax請求，用的多了，不免對這其中是怎么實現的產生了興趣，于是乎，小弟閑來無聊研究了一下原生實現ajax請求，網上看...

hiyang 2019-08-30 13:08 評論0 收藏0