ajax的xhr方法有什么用,ajax与XHR的理解和使用

ajax理解

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下 ;通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

Ajax简介(MDN文档)

Asynchronous JavaScript + XML(异步JavaScript和XML), 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的 XMLHttpRequest。当使用结合了这些技术的AJAX模型以后， 网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载(刷新)整个页面。这使得程序能够更快地回应用户的操作

XMLHttpRequest 是 AJAX 的基础,XMLHttpRequestAPI是Ajax的核心

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

理解XHRHttpRequest

使用 XMLHttpRequest (XHR)对象可以与服务器交互, 也就是发送 ajax 请求

前端可以获取到数据，而无需让整个的页面刷新。

这使得 Web 页面可以只更新页面的局部，而不影响用户的操作

区别一般 http 请求与 ajax 请求

ajax 请求是一种特别的 http 请求

对服务器端来说, 没有任何区别, 区别在浏览器端

浏览器端发请求: 只有 XHR 或 fetch 发出的才是 ajax 请求, 其它所有的都是非 ajax 请求

浏览器端接收到响应

一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面

ajax 请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调函数并传入响应相关数据

传统的XHR请求模式

// ajax的基本请求步骤

// 1.创建对象

const xhr = new XMLHttpRequest();

// 2.初始换

xhr.open(‘Get‘, ‘http....‘);

// 发送请求

xhr.send();

// 处理响应回调

xhr.onreadystatechange = function(){

console.log(`xhr`, xhr)

// 返回状态码

if(xhr.readyState === 4){

// 判断响应状态码为2xx

if(xhr.status >= 200 && xhr.status <= 300){

// 控制台输出响应体

console.log(`xhr.response`, xhr.response)

}else{

// 输出响应状态码

console.log(`xhr.status`, xhr.status)

}

}

}

// Promise处理ajax请求

const p = new Promise((resolve, reject) => {

// ajax的基本请求步骤

// 1.创建对象

const xhr = new XMLHttpRequest();

// 2.初始换

xhr.open(‘Get‘, ‘http....‘);

// 发送请求

xhr.send();

// 处理响应回调

xhr.onreadystatechange = function(){

console.log(`xhr`, xhr)

// 返回状态码

if(xhr.readyState === 4){

// 判断响应状态码为2xx

if(xhr.status >= 200 && xhr.status <= 300){

// 控制台输出响应体

// console.log(`xhr.response`, xhr.response)

resolve(xhr.response)

}else{

// 输出响应状态码

// console.log(`xhr.status`, xhr.status)

reject(xhr.status)

}

}

}

});

// 调用then方法

p.then(value => {

console.log(value);

},reason => {

console.warn(reason)

})

原文：https://www.cnblogs.com/yoona-lin/p/14901287.html