Ajax 笔记(三)—— Ajax 原理

这篇具有很好参考价值的文章主要介绍了Ajax 笔记(三)—— Ajax 原理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


Ajax 笔记:

Ajax 笔记(一)—— Ajax 入门

Ajax 笔记(二)—— Ajax 案例

Ajax 笔记(三)—— Ajax 原理

Ajax 笔记(四)—— Ajax 进阶


Ajax 笔记接口文档:https://apifox.com/apidoc/shared-fa9274ac-362e-4905-806b-6135df6aa90e/doc-842135


3. Ajax 原理

3.1 XMLHttpRequest

3.1.1 XHR 使用步骤

Ajax 是浏览器与服务器通信的技术,采用 XMLHttpRequest 对象相关代码。axios 是对 XHR 相关代码进行了封装,让我们只关心传递的接口参数。学习 XHR 就是了解 axios 内部与服务器交互过程的真正原理。

const xhr = new XMLHttpRequest()
xhr.open('请求方法', '请求url网址', true) // 异步
// 接收相应
xhr.addEventListener('loadend', () => {
  // 响应结果
  console.log(xhr.response)
})
// 发送请求
xhr.send()
// 终止请求
xhr.abort()

onreadystatechange()的定义是只要返回的状态码只要变化时就回调一次函数,而onload只有状态码为4时才能回调一次函数。onprogress()当状态码为3时,会执行这个函数。
当服务器正常的话基本上都会返回readyState 状态码0~4,但是不一定请求得到数据,所以有个http状态码来判断。

xhr.onreadystatechange = function(){
    if (xhr.readyState == 4 && xhr.status == 200)
    {
        console.log(`请求成功并返回数据${this.responseText}`);
    }
}

3.1.2 查询参数

原生 XHR 需要自己在 url 后面携带查询参数字符串,没有 axios 帮助我们把 params 参数拼接到 url 字符串后面了

/**
 * 目标:使用XHR携带查询参数,展示某个省下属的城市列表
*/
const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://hmajax.itheima.net/api/city?pname=辽宁省')
xhr.addEventListener('loadend', () => {
  console.log(xhr.response)
  const data = JSON.parse(xhr.response)
  console.log(data)
  document.querySelector('.city-p').innerHTML = data.list.join('<br>')
})
xhr.send()

多个查询参数:

可以用 URLSearchParams 把参数对象转成 “参数名=值&参数名=值“ 格式的字符串

// 1. 创建 URLSearchParams 对象
const paramsObj = new URLSearchParams({
  参数名1:1,
  参数名2:2
})

// 2. 生成指定格式查询参数字符串
const queryString = paramsObj.toString()
// 结果:参数名1=值1&参数名2=值2

代码示例:

 const xhr = new XMLHttpRequest()
 const paramsObj = new URLSearchParams({
   pname: '河北省',
   cname: '石家庄市'
 })
 const queryString = paramsObj.toString()
 xhr.open('GET', `http://hmajax.itheima.net/api/area?${queryString}`)
 xhr.addEventListener('loadend', () => {
   console.log(JSON.parse(xhr.response))
   document.querySelector('.my-p').innerHTML = JSON.parse(xhr.response).list.join('<br>')
 })
 xhr.send()

3.1.3 数据提交

const xhr = new XMLHttpRequest()
xhr.open('请求方法', '请求url网址')
xhr.addEventListener('loadend', () => {
  console.log(xhr.response)
})

// 1. 告诉服务器,我传递的内容类型,是 JSON 字符串
xhr.setRequestHeader('Content-Type', 'application/json')
// 2. 准备数据并转成 JSON 字符串
const user = { username: 'itheima007', password: '7654321' }
const userStr = JSON.stringify(user)
// 3. 发送请求体数据
xhr.send(userStr)

3.2 Promise

3.2.1 Promise 使用步骤

Promise 对象用于表示一个异步操作的最终完成(或失败)及其结构值,成功或失败会关联后续的处理函数。

// 1. 创建 Promise 对象
const p = new Promise((resolve, reject) => {
 // 2. 执行异步任务-并传递结果
 // 成功调用: resolve(值) 触发 then() 执行
 // 失败调用: reject(值) 触发 catch() 执行
})
// 3. 接收结果
p.then(result => {
 // 成功
}).catch(error => {
 // 失败
})

实例代码:文章来源地址https://www.toymoban.com/news/detail-641668.html

/**
 * 目标:使用Promise管理异步任务
*/
// 1. 创建Promise对象
const p = new Promise((resolve, reject) => {
  // 2. 执行异步代码
  setTimeout(() => {
    // resolve('模拟AJAX请求-成功结果')
    reject(new Error('模拟AJAX请求-失败结果'))
  }, 2000)
})

