笔记大全

AJAX之xmlHttp

更新时间：2023-10-06

XMLHttpRequest（XHR）在Web开发中扮演着重要角色，它允许JavaScript发送HTTP请求并从服务器获取数据，从而不必重新加载整个页面。XHR 可用于创建非常动态的用户界面和交互式Web应用程序。在此文中，我们将学习如何使用XMLHttpRequest对象从服务器中获取数据，并且讲解一些XHR的基础概念。

XMLHttpRequest对象

在JavaScript中，XMLHttpRequest对象代表了发往服务器的异步HTTP请求。XMLHttpRequest对象可以在不重新加载页面的情况下更新网页，这是因为XMLHttpRequest对象允许页面与服务器交互。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.example.com/api/data', true);
xhr.send();

XMLHttpRequest对象属性

XMLHttpRequest对象具有多个属性。下面列出了最有用的属性：

onreadystatechange——每次状态改变时被调用。
readyState——存有XMLHttpRequest的状态。
status——200表示“OK”，404表示“未找到页面”等等。
responseText——服务器响应的文本内容。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {   
    if (xhr.readyState == 4 && xhr.status == 200) {
        document.getElementById("demo").innerHTML = xhr.responseText;
    }
}
xhr.open("GET", "http://www.example.com/api/data", true);
xhr.send();

XMLHttpRequest对象方法

XMLHttpRequest对象除了具有属性，还有一些方法：

abort()——取消当前请求。
getAllResponseHeaders()——返回头部信息。
getResponseHeader()——返回指定的头部信息。
open(method, url, async, user, psw)——规定请求的类型、URL 以及是否异步处理请求。
send()——发送请求。
setRequestHeader()——向请求添加 HTTP 头。

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://www.example.com/api/data", true);
xhr.setRequestHeader("Content-type", "application/json");
xhr.onreadystatechange = function() {  
    if (xhr.readyState == 4 && xhr.status == 200) {
        document.getElementById("demo").innerHTML = xhr.responseText;
    }
};
var data = JSON.stringify({
    name: "Jack",
    age: "18"
});
xhr.send(data);

XMLHttpRequest的回调函数

为了能够获取服务器的响应，XHR 具有一个回调函数，当 XHR 对象发生状态改变时，这个函数将会被触发。一个XHR对象通常会经过下面几个状态：

0: 请求未初始化。XMLHttpRequest 对象已经创建，但尚未调用open（）方法。
1: 服务器连接已建立。open()方法已经调用，但是send()方法尚未调用。
2: 请求已接收。send()方法已经调用，且头部和状态已经可获得。
3: 请求处理中。在接收到响应数据的过程中。
4: 请求已完成，且响应已就绪。响应已经完成了。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("demo").innerHTML = this.responseText;
    }
};
xhr.open("GET", "http://www.example.com/api/data", true);
xhr.send();

c语言编程笔录