原生ajax

最新推荐文章于 2022-06-17 01:02:00 发布

粉毛桃子

最新推荐文章于 2022-06-17 01:02:00 发布

阅读量133

点赞数

本文链接：https://blog.csdn.net/weixin_50538763/article/details/111351781

版权

   <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>原生ajax</title>
</head>
<body>
	<div id="div1"></div>
</body>
<script type="text/javascript">

//  axios  fetch          XMLHttpRequest对象   异步引擎对象   ajax核心   jquery  $.ajax    vue-resoure    jsonp跨域

// ajax      a  async    j  javascript   a  and  x   xml  可扩展标记标记语言   json   局部刷新技术  一门综合了 html css js技术。
// 原理：  自己总结  

// 步骤:
// 1:创建异步XMLHttpRequest对象   
	var  xhr = null;
	if (XMLHttpRequest) {
		//主流浏览器
		xhr = new XMLHttpRequest();
	} else {
		//兼容ie6  ie7
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}

	// 2:打开连接   搭讪
    xhr.open("get","http://localhost:3000",true)

	// 3:发送请求    
	xhr.send(null)

	// 4：获取响应数据
	xhr.onreadystatechange = function(){
		if (xhr.status == 200 && xhr.readyState==4) {
			// var data = xhr.responseText;
			var data = xhr.response;
			console.log(data)
			show(data)
		}
	}


	function show(data) {
		document.getElementById("div1").innerHTML = data;
	}


</script>
</html>