AJAX_AJAX使用_express使用_解决IE缓存问题_AJAX请求超时与网络异常_取消请求

liaoai

已于 2022-03-06 21:33:16 修改

阅读量217

点赞数

分类专栏： ajax 文章标签：前端 ajax

于 2022-03-06 20:51:39 首次发布

本文链接：https://blog.csdn.net/liaoai/article/details/123317019

版权

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

- AJAX

AJAX

AJAX就是异步的JS和XML，通过AJAX可以在浏览器中向服务器发送异步请求，无刷新获取数据

1.XML

可扩展标记语言，用来存储和传输数据，（html呈现数据）

与HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签。

现在已被JSON取代

2.AJAX特点

1）优点

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

2）缺点

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

3.AJAX的使用（四步）

1）创建XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

2）设置请求信息

xhr.open(method, url);      //设置请求行的请求方式、请求路径
//可以设置请求头，一般不设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

3）发送请求

xhr.send(body)      //get请求不传body参数，只有post请求使用(请求体)，
					//请求方式是get时，请求参数拼接在请求路径url上

4）接收响应

//xhr.responseXML 接收 xml 格式的响应数据 
//xhr.responseText 接收文本格式的响应数据 

//事件绑定
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status>=200 && xhr.status <300){
            var text = xhr.responseText;
			console.log(text)
        }
    }
}

注：

xhr.readyState可以用来查看请求当前的状态

0: 表示 XMLHttpRequest 实例已经生成，但是 open()方法还没有被调用。
1: 表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定HTTP请求的头信息
2: 表示 send()方法已经执行，并且头信息和状态码已经收到。
3: 表示正在接收服务器传来的 body 部分的数据。
4: 表示服务器数据已经完全接收，或者本次接收已经失败了

4.express的使用

// 1.引入express
const express = require('express');	

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

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

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

5.解决IE缓存问题

ajax 只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。

解决方式：

xhr.open("get","/url?t="+Date.now())		//添加时间戳

6.AJAX请求超时与网络异常

//超时设置 若2秒无结果则取消请求
xhr.timeout = 2000;
//超时回调
xhr.ontimeout = function(){
    alert("网络异常")
}
//网络异常回调
xhr.onerror = function(){
    alert("你的网络可能出了点问题")
}

路由规则：

app.all('/delay',(request,response)=>{
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
	//设置响应体
    setTimeout(() => {
        response.send('延时响应');
    }, 3000);
});

7. `xhr.abort()` 取消请求

例：解决重复发送请求问题

发送请求后isSengding设为true。

判断isSending是否为true，为true取消请求。

<body>
    <button>点击发送</button>
    <script>
        const btns = document.querySelectorAll("button");
        let x = null;
        //表示变量
        let isSending = false;

        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;
                }
            }
        }
    </script>
</body>

liaoai

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
AJAX_AJAX使用_express使用_解决IE缓存问题_AJAX请求超时与网络异常_取消请求

文章目录AJAX1.XML2.AJAX特点1）优点2）缺点3.AJAX的使用（四步）1）创建XMLHttpRequest 对象2）设置请求信息3）发送请求4）接收响应4.express的使用5.解决IE缓存问题6.AJAX请求超时与网络异常7. `xhr.abort()` 取消请求AJAXAJAX就是异步的JS和XML，通过AJAX可以在浏览器中向服务器发送异步请求，无刷新获取数据1.XML可扩展标记语言，用来存储和传输数据，（html呈现数据）与HTML类似，不同的是HTML中都是预定义标签，而
复制链接

扫一扫