// 3. 获取结果
p.then(result => {
  console.log(result)
}).catch(error => {
  console.log(error)
})

3.2.2 Promise 状态

  1. 待定(pending):初始状态,既没有被兑现,也没有被拒绝
  2. 已兑现(fulfilled):操作成功完成(调用.then(回调函数))
  3. 已拒绝(rejected):操作失败(调用.catch(回调函数))

3.2.3 Promise 和 XHR 应用小案例

/**
 * 目标:使用Promise管理XHR请求省份列表
 *  1. 创建Promise对象
 *  2. 执行XHR异步代码,获取省份列表
 *  3. 关联成功或失败函数,做后续处理
*/
// 1. 创建Promise对象
const p = new Promise((resolve, reject) => {
  // 2. 执行XHR异步代码,获取省份列表
  const xhr = new XMLHttpRequest()
  xhr.open('GET', 'http://hmajax.itheima.net/api/province')
  xhr.addEventListener('loadend', () => {
    // xhr如何判断响应成功还是失败的?
    // 2xx开头的都是成功响应状态码
    if (xhr.status >= 200 && xhr.status < 300) {
      resolve(JSON.parse(xhr.response))
    } else {
      reject(new Error(xhr.response))
    }
  })
  xhr.send()
})

// 3. 关联成功或失败函数,做后续处理
p.then(result => {
  console.log(result)
  document.querySelector('.my-p').innerHTML = result.list.join('<br>')
}).catch(error => {
  // 错误对象要用console.dir详细打印
  console.dir(error)
  // 服务器返回错误提示消息,插入到p标签显示
  document.querySelector('.my-p').innerHTML = error.message
})

3.3 封装简易 axios

3.3.1 核心封装代码

/**
 * 目标:封装_简易axios函数_获取省份列表
 *  1. 定义myAxios函数,接收配置对象,返回Promise对象
 *  2. 发起XHR请求,默认请求方法为GET
 *  3. 调用成功/失败的处理程序
 *  4. 使用myAxios函数,获取省份列表展示
*/
// 1. 定义myAxios函数,接收配置对象,返回Promise对象
function myAxios(config) {
  return new Promise((resolve, reject) => {
    // 2. 发起XHR请求,默认请求方法为GET
    const xhr = new XMLHttpRequest()
    xhr.open(config.method || 'GET', config.url)
    xhr.addEventListener('loadend', () => {
      // 3. 调用成功/失败的处理程序
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(JSON.parse(xhr.response))
      } else {
        reject(new Error(xhr.response))
      }
    })
    xhr.send()
  })
}

// 4. 使用myAxios函数,获取省份列表展示
myAxios({
  url: 'http://hmajax.itheima.net/api/province'
}).then(result => {
  console.log(result)
  document.querySelector('.my-p').innerHTML = result.list.join('<br>')
}).catch(error => {
  console.log(error)
  document.querySelector('.my-p').innerHTML = error.message
})

3.3.2 支持传递查询参数

function myAxios(config) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    // 1. 判断有params选项,携带查询参数
    if (config.params) {
      // 2. 使用URLSearchParams转换,并携带到url上
      const paramsObj = new URLSearchParams(config.params)
      const queryString = paramsObj.toString()
      // 把查询参数字符串,拼接在url?后面
      config.url += `?${queryString}`
    }

    xhr.open(config.method || 'GET', config.url)
    xhr.addEventListener('loadend', () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(JSON.parse(xhr.response))
      } else {
        reject(new Error(xhr.response))
      }
    })
    xhr.send()
  })
}

// 3. 使用myAxios函数,获取地区列表
myAxios({
  url: 'http://hmajax.itheima.net/api/area',
  params: {
    pname: '辽宁省',
    cname: '大连市'
  }
}).then(result => {
  console.log(result)
  document.querySelector('.my-p').innerHTML = result.list.join('<br>')
})

3.3.3 支持传递请求体数据

function myAxios(config) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()

    if (config.params) {
      const paramsObj = new URLSearchParams(config.params)
      const queryString = paramsObj.toString()
      config.url += `?${queryString}`
    }
    xhr.open(config.method || 'GET', config.url)

    xhr.addEventListener('loadend', () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(JSON.parse(xhr.response))
      } else {
        reject(new Error(xhr.response))
      }
    })
    // 1. 判断有data选项,携带请求体
    if (config.data) {
      // 2. 转换数据类型,在send中发送
      const jsonStr = JSON.stringify(config.data)
      xhr.setRequestHeader('Content-Type', 'application/json')
      xhr.send(jsonStr)
    } else {
      // 如果没有请求体数据,正常的发起请求
      xhr.send()
    }
  })
}

