ajax的原生写法

最新推荐文章于 2022-12-20 13:51:22 发布

Ersan_Yi

最新推荐文章于 2022-12-20 13:51:22 发布

阅读量873

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript ajax 文章标签： JavaScript ajax html

本文链接：https://blog.youkuaiyun.com/Ersan_Yi/article/details/76238343

Javascript 同时被 2 个专栏收录

2 篇文章

订阅专栏

ajax

1 篇文章

订阅专栏

本文介绍了一个使用原生Ajax技术动态更新HTML标签内容的例子。通过一个按钮触发Ajax请求，向服务器发送数据，并将服务器返回的数据追加到指定的HTML元素中。此例展示了基本的Ajax请求流程及回调函数的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生的ajax的来操作html标签的变化

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ajax</title>
	<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
	<p id="p">我是段落</p>
	<button type="" id="but" onclick="n_ajax()">按钮</button>
</body>
<script>
//原生的ajax
	
	var p = document.getElementById('p');
	var xhr = new XMLHttpRequest();

	function n_ajax(){
		var data = 'name=hello world!';
		xhr.open("POST", "./a.php", true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  // 添加http头，发送信息至服务器时内容编码类型
        xhr.send(data);
		xhr.onreadystatechange = function(){
		alert(xhr.readyState);
			if(xhr.readyState == '4' ){
				if(xhr.status == '200'){
					var ppt = p.innerHTML += xhr.responseText;
				}
			};
		};
		
	}		
</script>
</html>