AJAX异步请求的功能与实现

抠脚大汉在网络

已于 2023-10-24 09:29:05 修改

阅读量61

点赞数

分类专栏：前端 JAVAScript 文章标签： ajax 前端 javascript 1024程序员节

于 2023-10-20 14:08:27 首次发布

本文链接：https://blog.csdn.net/weixin_70137901/article/details/133944654

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

JAVAScript

5 篇文章 0 订阅

订阅专栏

AJAX异步请求

通过js代码模拟浏览器向服务器发送http请求，服务器响应之后进行捕获更新页面

异步请求:异步请求就是网速很慢的情况下请求数据但是只有后台服务器数据到达了网页当中，浏览器才会把整个网页的内容做修改

说白了就是整个页面框架都不会更新更新的只有js从服务器请求的数据

方法和属性	说明
req.open(method, url, async)	method：[GET\|POST] url：url async：[true(异步，默认) \| false(同步)]
req.send()	发送HTTP 请求
req.responseText	获得字符串形式的响应数据。
readyState	存有XMLHttpRequest 的状态。请求发送到后台后，状态会从0 到4 发生变化： 1：服务器连接已建立。 2：请求已接收。 3：请求处理中。 4：请求已完成，且响应已就绪。
req.onreadystatechange	每当readyState 属性改变时，就会调用该函数。
status	状态码

构建异步请求

初始化一个XMLHttpRequest实列对象
- var req = new XMLHttpRequest;
构造一个请求req.open(http方法, 要求的url地址, async 异/同 true/false)
- req.open(‘GET’,‘http://localhost/’,true/false);
发送请求rep.send();将构造好的请求进行发送
- req.send();
查看响应的内容req.responseText 获得字符串形式的响应数据
- req.responseText
通过req.readyState查看XMLHttpRequest状态 1-4状态 1为连接；2为请求已接收；3请求处理中；4请求已完成
- req.readyState

案例

用AJAXx完成异步请求flag

1.编写flag将flag写入php文件并写入sleep函数模拟网上很慢

<?php
sleep(10);
?>
flag{e10adc3949ba59abbe56e057f20f883e

2.编写异步请求
利用req.onreadystatechange进行控制读取flag的时间
等待页面加载完毕再去完成flag请求


<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<textarea id="flag"></textarea>
	<script>
		function get_flag(){
		var req= new XMLHttpRequest();
		
		req.open("GET","http://10.9.47.77/flag.php",true);
		req.send();
		
		req.onreadystatechange = function(){
        if(req.readyState == 4 && req.status == 200){
			flag=req.responseText;
			console.log(flag);
		document.getElementById('flag').textContent=flag;
		}
		}
	}
		get_flag();
	</script>
	</body>
</html>

实验结果:
在这里插入图片描述

抠脚大汉在网络

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX异步请求的功能与实现

通过js代码模拟浏览器向服务器发送http请求，服务器响应之后进行捕获更新页面异步请求:异步请求就是网速很慢的情况下请求数据但是只有后台服务器数据到达了网页当中，浏览器才会把整个网页的内容做修改说白了就是整个页面框架都不会更新更新的只有js从服务器请求的数据构建异步请求。
复制链接

扫一扫