您现在的位置是：首页 > 前端

当前栏目

AJAX--无量境神秘＜原生ajax详解＞

AJAX 详解 -- 原生神秘

2023-09-27 14:26:51 时间

文章目录

前言
1、🥤 什么是AJAX？
2、🧋 XML简介
3、🧃 XMLHttpRequest
- 构造函数
- 属性
4、🍶 AJAX 特点
- AJAX 优点
- AJAX 缺点
5、🍺 使用AJAX--原生GET请求
- - 🖥 server.js
  - ⌨️GET.html
6、🍔 使用AJAX--原生POST请求

前言

📔博主是一名大学在读本科生，主要学习方向是前端😊。
🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏🤩
🛠目前正在学习的是React框架，中间夹杂了一些基础知识的回顾⌨️
🍇希望可以和大家一起学习，一起进步，码出未来💪！！
🌈博客主页👉codeMak1r.的博客
👉关注✨点赞👍收藏📂

1、🥤 什么是AJAX？

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。
通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据
AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。
是⼀个默认异步执⾏机制的功能,AJAX分为同步（async = false）和异步（async = true）

😕同步任务：在主线程队列中，只有前一个任务完成后才会执行下一个任务。
必须得等到请求完成返回数据之后，才会执行后续的代码。
相当于生活中的排队，而且是不允许插队的那种。
也就是说，当JS代码加载到当前AJAX请求的时候会把页面里所有的代码停止加载，页面处于一个假死状态，当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态。
用户持续等待页面发送请求，消磨用户耐心。

😆异步任务：不进入主线程队列,而是进入异步队列,前一个任务完成与否不影响后一个任务的执行(不阻塞后续任务执行的任务)。
Ajax发送异步请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的。
一般默认值为true，异步。异步请求可以完全不影响用户的体验效果，
无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。

setTimeout(function (){
    console.log('执行了回调函数')
},3000)
console.log(111)
 
//    111
//    执行了回调函数

同步任务的顺序是：按顺序执行，先执行定时器，后打印出111，但是代码中呈现的是异步操作，顺序是：先打印出111，定时器时间到，再执行定时器内的回调。

⚠️注意
进行Ajax开发时，网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。如果不给予用户明确的回应，没有恰当的预读数据，或者对XMLHttpRequest的不恰当处理，都会使用户感到厌烦。通常的解决方案是，使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。

2、🧋 XML简介

XML 可扩展标记语言。
XML 被设计用来传输和存储数据。
XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，
全都是自定义标签，用来表示一些数据。

比如说我有一个学生数据： name = "孙悟空" ; age = 18 ; gender = "男" ; 
用 XML 表示： 
(自定义标签)
<student> 
  <name>孙悟空</name> 
  <age>18</age> 
  <gender>男</gender> 
</student>

现在已经被 JSON 取代了。

用 JSON 表示：

{"name":"孙悟空","age":18,"gender":"男"}

3、🧃 XMLHttpRequest

构造函数

点击👉XMLHttpRequest()

属性

此接口继承了 XMLHttpRequestEventTarget 和 EventTarget 的属性。

XMLHttpRequest对象方法与描述

方法	描述
`onreadystatechange`	只要 readyState 属性发生变化，就会调用相应的处理函数 (en-US)。
`readyState` (只读)	返回一个无符号短整型（unsigned short）数字，代表请求的状态码。
`response` (只读)	返回一个 ArrayBuffer、Blob、Document，或 DOMString，具体是哪种类型取决于 XMLHttpRequest.responseType 的值。其中包含整个响应实体（response entity body）。
`responseText` (只读)	返回一个 DOMString，该 DOMString 包含对请求的响应，如果请求未成功或尚未发送，则返回 null。
`responseType`	一个用于定义响应类型的枚举值（enumerated value）。
`responseURL` (只读)	返回经过序列化（serialized）的响应 URL，如果该 URL 为空，则返回空字符串。
`responseXML` (只读)	返回一个 Document，其中包含该请求的响应，如果请求未成功、尚未发送或是不能被解析为 XML 或 HTML，则返回 null。
`status` (只读)	返回一个无符号短整型（unsigned short）数字，代表请求的响应状态。
`statusText` (只读)	返回一个 DOMString，其中包含 HTTP 服务器返回的响应状态。与 XMLHTTPRequest.status 不同的是，它包含完整的响应状态文本（例如，“200 OK”）。

⚠️ readyState：readystate是XMLHttpRequest对象中的属性，表示状态 0 1 2 3 4

0:为初始化 
1:open()调用完毕 
2:send()方法调用完毕 
3:服务端返回部分的结果 
4:服务端返回了所有的结果

4、🍶 AJAX 特点

AJAX 优点

可以无需刷新页面与服务器进行通信
Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
允许你根据用户事件来更新部分页面内容

AJAX 缺点

没有浏览历史，不能回退
存在跨域问题（同源）
SEO不友好

5、🍺 使用AJAX–原生GET请求

需求：

点击按钮发送请求
url中设置请求参数 a=100 b=200
将响应体内容放到预设的div中

在这里插入图片描述

首先需要自己预设一个用来发送请求的服务器，使用到的技术是 node + express ，具体过程在本文中不做赘述，直接上代码：

🖥 server.js

// 引入express
const express = require('express')

// 创建应用对象
const app = express()

