Ajax XmlHttp

最新推荐文章于 2023-01-29 21:49:37 发布

cecotw

最新推荐文章于 2023-01-29 21:49:37 发布

阅读量348

点赞数 1

分类专栏： HTTP XML

本文链接：https://blog.csdn.net/u013308496/article/details/50386302

版权

HTTP 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

XML

1 篇文章 0 订阅

订阅专栏

一、XmlHttp是什么？

最通用的定义为：XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。

现在的绝大多数浏览器都增加了对XmlHttp的支持，IE中使用ActiveXObject方式创建XmlHttp对象，其他浏览器：火狐、谷歌等通过window.XMLHttpRequest来创建xmlhttp对象。

二、XmlHttp对象参考

属性：

onreadystatechange	指定当readyState属性改变时的事件句柄。只写
readyState	返回当前请求的状态，只读
responseBody	将回应信息正文以unsigned byte数组形式返回，只读
responseStream	以Ado stream对象的形式返回响应头信息，只读
responseText	将响应信息作为字符串返回，只读
responseXML	将响应信息格式化为Xml Document对象并返回，只读
status	返回当前请求的http状态码，只读
statusText	返回当前请求的响应行状态，只读

方法：

abort	取消当前请求
getAllResponseHeaders	获取响应的所有的http头
getResponseHeader	从响应信息中获取指定此请求的方法、URL以及验证信息(用户名和密码)
open	创建一个新的http服务器并接收回应
send	发送请求到http服务器并接收回应
setRequestHeader	单独指定请求的某个http头

三、Xml实例

1、onreadystatechange

当请求被发送到服务器上时，我们需要执行一些基于响应的任务。（说明已经成功发送了请求，需要做下一步想的时候！）

每当readyState改变时，就会出发onreadystatechange事件。

XMLHttpRequest对象有三个重要属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	0（未初始化）对象已建立，但是尚未初始化（尚未调用open方法） 1（初始化）对象已建立，尚未调用send方法 2（发送数据）send方法已调用，但是当前的状态及http头未知 3（数据传送中）已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误。 4（完成）数据接收完毕，此时可以通过responseBody和responseText获取到完整的数据。
status	200: "OK" 404: 未找到页面

属性

描述

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

0（未初始化）对象已建立，但是尚未初始化（尚未调用open方法）
1（初始化）对象已建立，尚未调用send方法
2（发送数据）send方法已调用，但是当前的状态及http头未知
3（数据传送中）已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误。
4（完成）数据接收完毕，此时可以通过responseBody和responseText获取到完整的数据。

status

200: "OK"

404: 未找到页面

例1、创建XMLHttpRequest()对象

一定要在服务端测试不然会出现（ Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension）错误

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>XmlHttp</title>
	<script type="text/javascript">
		function loadXMLDoc(){
			var xmlhttp;
			if (window.XMLHttpRequest) {
				xmlhttp = new XMLHttpRequest();
			}else{
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange = function(){  //返回请求响应信息
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
				}
			}
			xmlhttp.open("GET","01.txt",true);
			xmlhttp.send();
		}
	</script>
</head>
<body>
	<div id="myDiv"><h1>CSDN</h1></div>
	<button type="button" οnclick="loadXMLDoc()">点击改变内容</button>
</body>
</html>

在相同目录下新建01.txt内容如下：

hello world

打开浏览器进行测试！

2、responseBody

返回某一个时的服务器响应数据

例2、测试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>XmlHttp</title>
	<script type="text/javascript">
	function load(){
		var xmlhttp = new XMLHttpRequest();
		xmlhttp.open("GET", "http://localhost/01.txt", false);
		xmlhttp.send();
		alert(xmlhttp.responseBody);
	}
	</script>
</head>
<body>
	<button type="button" οnclick="load()">点击</button>
</body>
</html>

3、responseStream

以Ado Stream对象的形式返回相应信息

4、responseText

将响应信息作为字符串返回

例3、测试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>XmlHttp</title>
	<script type="text/javascript">
	function load(){
		var xmlhttp = new XMLHttpRequest();
		xmlhttp.open("GET","01.txt",false);
		xmlhttp.send();
		alert(xmlhttp.responseText);
	}
	</script>
</head>
<body>
	<button type="button" οnclick="load()">点击</button>
</body>
</html>

5 、responseXml

将响应信息格式化为Xml Document对象返回

例4、测试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>XmlHttp</title>
	<script type="text/javascript">
	function load(){
		var xmlhttp = new XMLHttpRequest();
		xmlhttp.open("GET","01.xml",false);
		xmlhttp.send();
		alert(xmlhttp.responseXML.xml);
	}
	</script>
</head>
<body>
	<button type="button" οnclick="load()">点击</button>
</body>
</html>

6、statusText

返回当前请求的响应行状态

例5、测试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>XmlHttp</title>
	<script type="text/javascript">
	function load(){
		var xmlhttp = new XMLHttpRequest();
		xmlhttp.open("GET","01.xml",false);
		xmlhttp.send();
		alert(xmlhttp.statusText);
	}
	</script>
</head>
<body>
	<button type="button" οnclick="load()">点击</button>
</body>
</html>

7、abort

取消当前请求

8、getAllResponseHeaders

获取想用的所有http的头部信息

例6、测试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>XmlHttp</title>
	<script type="text/javascript">
	function load(){
		var xmlhttp = new XMLHttpRequest();
		xmlhttp.open("GET","01.xml",false);
		xmlhttp.send();
		alert(xmlhttp.getAllResponseHeaders());
	}
	</script>
</head>
<body>
	<button type="button" οnclick="load()">点击</button>
</body>
</html>

9、getResponseHeader

从响应信息中获取指定的Http头

例7、获取http头中的server列：当前web服务器的版本和名称。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>XmlHttp</title>
	<script type="text/javascript">
	function load(){
		var xmlhttp = new XMLHttpRequest();
		xmlhttp.open("GET","01.xml",false);
		xmlhttp.send();
		alert(xmlhttp.getResponseHeader("Server"));
	}
	</script>
</head>
<body>
	<button type="button" οnclick="load()">点击</button>
</body>
</html>

10、open

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

参数

bstrMethod

http方法，例如：POST、GET、PUT、及PROPFIND。大小写都可以。

bstrUrl

请求的URL地址，可以为绝对的地址也可以使用相对地址

varAsync[可选]

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

bstrUser[可选]

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

bstrPassword[可选]

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

11、send

发送请求到http服务器上并接收数据

欲通过此请求发送的数据

12、setRequestHeader

单独指定请求的某个http头

cecotw

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax XmlHttp

一、XmlHttp是什么？最通用的定义为：XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。现在的绝大多数浏览器都增加了对XmlHttp的支持，IE中使用ActiveXObject方式创建XmlHttp对象，其他浏览器
复制链接

扫一扫