codeMak1r.

codeMak1r.

关注
发信
关注(28)粉丝(399)

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


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

前言

1、🥤 什么是AJAX？

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

  2. 通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：

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

  4. 是⼀个默认异步执⾏机制的功能,AJAX分为同步（async = false）和异步（async = true）

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

//    111
//    执行了回调函数

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

2、🧋 XML简介

  1. XML 可扩展标记语言。

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

  3. 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 的属性。

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

4、🍶 AJAX 特点

AJAX 优点

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

AJAX 缺点

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

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

需求：

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

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

首先需要自己预设一个用来发送请求的服务器，使用到的技术是 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请求

需求：

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

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

还是老样子，先预设一个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')

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

🕹 AJAX-POST设置请求头信息

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')

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

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

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

👉关注✨点赞👍收藏📂

回见～

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

06-10 14:45
Powered by LMLPHP ©2024 codeMak1r. 0.052970