原生AJAX入门及http报文入门

于 2022-10-27 15:47:32 发布
阅读量374 收藏
点赞数
分类专栏： 前端 文章标签： ajax http javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52788258/article/details/127554158
版权

image-20221001152249505

AJAX

AJAX全称为Asynchronous JavaScript And XML，就是异步的Js和 XML。
通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势:无刷新获取数据。AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

XML可扩展标记语肓。
XML被设计用来传输和存储数据。
XML和 HTML类似，不同的是HTML中都是预定义标签，而xML中没有预定义标签,全都是自定义标签，用来表示一些数据。

现在已经被JSON取代

AJAX的优点

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

AJAX的缺点

1)没有浏览历史，不能回退

2)存在跨域问题(同源)

3)SEO不友好

HTTP请求报文

行	GET请求体空,POST都可 /S   HTTP/1.1

头	Host:
	 Cookie:
	 Content-type:
	 user-Agent:

空行

体	username = admin & password = admin

HTTP响应报文

行	HTTP/1.1 200 OK

头	Content-Type:
	 Content-length:2048
	 content-encoding:gzip

空行

体   响应体 HTML

​ 下载node.js 并安装

​ npm init --yes初始化

​ VS终端中npm i express 安装express框架

image-20221001155210650

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

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

//3.创建路由规则
app.get('/',(request,response)=>{
	//设置相应
	response.send('HELLO WORLD');
})

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

终端中输入node 文件名.js运行

前端HTML代码

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>AJAX GET 请求</title>
    </head>
    <style>
        #result{
            width: 300px;
            height: 100px;
            border: solid 1px rgb(255, 0, 0);
        }
    </style>
    <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');
                //3.发送
                xhr.send();
                //4.事件绑定，处理服务端返回结果
                //readystate 是xhr对象属性，分别有0.1.2.3.4状态
                xhr.onreadystatechange = function(){
                    //判断(服务端返回所有结果)
                    if(xhr.readyState === 4){
                        if(xhr.status >= 200 && xhr.status < 300 ){
                            //处理，2xx返回成功
                            //响应
                            /* console.log(xhr.status);
                            console.log(xhr.statusText);
                            console.log(xhr.getAllResponseHeaders());
                            console.log(xhr.response); */
                            
                            //设置 result 文本
                            result.innerHTML = xhr.response;
                        }else{

                        }
                    }
                }
                //console.log('test');
            }
        </script>
    </body>
</html>

JS AJAX逻辑

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

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

//3.创建路由规则
app.get('/server',(request,response)=>{
	//设置相应头,设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置允许跨域
	response.send('HELLO AJAX');
})

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

设置URL参数

问号分割地址，&分割其他参数

http://127.0.0.1:8000/server?a=200&b=50

发送POST请求

鼠标放入DIV时候发送请求并显示在框中

<!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 #f00;
        }
    </style> 
</head>
<body>
    <div id="result"></div>
    <script>
        //获取元素对象
        const result = document.getElementById("result");
        //绑定事件
        result.addEventListener("mouseover",function(){ 
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化 设置类型与URL
            xhr.open('POST','http://127.0.0.1:8000/server');
            //3.发送
            xhr.send();
            xhr.onreadystatechange  = function(){
                //判断
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        result.innerHTML = xhr.response;
                    }
                }
            }
            //console.log("test111")
        });
    </script>
</body>
</html>

server.js 加上app.post

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

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

//3.创建路由规则
app.get('/server',(request,response)=>{
	//设置相应头,设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置允许跨域
	response.send('HELLO AJAX');
})

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

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

POST 请求设置参数

在send函数中设置参数,注意前面的GET是在open中问号隔开参数

xhr.send('a=100&b=50');

请求体格式比较灵活，只要后端能处理你的请求数据，比如可以请求图片，前端格式什么的。。

设置请求头信息

open后设置

xhr.open('POST','http://127.0.0.1:8000/server');
//设置请求头
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

上面是HTTP头中预定义，查询字符类型

可以自定义非标准HTTP协议中请求头，需要后端支持，发送到后端

app.post改成.all并加上

//可接受全部响应头
	response.setHeader('Access-Control-Allow-Header','*')

服务端响应JSON数据

推荐用自动转换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>JSON响应</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #f00;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById('result');
        //绑定事件
        window.onkeydown = function(){
            //发送请求
            const xhr = new XMLHttpRequest();
            //设置响应体数据类型 自动转换JSON数据
            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){
                        //自动转换
                        result.innerHTML = xhr.response.name;
                        /* 服务器返回字符串，手动转化
                        let data = JSON.parse(xhr.response);
                        console.log(data);
                        result.innerHTML = data.name; */

                        /* console.log(xhr.response);
                        result.innerHTML = xhr.response; */
                    }
                }
            }
            //console.log('test222');
        }
    </script>
</body>
</html>

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

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

