03-08 10:22 阅读 107

ajax与XHR的理解和使用

ajax理解

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下 ;通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

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

XMLHttpRequest 是 AJAX 的基础,是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