Web前端学习 | Ajax

最新推荐文章于 2022-10-19 12:29:57 发布

JacobTsang

最新推荐文章于 2022-10-19 12:29:57 发布

阅读量146

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/weixin_41594045/article/details/98470346

版权

Web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Ajax是Web前端实现异步数据交互的重要技术，它利用XMLHttpRequest对象进行后台与服务器的通信。onload回调函数在数据传输完成时执行，open()函数配置请求参数，包括方法、URL和同步模式，随后send()函数发送请求。

摘要由CSDN通过智能技术生成

ajax其实是代替手工输入url向server申请资源的一个方法。

XMLHttpRequest 对象的 onload 回调函数是在异步请求加载完成后所执行的函数，当JavaScript 监测到请求的数据全部传输完成后就会触发该函数。

而 open() 函数设置异步请求的 method、URL 和同步方式等参数，执行 open() 后再执行 send() 函数才开始向服务器发送请求。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
</head>
<script type="text/javascript">
	function getdata(a){
		if(a == 'WeChat.html'){
			var req = new XMLHttpRequest();	//XMLHttpRequest Object专门用于与server连接	
			req.open("GET","http://127.0.0.1:8020/web前端开发/JS/ajax/"+a);
			req.send();		//送出连线			
			req.onload = function(){
				alert(this.responseText);
			}

		}
		if(a == 'QQ.html'){
			var req = new XMLHttpRequest();	//XMLHttpRequest Object专门用于与server连接	
			req.open("GET","http://127.0.0.1:8020/web前端开发/JS/ajax/"+a);
			req.send();		//送出连线			
			req.onload = function(){
				var content = window.document.getElementById('content');
				content.innerHTML = this.responseText;	
			}

		}
	}
	
</script>



<body>
	<button onclick="getdata('WeChat.html');">WeChat</button>
	<button onclick="getdata('QQ.html');">QQ</button>
	<hr />
	<div id="content"></div>
</body>
</html>