//3.创建路由规则
app.get('/server',(request,response)=>{
	//设置相应头,设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置允许跨域
	response.send('HELLO AJAX');
})

app.all('/json-server',(request,response)=>{
	//设置相应头,设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
	//可接受全部响应头
	response.setHeader('Access-Control-Allow-Header','*')
	const data = {
		name:"KUN.A.A"
	}
	//send只接受字符串和buffer，需要字符串转换
	var str = JSON.stringify(data);
    //设置允许跨域
	response.send(str);
})

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

nodemon自动重启文件变化启动服务

终端中输入

npm install -g nodemon

服务启动改成

nodemon xxxx.js

改后端JS代码不用重启

附录

如果出现无法使用nodemon

终端输入此命令解决

set-ExecutionPolicy RemoteSigned

IE缓存问题

IE虽然淘汰了，但这个缓存问题还是值得一看的

在多次发送与接受数据后，AJAX缓存可能会影响返回的结果

IE中默认加载缓存

需要在.open中加上参数

xhr.open('GET','http://127.0.0.1:8000/IE-server?='+Date.now());

原理：加上获取时间后，每次获取的时间戳不同，IE便不会加载缓存

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>IE 缓存问题</title>
    </head>
    <style>
        #result{
            width: 300px;
            height: 100px;
            border: solid 1px rgb(255, 0, 0);
        }
    </style>
    <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-server?='+Date.now());
                xhr.send();
                xhr.onreadystatechange = function(){
                    if(xhr.readyState === 4){
                        if(xhr.status >= 200 &&xhr.status < 300){
                            result.innerHTML = xhr.response;
                        }
                    }
                }
                //console.log('test2111');
            })
        </script>
    </body>
</html>

//IE缓存
app.get('/IE-server',(request,response)=>{
	//设置相应头,设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置允许跨域
	response.send('HELLO IE');
})

网络请求超时与网络异常处理

//超时设置
xhr.timeout = 2000;
//超时回调
xhr.ontimeout = function(){
	alert("连接超时,请检查网络");
}
//网络异常回调
xhr.onerror = function(){
	alert("网络异常,请检查网络");
}

//延时相应,模拟超时
app.get('/delay',(request,response)=>{
	//设置相应头,设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
	setTimeout(() => {
		response.send('HELLO IE');
	}, 3000);
})

HTML完整代码

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>超时处理</title>
    </head>
    <style>
        #result{
            width: 300px;
            height: 100px;
            border: solid 1px rgb(255, 0, 0);
        }
    </style>
    <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.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;
                        }
                    }
                }
                //console.log('test2111');
            })
        </script>
    </body>
</html>

实际开发中alert过于激进，超时回调中多用DIV调用或者遮罩层

image-20221002181556990

设置浏览器为离线状态

AJAX取消请求

		//获取元素对象
        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();
        }

记得 let x = null 因为处于不同局部变量中

同时x 不能设置为const

请求重复发送问题

防止用户在网络差时多次请求增加服务端压力。

防抖节流

设置一个标识变量即可，当标识变量说明正在发送时直接取消，创建新请求

		//获取元素对象
        const btns = document.querySelectorAll('button');
        var x = null;
        //标识变量
        let flag = false;
        btns[0].onclick = function(){
            //判断标识变量
            if(flag)//如果正在发送，直接取消，创建一个新请求
                x.abort();
            x = new XMLHttpRequest();
            //修改标识变量值
            flag = true;
            x.open('GET','http://127.0.0.1:8000/delay');
            x.send();
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    //修改标识变量
                    flag = false;
                }
            }
        }

        //abort 取消请求
        btns[1].onclick = function(){
            x.abort();
        }
