Ajax XmlHttp
2015-12-23 13:02
543 查看
一、XmlHttp是什么？
最通用的定义为：XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。
现在的绝大多数浏览器都增加了对XmlHttp的支持，IE中使用ActiveXObject方式创建XmlHttp对象，其他浏览器：火狐、谷歌等通过window.XMLHttpRequest来创建xmlhttp对象。
二、XmlHttp对象参考
属性：
方法：
三、Xml实例
1、onreadystatechange
当请求被发送到服务器上时，我们需要执行一些基于响应的任务。（说明已经成功发送了请求，需要做下一步想的时候！）
每当readyState改变时，就会出发onreadystatechange事件。
XMLHttpRequest对象有三个重要属性：
例1、创建XMLHttpRequest()对象
一定要在服务端测试不然会出现（ Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension）错误
在相同目录下新建01.txt内容如下：
hello world
打开浏览器进行测试！
2、responseBody
返回某一个时的服务器响应数据
例2、测试
3、responseStream
以Ado Stream对象的形式返回相应信息
4、responseText
将响应信息作为字符串返回
例3、测试
5、responseXml
将响应信息格式化为Xml Document对象返回
例4、测试
6、statusText
返回当前请求的响应行状态
例5、测试
7、abort
取消当前请求
8、getAllResponseHeaders
获取想用的所有http的头部信息
例6、测试
9、getResponseHeader
从响应信息中获取指定的Http头
例7、获取http头中的server列：当前web服务器的版本和名称。
10、open
创建一个新的http请求，并指定此请求的方法、URL以及验证信息
参数
bstrMethod
http方法，例如：POST、GET、PUT、及PROPFIND。大小写都可以。
bstrUrl
请求的URL地址，可以为绝对的地址也可以使用相对地址
varAsync[可选]
布尔型，指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。
bstrUser[可选]
如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。
bstrPassword[可选]
验证信息中的密码部分，如果用户名为空，则此值将被忽略。
11、send
发送请求到http服务器上并接收数据
欲通过此请求发送的数据
12、setRequestHeader
单独指定请求的某个http头
最通用的定义为：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头 |
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: 未找到页面 |
一定要在服务端测试不然会出现（ 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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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头
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用HttpClient向服务器发送restful post请求
- 使用HttpURLConnection向服务器发送post和get请求
- Android之Http通信——3.Android HTTP请求方式:HttpURLConnection
- TCP/IP模型是什么
- TCP三次握手的正确使用姿势
- 在Unity3D的网络游戏中实现资源动态加载
- Nginx Parsing HTTP Package、header/post/files/args Sourcecode Analysis
- 易语言注册码网络验证码自制
- TCP/IPillustrated 阅读笔记（一） introduction
- iOS网络收音机
- C#之网络
- 深入浅出HTTP协议(WEB开发和面试必备)
- iOS 网络访问安全问题解决方法App Transport Security policy requires the use of a secure connection
- 网络爬虫——爬取糗事百科笑料段子
- 关于Volley网络请求框架空指针异常问题
- Apache建设虚拟主机httpd-vh…
- [Network Analysis] 复杂网络分析总结
- 【转载】网络
- HTTP笔记（一）基本介绍
- Linux网络编程