XMLHttpRequest 对象

kewin_edward

于 2013-08-02 11:41:21 发布

阅读量572

点赞数

分类专栏： xml

本文链接：https://blog.csdn.net/kewin_edward/article/details/9712881

版权

xml 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

XMLHttpRequest对象用于在后台与服务器交换数据

XMLHttpRequest能够在：

1.在不重新加载页面的情况下更新网页

2.在页面已加载后从服务器请求数据

3.在页面已加载后从服务器接收数据

4.在后台向服务器发送数据

XMLHttpRequest 对象

创建XMLHttpRequest对象的语法

xmlhttp = new XMLHttpRequest();

老版本Internet Explore(IE5和IE6）使用ActiveX对象：

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

<b> 标签呈现粗体文本效果。

<p> 标签定义段落。

p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

介绍下XMLHttpRequest的open方法

创建一个新的http请求，并指定此请求的方法、URL以及验证信息

语法
oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);

参数
bstrMethod
http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。

/*****
POST：用"POST"方式发送数据,可以大到4MB
GET：用"GET"方式发送数据,只能256KB
如果请求带有参数的化实用POST方式，POST方式将参数放置在页面的隐藏控件内
没有参数使用GET方式
对于请求的页面在中途可能发生更改的，也最好用POST方式
用GET方式可能会拿不到最新的信息
*****/

bstrUrl
请求的URL地址，可以为绝对地址也可以为相对地址。

varAsync[可选]
布尔型，指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。

bstrUser[可选]
如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。

bstrPassword[可选]
验证信息中的密码部分，如果用户名为空，则此值将被忽略。

看一段代码：

<html>
<head>
	<title>测试xmlHttpRequest</title>
	<script type="text/javascript">
		var xmlHttpRequest;
		function fun(){
			xmlHttpRequest = null;
			if(window.XMLHttpRequest){
				//code for IE7,Firefox,opera,etc
				xmlHttpRequest = new XMLHttpRequest();
			}else if(window.ActiveXObject){
				//code for IE5 ,IE6
				xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
			}
			if(xmlHttpRequest!=null){
				
				xmlHttpRequest.open("GET","http://www.baidu.com",false);
				xmlHttpRequest.send();
				alert("your browser supports XMLHttp");
				document.getElementById('A1').innerHTML=xmlHttpRequest.status;
				document.getElementById('A2').innerHTML=xmlHttpRequest.statusText;
				document.getElementById('A3').innerHTML=xmlHttpRequest.responseText;
			}else{
				alert("your browser does not support XMLHttp");
			}
		
		}
	</script>
</head>
<body>
	<p><b>Status:</b>
	<span id="A1"></span>
	</p>

	<p><b>Status text:</b>
	<span id="A2"></span>
	</p>
	
	<p><b>response text:</b>
	<span id="A3"></span>
	</p>
	
	<input type="button" οnclick="fun()" value="test">
	<button οnclick="fun()" >get xml</button>
</body>

</html>

再看下异步处理的代码：

<html>
<head>
	<title>测试xmlHttpRequest</title>
	<script type="text/javascript">
		var xmlHttpRequest;
		function fun(){
			xmlHttpRequest = null;
			if(window.XMLHttpRequest){
				//code for IE7,Firefox,opera,etc
				xmlHttpRequest = new XMLHttpRequest();
			}else if(window.ActiveXObject){
				//code for IE5 ,IE6
				xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
			}
			if(xmlHttpRequest!=null){
				xmlHttpRequest.onreadystatechange=state_change;
				xmlHttpRequest.open("GET","http://www.baidu.com",true);
				//异步处理 True 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应。
				xmlHttpRequest.send();
				alert("your browser supports XMLHttp");
								
			}else{
				alert("your browser does not support XMLHttp");
			}
		
		}
		
		function state_change(){
			if(xmlHttpRequest.readyState==4){
				/*
				readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，
				onreadystatechange 函数就会被执行。
				这是 readyState 属性可能的值：
				状态    描述 
				 0      请求未初始化（在调用 open() 之前） 
				 1      请求已提出（调用 send() 之前） 
				 2      请求已发送（这里通常可以从响应得到内容头部） 
				 3      请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应） 
				 4      请求已完成（可以访问服务器响应并使用它） 
				*/
				// 从服务器的response获得数据

				document.getElementById('A1').innerHTML=xmlHttpRequest.status;
				document.getElementById('A2').innerHTML=xmlHttpRequest.statusText;
				document.getElementById('A3').innerHTML=xmlHttpRequest.responseText;
			}
		}
	</script>
</head>
<body>
	<p><b>Status:</b>
	<span id="A1"></span>
	</p>

	<p><b>Status text:</b>
	<span id="A2"></span>
	</p>
	
	<p><b>response text:</b>
	<span id="A3"></span>
	</p>
	
	<input type="button" οnclick="fun()" value="test">
	<button οnclick="fun()" >get xml</button>
</body>

</html>

kewin_edward

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
XMLHttpRequest 对象

XMLHttpRequest对象用于在后台与服务器交换数据XMLHttpRequest能够在：1.在不重新加载页面的情况下更新网页2.在页面已加载后从服务器请求数据3.在页面已加载后从服务器接收数据4.在后台向服务器发送数据XMLHttpRequest 对象创建XMLHttpRequest对象的语法xmlhttp = new XMLHttpRequest();
复制链接

扫一扫