前端|AJAX入門

時間 2021-08-12

標籤 html web 服務器異步 async ide 函數 this url 3d 欄目 Ajax 简体版

原文原文鏈接

AJAX是什麼html

AJAX 全稱爲 Asynchronous JavaScript And XML，是一種從網頁訪問 Web 服務器的技術AJAX 的做用有從 web 服務器請求數據以及顯示或使用數據。web

AJAX實例服務器

能夠用一個本地文件來演示一下，咱們將本身寫的一個txt文件的路徑做爲url的值，以下。異步

<!DOCTYPE html>async

<html>ide

<body>函數

<div id="demo">this

<h1>XMLHttpRequest 對象</h1>url

<button type="button" οnclick="loadDoc()">點擊此處打開文件</button>3d

</div>

function loadDoc() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("demo").innerHTML =

this.responseText;

}

};

xhttp.open("GET", "1.txt", true);

xhttp.send();

}

</script>

</body>

</html>

這張 HTML 頁面包含一個 <div> 和一個 <button>，

<div> 用於顯示來自服務器的信息。

<button> 被點擊時就會調用函數。

下圖1爲結果，圖2爲點擊按鈕後的結果。

圖1

圖2

AJAX請求

XMLHttpRequest 對象用於同服務器交換數據，也就是向服務器發送請求，也就是上面實例化中的xhttp.open（）。括號中的主要參數以下‘

method 請求的類型：
GET 仍是 POST

url, 服務器（文件）位置

async true（異步）或 false（同步），不填默認爲異步

AJAX響應

發服務器發送請求成功事後，服務器會有相應的響應，要從下面一些相應的屬性來理解。

Onreadystatechange定義了當 readyState 屬性發生改變時所調用的函數。

readyState保存了 XMLHttpRequest 的狀態，不一樣的狀態由數字表示

0: 請求未初始化

1: 服務器鏈接已創建

2: 請求已接收

3: 正在處理請求

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

Status存有 XMLHttpRequest 對象的狀態。好比404就是頁面丟失（Page not found），200就是完成（Ok）。

當 readyState 爲 4，status 爲 200 時，響應就緒。

END

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。