ajax的原生写法

最新推荐文章于 2024-01-13 22:40:12 发布

Ersan_Yi

最新推荐文章于 2024-01-13 22:40:12 发布

阅读量756

点赞数

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

本文链接：https://blog.csdn.net/Ersan_Yi/article/details/76238343

版权

Javascript 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

ajax

1 篇文章 0 订阅

订阅专栏

原生的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" οnclick="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>