ajax请求的实现，响应json数据，ie浏览器缓存请求超时和网络异常，取消重复请求

最新推荐文章于 2023-03-03 17:38:37 发布
最新推荐文章于 2023-03-03 17:38:37 发布
阅读量323 收藏
点赞数
分类专栏： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangaoyuan1999/article/details/118889012
版权

1.AJAX请求实现步骤

<!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>Document</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.getElementById('result');
        btn.onclick = function(){
            // 1.创建对象
            const xhr = new XMLHttpRequest();
            // 2.初始化设置请求方法和url
            xhr.open('GET','http://127.0.0.1:8000/server?a=200&b=300&c=300');
            // 3.发送
            xhr.send();
            // 4.事件绑定，处理服务端返回的结果
            // on  当...时
            // readystate 是 xhr对象中的属性，表示状态的值： 
            // 0未初始化，1表示open方法调用完毕，2.表示send方法调用完毕，3.表示服务端返回了部分结果，4表示服务端返回了所有结果
            // change当改变时候触发  onreadystatechange触发了四次
            xhr.onreadystatechange = function(){
                // 判断(服务端返回了所有结果)
                if(xhr.readyState === 4){
                    // 判断响应状态码
                    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>

可以用express写一个简单的本地服务器

// 1.引入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 JSON--2');
})

app.all('server',(request,response)=>{
    // 设置响应头，允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置响应头
    response.setHeader('Access-Control-Allow-Headers','*');
    response.send('HELLO AJAX');
})

app.all('/json-server',(request,response)=>{
    // 设置响应头，允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置响应头
    response.setHeader('Access-Control-Allow-Headers','*');
    const data ={
        name:'yangy'
    }
    // 对对象进行字符串的转换
    let str = JSON.stringify(data);
    // 设置响应体
    response.send(data);
})
// 针对IE缓存
app.get('/ie',(request,response)=>{

    // 设置响应头 允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置响应体
    response.send('HELLO IE--3');
})

//延时响应
app.get('/delay',(request,response)=>{

    // 设置响应头 允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    setTimeout(()=>{
        // 设置响应体
        response.send('延时响应');
    },3000)
})
// jQuery 服务
app.all('/jquery',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    const data = {
        name:'yangy'
    }
    response.send(JSON.stringify(data));
})
// axios服务
app.all('/axios',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    const data = {
        name:'yangy'
    }
    response.send(JSON.stringify(data));
})
// fetch服务
app.all('/fetch',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    const data = {
        name:'yangy'
    }
    response.send(JSON.stringify(data));
})

// 4.监听端口启动

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

app.all是处理所有的请求

2.Ajax发送post请求

<!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',()=>{
        // 1.创建对象
        const xhr = new XMLHttpRequest();
        // 2.初始化 设置类型与url
        xhr.open('POST','http://127.0.0.1:8000/server');
        // 设置请求头
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.setRequestHeader('name','yangy');
        // 3.发送
        xhr.send('a=100&b=200&c=300');
        // 4.事件绑定
        xhr.onreadystatechange = function(){
            // 判断
            if(xhr.readyState === 4){
                if(xhr.status>=200 && xhr.status<300){
                    console.log(xhr);
                    console.log(xhr.response);
                    // 处理服务端返回的结果
                    result.innerHTML = xhr.response
                }
            }
        }

        })
    </script>
</body>
</html>

3.响应json数据的两种方法

<!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>Document</title>
    <style>
        #result{
            width: 200px;
            height: 200px;
            border:solid 1px #89b;
        }
    </style>
</head>
<body>
        <div id="result"></div>
        <script>
            const result = document.getElementById('result');
            // 绑定键盘按下事件
            window.onkeydown = function(){
                // console.log('test');
                // 1.创建对象
                const xhr = new XMLHttpRequest();
                // 设置响应体数据的类型
                xhr.responseType = 'json';
                // 2..初始化请求类型，和url
                xhr.open('GET','http://127.0.0.1:8000/json-server');
                // 3.发送
                xhr.send();
                // 4.事件绑定
                xhr.onreadystatechange = function(){
                    if(xhr.readyState === 4){
                        if(xhr.status>=200 && xhr.status<300){
                            // console.log(xhr.response);
                            // 1.手动数据转换
                            // let data = JSON.parse(xhr.response);
                            // console.log(data);
                            // result.innerHTML = data.name;
                            console.log(xhr.response);
                            // 2.自动数据转换
                            result.innerHTML = xhr.response.name;

                        }
                    }
                }
            }
        </script>