// 创建路由规则 
// request 对请求报文的封装
// response 对响应保文的封装
app.get('/server', (request, response) => {
  // 设置响应头  设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*')

  // 设置响应体
  response.send('codeMak1r.')
})
// 监听端口，启动服务
app.listen(8000, () => {
  console.log('服务已经启动，端口8000监听中...')
})

⌨️GET.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AJAX GET请求</title>
  <style>
    #result {
      width: 200px;
      height: 100px;
      border: solid 1px #90b;
    }
  </style>
</head>

<body>
  <button>点击发送请求</button>
  <div id="result"></div>
  <script>
    // 获取button元素
    const btn = document.getElementsByTagName('button')[0]
    const result = document.getElementById('result')
    // 绑定事件
    btn.onclick = function () {
      // 1.创建对象
      const xhr = new XMLHttpRequest()
      // 2.初始化对象 设置请求的方法 和 url
      xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200')
      // 3.发送请求
      xhr.send()
      // 4. 事件绑定，处理服务端返回的结果
      xhr.onreadystatechange = function () {
        // 状态为4时 处理服务端返回的结果
        if (xhr.readyState === 4) {
          // 判断响应的状态码 2xx表示成功
          if (xhr.status >= 200 && xhr.status < 300) {
            // 处理响应结果
            // 1.响应行
            console.log(xhr.status) // 状态码
            console.log(xhr.statusText) //状态字符串
            // 2.响应头
            console.log(xhr.getAllResponseHeaders) // 所有响应头
            // 3.响应体
            console.log(xhr.response)
            // 设置result div 的文本
            result.innerHTML = xhr.response
          } else { }
        }
      }
    }
  </script>
</body>
</html>

6、🍔 使用AJAX–原生POST请求

需求：

鼠标移入div，发送ajax请求，响应体内容放入div中

在这里插入图片描述

还是老样子，先预设一个server.js服务器：

🖥 server.js

// 引入express
const express = require('express')

// 创建应用对象
const app = express()

// 创建路由规则 
// request 对请求报文的封装
// response 对响应保文的封装
app.post('/server', (request, response) => {
  // 设置响应头  设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*')

  // 设置响应体
  response.send('codeMak1r.POST')
})

// 监听端口，启动服务
app.listen(8000, () => {
  console.log('服务已经启动，端口8000监听中...')
})

⌨️POST.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AJAX POST请求</title>
  <style>
    #result {
      width: 200px;
      height: 100px;
      border: solid 1px #903;
    }
  </style>
</head>
<body>
  <div id="result"></div>
  <script>
    const result = document.getElementById('result')
    // 绑定事件
    result.addEventListener("mouseover", function () {
      // 1.创建对象
      const xhr = new XMLHttpRequest()
      // 2.初始化
      xhr.open('POST', 'http://127.0.0.1:8000/server')
      // 3.发送
      xhr.send()
      // 4.事件绑定
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            // 处理服务端返回的结果
            result.innerHTML = xhr.response
          } else { }
        }
      }
    })
  </script>
</body>
</html>

🕹 AJAX-POST设置请求体

xhr.send('a:100&b:200')
或
xhr.send('a=100&b=200')

设置成功与否可以在网页控制台 => NetWork => server => Payload中查看

在这里插入图片描述

🕹 AJAX-POST设置请求头信息

设置请求头信息可以在xhr.open() 与 xhr.send() 之间添加：

xhr.open('POST', 'http://127.0.0.1:8000/server')
// 设置请求头信息 
// xhr.setRequestHeader('请求头名字','请求头值')
// Content-Type：请求体的类型 
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('a:100&b:200')

设置成功与否可以在网页控制台 => NetWork => server => Headers => Request Headers中查看

在这里插入图片描述

好啦～今天的文章分享就到这里了，如果有疑问或者文章出现错误的话请一定要联系我哟😎😎～

非常感谢你的阅读，你的支持将会是我最大的动力

👉关注✨点赞👍收藏📂

回见～

在这里插入图片描述

猜你喜欢

【正点原子FPGA连载】第十二章PS端RTC中断实验摘自【正点原子】DFZU2EG_4EV MPSoC之嵌入式Vitis开发指南
交叉验证 cross validation
Linux 环境变量配置
2015第31周日
让图标转起来
UWA 两周年庆活动第一弹！四场技术直播领跑六月充电季！
ie8升级ie11的方法
php删除数组中指定值的元素
191 DStream概述
还没适配 Android 12 的要抓紧了
oracle trunc(d1[,c1])
平头哥面试——数字IC面试流程整理
OpenCV:图像的颜色空间转换
WPF整理-为User Control添加依赖属性
Bridge to the digital world —— AR算法技术分享
用ip代替机器名访问sharepoint 站点

相关主题

jQuery Ajax总结
vue ajax 请求
[转]Ajax跨域请求
ajax表单提交

zl程序教程

当前栏目

AJAX--无量境神秘＜原生ajax详解＞

文章目录

前言

1、🥤 什么是AJAX？

2、🧋 XML简介

3、🧃 XMLHttpRequest

构造函数

属性

4、🍶 AJAX 特点

AJAX 优点

AJAX 缺点

5、🍺 使用AJAX–原生GET请求

🖥 server.js

⌨️GET.html

6、🍔 使用AJAX–原生POST请求

🖥 server.js

⌨️POST.html

🕹 AJAX-POST设置请求体

🕹 AJAX-POST设置请求头信息

相关文章