Kun.A.A
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
云原生入门基础.zip
06-02
阿里云栖社区云原生基础入门手册，供大家下载学习，侵权删除
原生AJAX写法实例分析
10-24
主要介绍了原生AJAX写法实例分析,以一个完整的原生Ajax实例分析了Ajax的实现技巧,有助于加深对Ajax的理解,需要的朋友可以参考下
使用express 创建web服务器
u013108007的博客
09-12 528
##http协议简单了解 例如：`http://localhost:9527/news?pa protocal：http hostname: localhost port: 9527，如果没有写端口号，默认为80 path: /news query: ?page=1&limit=10，表示有两个信息传递过来{page:1, limit:10} hash：2，hash一般用作锚链接，服务器一般不需要这个信息 如果url地址成功的找到了服务器，客户端会组装一个特别的消息格式发送给服务器，称之为请求
ajax 解决跨域请求问题&&IE缓存问题
LVowe999的博客
04-27 206
AJAX解决跨域请求问题
原生ajax 设置get请求参数和请求头信息和发送 post请求
sharesb的博客
04-15 5988
把这两个地方添加或者修改即可 设置请求头信息 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 设置post的请求体 xhr.send('a:10&b=20'); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-..
response.setHeader("Access-Control-Allow-Origin", "*"); 一个无敌重要的参数
GOOD LUCK
08-06 2万+
前几日前端妹子一直向我哭诉，前台无法获取到后台数据，问了我无数次我用的是GET还是POST方法，我很“无辜”，信誓旦旦地拍胸保证，我用的是GET方法，接口是可以直接获取到数据的，要不然是连接失败，要不然就是只获取到了一个Object，我们还一起百度了原因。。万万没想到只需要下面几行代码。 response.setCharacterEncoding("UTF-8"); response....
跨域漏洞Response header配置 Access-Control-Allow-Origin
liao0801_123的博客
12-09 2万+
浏览器只允许请求当前域的资源，而对其他域的资源表示不信任。那怎么才算跨域呢？ 请求协议http,https的不同 域domain的不同 端口port的不同 好好好，大概就是这么回事啦，下面我们讲2种中规中矩的办法：CORS，JSONP document.domain，window.name，web sockets就先别闹了，腰不好 : ) 2、CORS 这是W3C的标准，全称是"跨域资源...
Javascript原生ajax请求代码实例
10-15
主要介绍了Javascript原生ajax请求代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
原生ajax使用
11-29
本代码是原生ajax使用demo，详情请查看博客 原生Ajax使用笔记
原生Ajax 和jQuery Ajax的区别示例分析
10-25
主要介绍了原生Ajax 和Jq Ajax的区别示例分析,需要的朋友可以参考下
Access-Control-Allow- 设置跨域资源共享CORS详解
zhangge3663的博客
05-31 4760
跨域访问的项目常在过滤器或者拦截器中添加如下配置: response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Methods", "POST,OPTIONS,GET"); response.setHeader("Access-Control-Max-Age", "3600"); response.setHeader("Access-Control-Allow-Hea
解决：Request header field Content-Type is not allowed by Access-Control-Allow-Headers
愿我如星君如月 ... 夜夜流光相皎洁 ...
12-20 2万+
1. 前端 vue 工程 post 请求后端接口，报错： Request header field Content-Type is not allowed by Access-Control-Allow-Headers 前端请求方式： this.$ajax({ method: "post", url: this.GLOBAL.BASE_URL + "/...
response响应的一些响应头配置
qq106140的博客
12-29 2305
servletResponse.setHeader("Access-Control-Allow-Origin","*") 表示所有域都可请求 即支持跨域 servletResponse.setHeader("Access-Control-Allow-Methods","*") 表示所有请求方式都可 servletResponse.setHeader("Access-Control-Allow-Headers","content-type") 配置自定义头信息 servletResponse.setHe
response设置响应头，解决跨域请求问题，No 'Access-Control-Allow-Origin' header is present on the requested resource
热门推荐
益添的博客
05-15 25万+
今天被跨域请求的问题困扰了很久，跨域一句话的理解就是：服务端和请求端的地址不一样。跨域的详细介绍可以参考：浏览器和服务器实现跨域(CORS)判定的原理，这里不多赘述。我出现的问题，主要就是客户端向发送了服务端请求，服务器已经能返回数据，但是浏览器不接收。Failed to load http://localhost:8080/XXXX: No 'Access-Control-Allow-Origi...
response错误：Request header field Content-Type is not allowed by Access-Control-Allow-Headers in prefl
zpz_326的博客
01-22 1266
response.setHeader("Access-Control-Allow-Origin", "*");           response.setHeader("Access-Control-Allow-Methods", "POST, GET");           response.setHeader("Access-Control-Max-Age", "3600");   
Access-Control-Allow-Headers 列表中不存在请求标头
CherryCola_zjl的博客
11-10 3244
问题：跨域请求，大部分浏览器都可以请求，部分（ie，ipone5/6等机型，微信pc端）终端缺发不出请求。。。 原因：ie以及低版本Safari 等浏览器不支持跨域请求时，后台配置Access-Control-Allow-Headers为* 解决办法：修改后台跨域配置 response.setHeader(“Access-Control-Allow-Headers”, "authorization,Authorization,DNT,X-CustomHeader,“Keep-Alive,User-Agent
axios设置允许跨域，设置headers的问题
zy451的博客
05-14 3432
在跟随视频学习时遇到一个问题 检查代码后发现是没有设置headers，添加 response.setHeader('Access-Control-Allow-Headers', '*'); 解决问题 若还有错误 可以在引入axios的script中加入 crossorigin="anonymous" 若还不行，可以尝试将axios的headers中的内容改为 headers: { name: 'zy451',
ajax从入门到精通
最新发布
07-29
7. AJAX框架和库：除了原生的AJAX技术，还有一些流行的AJAX框架和库，如jQuery、Vue.js、React等。它们可以简化AJAX开发过程，提供更便捷的API和功能。 以上是AJAX从入门到精通的一些关键知识点，希望能帮助你更好...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Kun.A.A

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值