</body>
</html>

4.针对IE浏览器缓存问题

在请求地址之后加入时间戳，可以避免ie浏览器的缓存问题

<!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>Document</title>
    <style>
        #result{
            width: 200px;
            height: 200px;
            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(){
            // 1.创建对象
            const xhr = new XMLHttpRequest();
            // 2.设置请求类型，请求url
            xhr.open('GET','http://127.0.0.1:8000/ie?t=' +Date.now());
            // 3.发送
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status>=200 && xhr.status<300){
                        result.innerHTML = xhr.response; 
                    }
                }
            }
        })
    </script>
</body>
</html>

5.请求超时和网络异常

<!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',()=>{
            // console.log('test');
            // 1.创建对象
            const xhr = new XMLHttpRequest();
            // 超时设置， 2s 设置
            xhr.timeout = 2000;
            //超时回调
            xhr.ontimeout = function(){
                alert('网络异常，请稍后重试!');
            }
            // 网路异常的回调
            xhr.onerror = function(){
                alert('网络似乎出现问题!');
            }
            // 2.声明请求类型和请求url
            xhr.open('GET','http://127.0.0.1:8000/delay');
            // 3.发送请求
            xhr.send();
            // 4.事件绑定
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status>=200 && xhr.status<300){
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>
</html>

6.取消请求

用abort取消请求

<!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 xhr1 = null;

        btns[0].onclick = function(){
           xhr1 = new XMLHttpRequest();
            xhr1.open('GET','http://127.0.0.1:8000/delay');
            xhr1.send();
        }
        btns[1].onclick = function(){
            xhr1.abort();
        }
    </script>
</body>
</body>
</html>

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 xhr1 = null;
        // 标识变量
        let isSending = false; //是否正在发送AJAX请求


        btns[0].onclick = function(){
            // 判断标识变量
            if(isSending){
                xhr1.abort();
            }
            // 如果正在发送，则取消该请求，创建一个新的请求
           xhr1 = new XMLHttpRequest();
           isSending = true;
            xhr1.open('GET','http://127.0.0.1:8000/delay');
            xhr1.send();
            xhr1.onreadystatechange = function(){
                if(xhr1.readyState === 4){
                    // 修改标识变量
                    isSending = false;
                }
            }
        }
    </script>
</body>
</body>
</html>
空谷丶幽兰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
10-15
主要介绍了jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作,结合实例形式分析了jQuery+Ajax请求json格式数据并渲染到html页面相关步骤与操作技巧,需要的朋友可以参考下
Springmvc处理ajax请求并返回json数据
10-15
在本文中，我们将深入探讨如何使用Spring MVC框架处理AJAX请求并返回JSON数据。这是一个常见的需求，特别是在构建现代Web应用程序时，需要与客户端进行异步交互。AJAX（Asynchronous JavaScript and XML）允许我们在...
Springboot 之 Filter 实现超大响应 JSON 数据压缩
天行健，君子以自强不息；地势坤，君子以厚德载物。
10-08 3867
简介项目中，请求时发送超大 json 数据外；响应时也有可能返回超大 json 数据。《Springboot 之 Filter 实现 Gzip 压缩超大 json 对象》实现了请求数据的 gzip 压缩。本篇通过 filter 实现对响应 json 数据的压缩。先了解一下以下两个概念：请求头：Accept-Encoding : gzip告诉服务器，该浏览器支持 gzip 压缩响应头：Content...
java.lang.NoClassDefFoundError: Could not initialize class org.apache.batik.bridge.CursorManager
喜羊羊love红太狼
07-12 2569
场景： 今天同事提出了一个工作流模型保存时提示保存错误，感觉很奇怪在windows上正常 之前在linux系统上跑也没有报错，经同事描述今天就替换了一下文件。 页面显示如下错误 <!doctype html><html lang="en"><head><title>HTTP Status 500 – Internal Server Error</title><style type="text/css">body {fon.
[转]IE超时设置
aghedoc1749的博客
09-28 847
更改 Internet Explorer 中默认的保持连接超时值 当 Internet Explorer 建立与 Web 服务器的永久性 HTTP 连接（通过使用 Connection:Keep-Alive 标头）时， Internet Explorer 会重用用于接收初始请求的同一个 TCP/IP 套接字，直到该套接字的空闲时间达到一分钟。 在该连接空闲一分钟后，Internet...
axios（尚硅谷）
毕业才是起点
08-06 2747
web前端axios技术
请求超时与网络异常处理
tgyzjy的博客
04-01 481
Web页面 <!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请求在数据量大的时候出现超时的解决方法
09-04
在开发Web应用时，我们经常会遇到使用Ajax进行数据交互的情况，特别是当数据量非常大时，可能会遇到Ajax请求超时的问题。这个问题不仅影响用户体验，也可能导致应用性能下降。本篇文章将详细探讨这个问题，并提供几...
SpringMVC环境下实现的Ajax异步请求JSON格式数据
10-22
在SpringMVC环境中实现Ajax异步请求JSON格式数据是一项常见的任务，这有助于创建更高效、交互性更强的Web应用程序。以下是一份详细的步骤指南和关键知识点解析： 首先，环境搭建是基础。确保你已经设置了标准的...
通过jsonp获取json数据实现AJAX跨域请求
10-20
JSONP（JSON with Padding）是一种解决浏览器同源策略限制，实现AJAX跨域请求的方法。在Web开发中，由于浏览器的安全策略，JavaScript通常不能从不同的域名下获取数据，即同源策略。但JSONP巧妙地利用了HTML允许跨域...
Ajax ie缓存问题 请求超时与网络异常处理
最新发布
努力！加油！！
03-03 596
AJAX前端笔记
$.getJSON()浏览器缓存处理
hua_ban_yu的博客
01-30 1500
$.getJSON() 方法使用 AJAX 的GET请求获取 JSON 数据，使用$.getJSON()请求发现新增或删除数据后在其他浏览器没有问题，但是ie浏览器页面显示数据并没有更新，查询了一下发现是缓存问题。 解决方法 1.在index.html文件的顶部加入以下声明： 网页的缓存是由HTTP消息头中的“Cache-control”来控制的，常见的取值有private、
jq 请求本地的json_浏览器 - 本地缓存
weixin_39542889的博客
12-04 158
cookie(h5之前的存储方式)每次同域名请求时都会传递存储数据，增加网络请求量，并造成主域的污染，并且不同浏览器的cookie的存储数量和大小不同var cookie = { /**设置cookie ** name 标识 ** value 值 ** options { ** 'path': '访问路径...
fetch清除浏览器中的json缓存
恰排骨芸豆包嘛的博客
03-11 1094
问题：使用fetch get json文件发现json更新后页面并不更新，是因为json文件被浏览器缓存了。 解决办法：在header中设置catch-control fetch('../assets/data.json', { method: 'GET', mode:'cors',// 允许发送跨域请求 credentials: 'include', headers: { .
JSON的数据交换、缓存问题和同步问题详解
人圭先生
05-21 3823
JSON 轻量级的数据交换格式相对于XML来说，JSON的解析速度更快，文档更小。JSON的格式{属性名:属性值,属性名:属性值,……}属性名的类型可以是string,number,boolean,null,object,且属性名必须用双引号引起来，如果属性值是字符串，也必须用双引号括起来。JSON表示数组格式:[value,value,value],其中value可以是基本的数据类型，也可以是o
Ajax与XML：在请求响应中的应用与考量
"掌握Ajax，第7部分:在请求和响应中使用XML" 在Ajax技术中，XML（可扩展标记语言）曾经是数据交换的主要格式，尤其是在早期，它被视为Ajax的核心组成部分，这主要归因于其名称中的“X”。然而，XML在实际应用中的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值