AJAX是什么?手把手教你如何使用原生AJAX发送请求

🎄原生AJAX

1.1 🎭AJAX 简介

AJAX全称为Asynchronous JavaScript And XML，就是异步的JS和XML。

通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。（类似刷朋友圈，刷微博动态）

AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

1.2 🎎XML简介

XML（Extensible Markup Language）可扩展标记语言。

XML被设计用来传输和存储数据。

XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。

以前都是采用XML进行数据交换，

比如说我有一个学生数据：
	name="孙悟空"; age=18; gender="男";
用XML表示：

  孙悟空
  18
  男

现在已经被JSON取代了。

用JSON表示：
{"name":"孙悟空","age":18,"gender":"男"}

什么是XMLHttpRequest?

1. XMLHttpRequest是基于XML的HTTP请求，是一个浏览器接口，使得Javascript可以进行HTTP(S)通信，这就是我们熟悉的AJAX。

2. XMLHttpRequest可以向不同域名的服务器发出HTTP请求，叫做CORS

   • 浏览器要支持CORS

   • 服务器允许跨域：响应头需要添加一下选项

     self.set_header('Access-Control-Allow-Origin', '*')
     self.set_header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS')
     self.set_header('Access-Control-Max-Age', 1000)
     self.set_header('Access-Control-Allow-Headers', '*')
     self.set_header('Content-type', 'application/json')
     

1.3 🎨AJAX的特点 1.3.1 1️⃣AJAX的优点

• 可以无需刷新页面而与服务器端进行通信。
• 允许你根据用户事件来更新部分页面内容。

1.3.2 2️⃣AJAX的缺点

1. 没有浏览历史，不能回退
2. 存在跨域问题（同源）（a网页不能向b网页发送AJAX请求）
3. SEO（搜索引擎优化）不友好

HTTP（hypertext transport protocol）协议【超文本传输协议】，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

浏览器给服务器发送请求报文：

http协议报文的格式与参数：

1. （请求行）请求类型：get，post，put… / URL / http协议的版本

2. （请求头）：Host：值

   ​ Cookie：值

   ​ Conent-type(请求体的类型)：值

   ​ User-Agent：值

3. 空行

4. （请求体）：get（请求体为空），post（请求体可以不为空）

服务器给浏览器返回的结果（响应报文）：

1. （响应行）： http协议的版本 / 响应状态码（status） / 响应状态字符串（statusText）

2. （响应头）（getAllResponseHeaders）：和请求体格式一样

3. 空行

4. （响应体）（response）：主要返回的结果

   ​ < <

   ​ < < < < 尚硅谷 < < < <

   ​ < <

1.4 🎵使用AJAX发送GET请求 1.4.1 ✅案例

需求：

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

效果如下：

设置一个服务器，用来发送请求，返回响应结果，node+express。

server.js

// 1.引入express
const { response } = require('express')
const express = require('express')

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

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

  // 设置响应体
  response.send('Hello AJAX')
})

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

GET.html

DOCTYPE html>



  
  
  
  AJAX GET 请求
  
    #result {
      width: 200px;
      height: 100px;
      border: solid 1px #90b;
    }
  



  点击发送请求
  

  
    // 获取button元素
    const btn = document.getElementsByTagName('button')[0];
    const result = document.getElementById('result')
    // 绑定事件
    btn.onclick = function () {
      // 1.创建对象,新建一个XMLHttpRequest实例
      const xhr = new XMLHttpRequest()
      // 2.初始化 设置请求方法和url,向远程主机发出一个HTTP请求
      xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
      // 3.发送
      xhr.send()
      // 4.事件绑定 处理服务端返回的结果,等待远程主机做出回应。
      // 这时需要监控XMLHttpRequest对象的状态变化，指定回调函数 
      // 对onreadystatechange进行拆解分析：
      // on（when）当...时候
      // readystate 是 xhr对象中的属性，表示状态 
      // readystate属性有五个值：0（未初始化） 1（open方法已经调用完毕） 2（send方法已经调用完毕） 
      //                       3（表示服务端返回了部分的结果） 4（服务端返回了所有的结果）
      // change 当改变的时候触发
      xhr.onreadystatechange = function () {
        // 判断(如果readyState=4，表示服务端返回了所有的结果)
        if (xhr.readyState === 4) {
          // 判断响应的状态码 200 404 403 401 500
          // 2xx 表示成功
          if (xhr.status >= 200 && xhr.status  {
  // 设置响应头 设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*')

  // 设置响应体
  response.send('Hello AJAX post')
})

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

POST.html

DOCTYPE html>



  
  
  
  AJAX POST 请求
  
    #result {
      width: 200px;
      height: 100px;
      border: solid 1px #903;
    }
  



  
  
    // 获取元素对象
    const result = document.getElementById('result')
    //绑定事件
    result.addEventListener('mousemove', function () {
      // 1.创建对象
      const xhr = new XMLHttpRequest()
      // 2.初始化 设置类型与URL
      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  {
  // 设置响应头 设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*')
  // 响应头 允许自定义的响应头
  response.setHeader('Access-Control-Allow-Headers', '*')

  // 响应一个数据
  const data = {
    name: 'atguigu'
  }
  // 对对象进行字符串的转换
  let str = JSON.stringify(data)

  // 设置响应体
  response.send(str)
})

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

当响应的数据是一个对象时，由于send()方法只能接收字符串类型，所以要对这个对象进行转换，转换成字符串类型。

JSON.html

DOCTYPE html>


  
  
  
  JSON响应
  
    #result {
      width: 200px;
      height: 100px;
      border: solid 1px #903;
    }
  



  
  
    const result = document.getElementById('result')
    // 绑定键盘按下事件
    window.onkeydown = function () {
      // 发送请求
      const xhr = new XMLHttpRequest()
      // 设置响应体数据的类型
      xhr.responseType = 'json'
      // 初始化
      xhr.open('GET', 'http://127.0.0.1:8000/json-server')
      // 发送
      xhr.send()
      // 事件绑定
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status