1.什么是Ajax?

Ajax 的全称是 Asynchronous Javascript And XML(异步 JavaScript 和 XML)。通俗的理解:在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式,就是Ajax。

Ajax可以实现网页与服务器之间的数据交互
数据载体交互数据传输AJAX网页服务器用户

AJAX不是编程语言,是一种无需重新载入整个页面,能够更新部分网页的技术。

Ajax与使用Form表单和后端进行数据交互的方式比较,具有以下优点:

  • 异步提交: 提交完认为不需要原地等待,立马就做其他事
  • 局部刷新: 不在局限于整个页面的刷新,而是在于局部的某一个页面的小块刷新

同步和异步:

  • 同步交互: 客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求。
  • 异步交互: 客户端发出一个请求后,无需要等待服务器响应结束,就可以发出第二个请求。

2.XMLHttpRequest 对象

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

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

  • 理解XHRHttpRequest

使用 XMLHttpRequest (XHR)对象可以与服务器交互, 也就是发送 ajax 请求
前端可以获取到数据,而无需让整个的页面刷新。
这使得 Web 页面可以只更新页面的局部,而不影响用户的操作

  • 区别一般 http 请求与 ajax 请求

ajax 请求是一种特别的 http 请求
对服务器端来说, 没有任何区别, 区别在浏览器端
浏览器端发请求: 只有 XHR 或 fetch 发出的才是 ajax 请求, 其它所有的都是非 ajax 请求

  • 浏览器端接收到响应
    一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面
    ajax 请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调函数并传入响应相关数据

2.1 XMLHttpRequest对象的属性

XMLHttpRequest对象的常见属性如下:

  • onReadyStateChange - 定义了当 readyState 属性发生改变时所调用的函数.
  • readyState - 表示请求的状态。范围值从04
    • 0 - 服务器连接已建立,未调用open()。
    • 1 - 服务器连接已建立,调用open()但不调用send()。
    • 2 - 请求已接收, 调用send(),并且标题和状态可用。
    • 3 - 请求处理中。responseText保存数据。
    • 4 - 请求已完成,且响应已就绪。
  • status - HTTp状态码
  • statusText - 返回状态文本(例如 “OK” 或 “Not Found”)
  • reponseText - 以文本形式返回响应。
  • responseXML - 以XML形式返回响应。

2.2 XMLHttpRequest对象的方法

XMLHttpRequest对象的重要方法如下:

方法描述
void open(method, URL, async)规定请求的类型、URL 以及是否异步处理请求
void send(string)将请求发送到服务器,string:仅用于 POST 请求
setRequestHeader(header,value)添加请求标头

3.Ajax实例

  • 实现步骤
    想要实现ajax需要四个步骤

    • 创建xhr对象
    • 配置请求信息
    • 监听状态变化
    • 发送请求

3.1 传统的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)
     }
 }
}

3.2 Promise处理ajax请求

// 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)
})

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部