js 原生异步请求 XMLHttpRequest请求

最新推荐文章于 2024-08-16 12:42:03 发布

五笔小哥

最新推荐文章于 2024-08-16 12:42:03 发布

阅读量1.4k

点赞数

分类专栏：代码知识文章标签： XMLHttpRequest请求 js 原生异步请求 ajax 原生请求

本文链接：https://blog.csdn.net/qq_43344133/article/details/90344102

版权

代码知识专栏收录该内容

42 篇文章 0 订阅

订阅专栏

js 原生异步请求 XMLHttpRequest请求

XMLHttpRequest 用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行数据更新。
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）；故在使用上请注意浏览器的兼容。

关于 XMLHttpRequest 对象的说明，在此不做详细叙述，所有的解释，都将会在下面的代码中做了注释，可以参考代码时进行理解。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>XMLHttpRequest 对象使用</title>
</head>
<body>
	<a href="./text.txt">点击我</a>
	<script>
		window.onload = function(){

			document.getElementsByTagName('a')[0].onclick = function(){
				//创建一个 XMLHttpRequest 对象
				var xmlhttp = null;
				if(window.XMLHttpRequest){
					// code for IE7, Firefox, Opera, etc.
					xmlhttp = new XMLHttpRequest();
				}else if(window.ActiveXObject){
					// code for IE6, IE5
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}

				//请求 url ，为避免缓存，可以加一个时间戳
				var url = this.href + '?t='+ new Date().getTime();

				//提交方式 get / post 
				var method = 'get';

				if (xmlhttp!=null){ //判断对象是否存在
					//如果是 post 请求，可在此处设置请求头信息
					// xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');

					//调用 XMLHttpRequest 对象的 open 方法；
					xmlhttp.open(method,url,true);

					//调用 XMLHttpRequest 对象的 send 方法；
					xmlhttp.send(null);

					//为 XMLHttpRequest 对象添加 onreadystatehange 响应函数；
					xmlhttp.onreadystatehange = function(){
						//判断响应成功，XMLHttpRequest 对象的 readystate 的属性值为 4 , status 值为： 200；
						//readystate 五个状态： 
						// 0 初始化 1 服务器连接已建立  2 请求已接收  3 请求处理中  4 请求已完成，响应已就绪
						if(xmlhttp.readystate == 4 && xmlhttp.status == 200){
							console.log(xmlhttp.responseText);
						}
					}
				}else{
					alert("Your browser does not support XMLHTTP.");
				}
			}
		}
	</script>
</body>
</html>

上面例子中体现了 XMLHttpRequest 对象的使用流程，以响应接收。具体的数据处理未做描述。

如有疑问可在下方评论留言！！！

分享就是一种快乐，拥有快乐，学会分享！！！