document.querySelector('.reg-btn').addEventListener('click', () => {
  // 3. 使用myAxios函数,完成注册用户
  myAxios({
    url: 'http://hmajax.itheima.net/api/register',
    method: 'POST',
    data: {
      username: 'itheima999',
      password: '666666'
    }
  }).then(result => {
    console.log(result)
  }).catch(error => {
    console.dir(error)
  })
})
```

到了这里,关于Ajax 笔记(三)—— Ajax 原理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Ajax】笔记-Axios与函数发送AJAX请求

    1、Axios是一个基于Promise的HTTP库,而Ajax是对原生XHR的封装; 2、Ajax技术实现了局部数据的刷新,而Axios实现了对ajax的封装。 ajax: 本身是针对MVC的编程,不符合现在前端MVVM的浪潮 基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案 JQuery整个项目太大,单纯使用

    2024年02月16日
    浏览(45)
  • 【Ajax】笔记-使用fetch函数发送AJAX请求

    fetch()是XMLHttpRequest的升级版,用于在JavaScript脚本里面发出 HTTP请求,本文章向大家介绍fetch()的用法,主要包括fetch()的用法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。 Fetch() 是 window.fetch 的 JavaScript polyfill。 全局 fetc

    2024年02月15日
    浏览(41)
  • AJAX初步与原理

           服务器和浏览器之间的通信,AJAX可以在浏览器内访问另一服务器。服务器是存储数据的电脑。 AJAX是用axios库,与服务器进行数据通信。          原理之后讲到Promise对象再讲,这里是axios函数内传参可以对服务器进行访问,然后对服务器访问成功内部会调用then传的

    2024年01月19日
    浏览(29)
  • AJAX原理及介绍

    传统的请求都有哪些? 直接在浏览器地址栏上输入URL。a 点击超链接 提交form表单 使用JS代码发送请求 window.open(url) document.location.href = url window.location.href = url … 传统请求存在的问题 页面全部刷新导致了用户的体验较差。 传统的请求导致用户的体验有空白期。(用户的体验是

    2024年02月08日
    浏览(28)
  • Ajax基本原理与实现

    Ajax 的全称是 Asynchronous JavaScript and XML (异步的JavaScript 和 XML),其中,Asynchronous 是 异步 的意思,它有别于传统web开发中采用的同步的方式。         不是新的编程语言,而是一种使用现有标准的新方法。         最大的优点是在不重新加载整个页面的情况下,可以

    2023年04月12日
    浏览(27)
  • Ajax_3 Ajax原理+ (XMLHttpRequest + Promise )+ 封装一个axios插件库,实现功能。

    01-Ajax原理-XMLHttpRequest 使用XMLHttpRequest 步骤: 创建XMLHttpRequest对象 配置请求方法请求url网址 监听loadend事件,接受响应结果 发起请求 需求:使用XMLHttpRequest对象与服务器通信 代码示例 02-XMLHttpRequest-查询参数 定义:浏览器提供给服务器的额外信息,让服务器返回浏览器想要的

    2024年02月14日
    浏览(45)
  • AJAX学习笔记6 JQuery对AJAX进行封装

    AJAX学习笔记5同步与异步理解_biubiubiu0706的博客-CSDN博客 AJAX请求相关的代码都是类似的,有很多重复的代码,这些重复的代码能不能不写,能不能封装一个工具类。要发送ajax请求的话,就直接调用这个工具类中的相关函数即可。  用JS发送AJAX请求回顾 响应结果一般是个字符串

    2024年02月09日
    浏览(38)
  • 【Ajax】笔记-Ajax案例准备与请求基本操作

    按钮+div 服务端简单修改:路由规则:/server 结尾的请求。 点击按钮请求服务器把响应体返回到div中。 修改HTML node server.js 请求参数

    2024年02月15日
    浏览(36)
  • day27--AJAX(bootstrap之modal,toast;接口文档的一些用法;AJAX原理)

    目录 Bootstrap之Modal: 显示和隐藏方法 通过自定义属性: 使用JS来控制弹框: Bootstrap之Toast: 接口文档一些用法: 删除图书: 图片上传: 图片上传步骤: 修改头像: AJAX原理: 使用XHLHTTPREQUEST四步走: XHLHTTPREQUEST--查询参数: XHLHTTPREQUEST--请求参数: Promise: Promise三种状态

    2024年02月07日
    浏览(61)
  • 什么是Ajax,其底层原理是什么

    原文合集地址如下,有需要的朋友可以关注 本文地址 合集地址 在我们平时做项目时,基本选择使用像axios和fetch这样的工具库来处理数据交互。这些工具库提供了简洁而强大的API,使得开发人员能够轻松地进行HTTP请求和处理响应。然而,很少有人真正了解它们背后的底层原

    2024年02月16日
    浏览(27)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包