备案控制台
开发者社区 开发与运维 文章 正文

AJAX ------ 原生 AJAX

2023-06-12 46
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： AJAX ------ 原生 AJAX

原生 AJAX

GET 请求

一. 实例要求：点击按钮，发送GET请求，在 div 中做呈现 HELLO AJAX

e6933f4863ac42bc96fcc9b08c13602a.png

3282083e2a894cb5a534d51630e7c137.png

  1. 创建 server.js 文件
  //1.引入express
  const express = require('express');
  //2.创建应用对象
  const app = express();
  //3.创建路由规则
  //requset是对请求报文的封装
  //response是对相应报文的封装
  app.get('/server', (request, response)=>{
      // 设置响应头 设置允许跨域
      response.setHeader('Access-Control-Allow-Origin','*') //名字,值
      // 设置响应体
      response.send('HELLO AJAX')
  });
  //4.监听端口启动服务
  app.listen(8000, ()=>{
      console.log("服务已经启动,8000 端口监听中...");
  })
  1. 创建 1-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]
        //绑定事件
        btn.onclick = function(){
            // 1.创建对象
            const xhr = new XMLHttpRequest()
            const result = document.getElementById("result")
            // 2.初始化 设置请求方法和 url ?后面为设置的请求参数
            xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300')
            // 3.发送
            xhr.send()
            // 4.事件绑定 处理服务端返回的结果
            // on 当...时候 
            // readystate 是 xhr 对象中的属性
            // 表示状态 0(未初始化) 1(open方法调用完毕) 2(send方法调用完毕) 3(服务端返回了部分结果) 4(服务端返回了所有结果)
            // change 改变
            xhr.onreadystatechange = function(){
                // 判断 (服务端返回了所有结果)
                if(xhr.readyState === 4){
                    //判断响应状态码 200 404 403 401 500
                    // 2XX 成功
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理结果 行 头 空行 体
                        // 1.响应行
                        // console.log(xhr.status); //状态码
                        // console.log(xhr.statusText); //状态字符串
                        // console.log(xhr.getAllResponseHeaders()); //所有响应头
                        // console.log(xhr.response); //响应体
                        //设置 result 的文本
                        result.innerHTML = xhr.response
                    }else{
                    }
                }
            }
        }
    </script>
</body>
</html>

注意：现阶段，如果已经开启了一个服务，要把原先的服务关闭才能开启一个新服务

POST 请求

二. 实例要求：当鼠标移动到 div 上，发送POST请求，结果在 div 中做呈现 HELLO AJAX

60e497c0ee194ebba51d27cf2803061f.png

a20daf3149d3480b986c0ade9a171626.png

  1. 修改 server.js 文件
  //1.引入express
  const express = require('express');
  //2.创建应用对象
  const app = express();
  //3.创建路由规则
  //requset是对请求报文的封装
  //response是对相应报文的封装
  app.get('/server', (request, response)=>{
      // 设置响应头 设置允许跨域
      response.setHeader('Access-Control-Allow-Origin','*') //名字,值
      // 设置响应体
      response.send('HELLO AJAX')
  });
  // all可以接受任意类型的请求
  app.all('/server', (request, response)=>{
      // 设置响应头 设置允许跨域
      response.setHeader('Access-Control-Allow-Origin','*') //名字,值
      // 响应头
      response.setHeader('Access-Control-Allow-Headers','*') //*表示所有类型的头信息都接受
      // 设置响应体
      response.send('HELLO AJAX POST')
  });
  //4.监听端口启动服务
  app.listen(8000, ()=>{
      console.log("服务已经启动,8000 端口监听中...");
  })
  1. 创建 2-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(){
            // console.log("test");
            // 1.创建对象
            const xhr = new XMLHttpRequest()
            // 2.初始化 设置类型 URL
            xhr.open('POST','http://127.0.0.1:8000/server')
            // 设置请求头 
            // Content-Type（预定义）用来设置请求体内容的类型
            // application/x-www-form-urlencoded 参数查询字符串的类型，固定写法
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
            xhr.setRequestHeader('name','WEB')
            // 3.发送  ()内设置 POST 请求体
            xhr.send('a=100&b=200&c=300') //常用形式
            // xhr.send('a:100&b:200&c:300')
            // xhr.send('123')
            // 4.事件绑定
            xhr.onreadystatechange = function(){
                // 判断
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        // 处理服务端返回的结果
                        result.innerHTML = xhr.response
                    }
                }
            }
        })
    </script>
