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 的基础,
XMLHttpRequest
API是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) })