ajax post 演示

最新推荐文章于 2021-08-05 11:53:59 发布

戴宇琪

最新推荐文章于 2021-08-05 11:53:59 发布

阅读量331

点赞数

分类专栏： WEB前端开发 PHP后端开发

本文链接：https://blog.csdn.net/yuqidai/article/details/52041767

版权

WEB前端开发同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

PHP后端开发

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<!--<script src="jquery.js"></script>-->
<script>
//$(function(){})	//阻塞 -> 同步

//非阻塞 - 异步
/*setTimeout(function() {
	alert(1);
}, 2000);

alert(2);*/

window.onload = function() {
	
	var oBtn = document.getElementById('btn');
	
	
	oBtn.onclick = function() {
		
		var xhr = null;
		try {
			xhr = new XMLHttpRequest();
		} catch (e) {
			xhr = new ActiveXObject('Microsoft.XMLHTTP');
		}
		
		xhr.open('post','2.post.php',true);
		//post方式，数据放在send()里面作为参数传递
		xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//申明发送的数据类型
		//post没有缓存问题
		//无需编码
		xhr.send('username=刘伟&age=30');
		
		xhr.onreadystatechange = function() {
			
			if ( xhr.readyState == 4 ) {
				if ( xhr.status == 200 ) {
					alert( xhr.responseText );
				} else {
					alert('出错了,Err：' + xhr.status);
				}
			}
			
		}
		
	}
}
</script>
</head>

<body>
	<input type="button" value="按钮" id="btn" />
</body>
</html>

戴宇琪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax post 演示

无标题文档-->//$(function(){}) //阻塞 -> 同步//非阻塞 - 异步/*setTimeout(function() { alert(1);}, 2000);alert(2);*/window.onload = function() { var oBtn = document.getElementById('btn'); oBtn.on
复制链接

扫一扫

专栏目录