</body>
</html>

JSON 请求

三. 实例要求：键盘按下，发送请求，结果在 div 中做呈现 HELLO AJAX JSON（JSON响应）

f9f23fb28e4b49b3890d1209de255739.png

9e42c73a28db42b69c4dd99d699e6cee.png

1.修改 server.js 文件

  //1.引入express
  const express = require('express');
  //2.创建应用对象
  const app = express();
  //3.创建路由规则
  //requset是对请求报文的封装
  //response是对相应报文的封装
  app.get('/server', (request, response)=>{
      // 设置响应头 设置允许跨域
      response.setHeader('Access-Control-Allow-Origin','*') //名字,值
      // 设置响应体
      response.send('HELLO AJAX GET')
  });
  // all可以接受任意类型的请求
  app.all('/server', (request, response)=>{
      // 设置响应头 设置允许跨域
      response.setHeader('Access-Control-Allow-Origin','*') //名字,值
      // 响应头
      response.setHeader('Access-Control-Allow-Headers','*') //*表示所有类型的头信息都接受
      // 设置响应体
      response.send('HELLO AJAX POST')
  });
  app.all('/json-server', (request, response)=>{
      // 设置响应头 设置允许跨域
      response.setHeader('Access-Control-Allow-Origin','*') //名字,值
      // 响应头
      response.setHeader('Access-Control-Allow-Headers','*') //*表示所有类型的头信息都接受
      // 响应一个数据
      const data = {
          name: 'HELLO AJAX JSON'
      }
      //对对象进行字符串转换
      let str = JSON.stringify(data)
      // 设置响应体
      response.send(str)
  });
  //4.监听端口启动服务
  app.listen(8000, ()=>{
      console.log("服务已经启动,8000 端口监听中...");
  })
  1. 创建 3-JSON.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>JSON响应</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border:solid 1px #89b;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        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 < 300){
                        // 
                        // console.log(xhr.response);
                        // result.innerHTML = xhr.response
                        // 1.手动对数据转化
                        /* let data = JSON.parse(xhr.response)
                        console.log(data);
                        result.innerHTML = data.name */
                        // 2.自动转换
                        console.log(xhr.response)
                        result.innerHTML = xhr.response.name
                    }
                }
            }
        }
    </script>
</body>
</html>

nodemon 自动启动工具

  1. 安装：终端输入 npm install -g nodemon
  2. 启动服务：终端输入 nodemon server.js
    通过安装 nodemon 工具，在终端输入命令。这样再修改服务端代码时，就不用再重新启动服务了

IE 缓存问题

问题：在 IE 浏览器中，由于缓存机制，改变服务器发送的值时，页面并不会随之做出改变


解决方法：让每一个时间戳都刷新一次

具体写法：xhr.open("GET",'http://127.0.0.1:8000/ie?t=' + Date.now())

修改 server.js 文件

  //1.引入express
  const express = require('express');
  //2.创建应用对象
  const app = express();
  //3.创建路由规则
  //requset是对请求报文的封装
  //response是对相应报文的封装
  app.get('/server', (request, response)=>{
      // 设置响应头 设置允许跨域
      response.setHeader('Access-Control-Allow-Origin','*') //名字,值
      // 设置响应体
      response.send('HELLO AJAX GET')
  });
  // all可以接受任意类型的请求
  app.all('/server', (request, response)=>{
      // 设置响应头 设置允许跨域
      response.setHeader('Access-Control-Allow-Origin','*') //名字,值
      // 响应头
      response.setHeader('Access-Control-Allow-Headers','*') //*表示所有类型的头信息都接受
      // 设置响应体
      response.send('HELLO AJAX POST')
  });
  app.all('/json-server', (request, response)=>{
      // 设置响应头 设置允许跨域
      response.setHeader('Access-Control-Allow-Origin','*') //名字,值
      // 响应头
      response.setHeader('Access-Control-Allow-Headers','*') //*表示所有类型的头信息都接受
      // 响应一个数据
      const data = {
          name: 'HELLO AJAX JSON2'
      }
      //对对象进行字符串转换
      let str = JSON.stringify(data)
      // 设置响应体
      response.send(str)
  });
  // 针对 IE 缓存
  app.get('/ie', (request, response)=>{
      // 设置响应头 设置允许跨域
      response.setHeader('Access-Control-Allow-Origin','*') //名字,值
      // 设置响应体
      response.send('HELLO AJAX IE')
  });
  //4.监听端口启动服务
  app.listen(8000, ()=>{
      console.log("服务已经启动,8000 端口监听中...");
  })
  1. 创建 4-IE缓存问题.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>IE缓存问题</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border:solid 1px #258;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0]
        const result = document.querySelector('#result')
        btn.addEventListener('click',function(){
            const xhr = new XMLHttpRequest()
            xhr.open("GET",'http://127.0.0.1:8000/ie?t=' + Date.now())
            xhr.send()
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status <300){
                        result.innerHTML = xhr.response
                    }
                }
            }
        })
    </script>
