ajax--xhr属性方法&post实例

本文介绍如何使用XHR发起POST请求,并详细解释了设置请求头、发送表单数据的过程及响应处理方式。

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


xhr的属性和方法列表




xhr.onreadystatechange = function(){
			/*var pg = document.getElementById('zt');
			pg.innerHTML=pg.innerHTML + '状态现在变成' + this.readyState + '<br/>';*/

			if(this.readyState == 4){
				var pg = document.getElementById('zt');
				var str = '';
				str = str + "状态码是" + this.status + '<br/>';
				str = str + "状态文字" + this.statusText + '<br/>';
				str = str + "头信息里的" + this.getResponseHeader('Content-Length') + '<br/>';
				str = str + "取所有头信息" + this.getAllResponseHeaders();
				pg.innerHTML = str;
			}
		}

效果图如下




post方法



网页是填写2个并提交的页面

<!-- 如果onsubmit里的方法没有得到true就会不执行action -->
<form action="./3post.php" method="post" target="regzone" onsubmit="return post();">
	用户名<input type="text" name="username" />
	密码<input type="text" name="password" />
	<input type="submit" value="提交">
</form>
<iframe name='regzone' width="0" height="0" frameborder="0"></iframe>


js里这些原封不动

<script type="text/javascript">
function createXHR(){
		var xhr = null;
		if(window.XMLHttpRequest){
			xhr=new XMLHttpRequest();
		}else if(window.ActiveXObject){
			xhr=new	ActiveXObject('Microsoft.XMLHTTP');
		}
		return xhr;
	}
	// 创造xhr
	var xhr=createXHR();




下面post主要改变如下


1接受post数据

2请求头添加 type

3send post 数据


function post(){
		// 获得post来的数据 username  
		var un=document.getElementsByName('username')[0].value;
		var pw=document.getElementsByName('password')[0].value;

		
		// 打开连接
		xhr.open('POST','./3post.php',true);


		// 建议这边就绑定
		xhr.onreadystatechange = function(){
			if (this.readyState == 4) {
				alert(this.responseText);
			}
		}	

		// 因为是post所以是 这个 一定要
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		// 发送请求,这里开始和get不一样了,post需要发送表单填写的
		xhr.send('username='+un+'&password='+pw);


// 有这个就不会action到那里去了
		return false;

}





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值