</body>
</html>

请求超时 和 网络异常处理

1.点击按钮，当请求超出两秒时，提示请求超时

2.当断掉网络时（第二图设置为offline），点击按钮，提示网络出问题了

bc5ff6b75e3b457da8288d960417fb95.png

441e969d988741ff9009338426456f02.png

  1. 请求超时：客户机先发出请求,服务器响应这个请求。如果这之间的软件或硬件有问题,那个这个请求可能无法送答服务器,或者送达到服务器但服务器无回应。
  2. 网络异常：网络错误的代词，发生网络异常后浏览器会就错误的类型显示错误代码，如404 503等等。
  3. 修改 server.js 文件
  //1.引入express
  const express = require('express');
  //2.创建应用对象
  const app = express();
  //3.创建路由规则
  //requset是对请求报文的封装
  //response是对相应报文的封装
  app.get('/server', (request, response)=>{
      // 设置响应头 设置允许跨域
      response.setHeader('Access-Control-Allow-Origin','*') //名字,值
      // 设置响应体
      response.send('HELLO AJAX GET')
  });
  // all可以接受任意类型的请求
  app.all('/server', (request, response)=>{
      // 设置响应头 设置允许跨域
      response.setHeader('Access-Control-Allow-Origin','*') //名字,值
      // 响应头
      response.setHeader('Access-Control-Allow-Headers','*') //*表示所有类型的头信息都接受
      // 设置响应体
      response.send('HELLO AJAX POST')
  });
  app.all('/json-server', (request, response)=>{
      // 设置响应头 设置允许跨域
      response.setHeader('Access-Control-Allow-Origin','*') //名字,值
      // 响应头
      response.setHeader('Access-Control-Allow-Headers','*') //*表示所有类型的头信息都接受
      // 响应一个数据
      const data = {
          name: 'HELLO AJAX JSON2'
      }
      //对对象进行字符串转换
      let str = JSON.stringify(data)
      // 设置响应体
      response.send(str)
  });
  // 针对 IE 缓存
  app.get('/ie', (request, response)=>{
      // 设置响应头 设置允许跨域
      response.setHeader('Access-Control-Allow-Origin','*') //名字,值
      // 设置响应体
      response.send('HELLO AJAX IE')
  });
  // 延时响应
  app.get('/delay', (request, response)=>{
      // 设置响应头 设置允许跨域
      response.setHeader('Access-Control-Allow-Origin','*') //名字,值
      setTimeout(() => {
          // 设置响应体
          response.send('HELLO AJAX 延时响应')
      },3000)
  });
  //4.监听端口启动服务
  app.listen(8000, ()=>{
      console.log("服务已经启动,8000 端口监听中...");
  })
  1. 创建 5-超时与网络异常.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>请求超时与网络异常</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border:solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0]
        const result = document.querySelector('#result')
        btn.addEventListener('click',function(){
            const xhr = new XMLHttpRequest()
            // 超时设置 2s 设置 （超过两秒去取消执行）
            xhr.timeout = 2000
            // 超时回调
            xhr.ontimeout = function(){
                alert('网络异常，请稍后重试！')
            }
            // 网络异常回调
            xhr.onerror = function(){
                alert('网络出问题啦！')
            }
            xhr.open("GET",'http://127.0.0.1:8000/delay')
            xhr.send()
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status <300){
                        result.innerHTML = xhr.response
                    }
                }
            }
        })
    </script>
</body>
</html>

取消请求

需求：点击发送按钮，发送请求。点击取消按钮，瞬间取消请求。从而实现手动取消请求。

8099744991f34afc8348fef6155a073d.png

fb4690965d2b4b9fb47502c95daf8419.png

  1. server.js 文件不做变动
  2. 创建 6-取消请求.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>取消请求</title>
</head>
<body>
    <button>点击发送</button>
    <button>点击取消</button>
    <script>
        // 获取元素对象
        const btns = document.querySelectorAll('button')
        let x = null
        btns[0].onclick = function() {
            x = new XMLHttpRequest()
            x.open("GET",'http://127.0.0.1:8000/delay')
            x.send()
        }
        // abort方法
        btns[1].onclick = function(){
            x.abort()
        }
    </script>
</body>
</html>

abort()方法：可以停止一个XMLHttpRequest对象对HTTP的请求，把该对象恢复到初始状态。例如，如果某个操作需要一系列的操作顺序完成，而这其中出现任何异常，都会导致当前操作的结束，当检测到某个步骤出现异常时，使用abort()方法，中止当前的处理。


重复请求问题

问题：为避免用户重复发送同一个请求，从而给服务器带来巨大压力。可以在 6-取消请求.html 的基础上，实现当用户重复请求时，只保留最新一次的请求。


a5158445f2b24d53bcafd32aa57d4cd1.png

  1. 创建 7-重复请求问题 文件
<!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>重复请求问题</title>
</head>
<body>
    <button>点击发送</button>
    <script>
        // 获取元素对象
        const btns = document.querySelectorAll('button')
        let x = null
        // 标识变量
        let isSending = false //是否正在发送AJAX请求
        btns[0].onclick = function() {
            // 判断标识变量
            if(isSending) x.abort() //如果正在发送，则取消该请求，创建一个新的请求
            x = new XMLHttpRequest()
            // 修改标识变量的值
            isSending = true
            x.open("GET",'http://127.0.0.1:8000/delay')
            x.send()
            x.onreadystatechange = function() {
                if(x.readyState === 4){
                    // 修改标识变量
                    isSending = false
                }
            }
        }
        // abort方法
        btns[1].onclick = function(){
            x.abort()
        }
    </script>
</body>
</html>

不积跬步无以至千里 不积小流无以成江海

文章标签：
前端开发
数据格式
缓存
JSON
关键词：
ajax.js原生
前端杂货铺
目录
相关文章
你挚爱的强哥
|
8天前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
你挚爱的强哥
44 0
终究是雾散
|
8月前
|
前端开发
Ajax的原生写法
Ajax的原生写法
终究是雾散
35 0
zrblue
|
8天前
|
JSON 前端开发 JavaScript
原生 AJAX 详解
原生 AJAX 详解
zrblue
47 0
bug天选之子
|
10月前
|
XML 前端开发 JavaScript
原生ajax
ajax的概念:Ajax即Asynchronous Javascript And XML（异步JavaScript和XML),实际上就是前端js语言与后端交互的手段
bug天选之子
51 0
你挚爱的强哥
|
8天前
|
前端开发 JavaScript API
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本
你挚爱的强哥
27 0
你挚爱的强哥
|
8天前
|
存储 移动开发 JavaScript
【原生】sd.js帮助您简化繁重的获取数据、存储数据（CRUD）骚操作（吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持，在这两种情况下的系统只能使用ajax或者原生js请求后台数据）
【原生】sd.js帮助您简化繁重的获取数据、存储数据（CRUD）骚操作（吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持，在这两种情况下的系统只能使用ajax或者原生js请求后台数据）
你挚爱的强哥
30 0
快乐阿超
|
6月前
|
前端开发
一篇，让你会写原生ajax
一篇，让你会写原生ajax
快乐阿超
34 0
讓丄帝愛伱
|
6月前
|
JavaScript 前端开发
原生js实现ajax请求带请求头header
原生js实现ajax请求带请求头header
讓丄帝愛伱
84 0
讓丄帝愛伱
|
6月前
|
JavaScript 前端开发
js实现原生ajax
js实现原生ajax
讓丄帝愛伱
196 0
讓丄帝愛伱
|
6月前
|
JavaScript 前端开发
原生JS实现Ajax下载文件
原生JS实现Ajax下载文件
讓丄帝愛伱
76 0