XMLHTTP基础教程

XMLHTTP方法:



open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword)

bstrMethod: 数据传送方式,即GET或POST。用"POST"方式发送数据,可以大到4MB,也可以换为"GET",只能256KB。

 

bstrUrl: 服务网页的URL。

 

varAsync: async: 一个布尔标识,说明请求是否为异步的。如果是异步通信方式(true),客户机就不等待服务器的响应;如果是同步方式(false),客户机就要等到服务器返回消息后才去执行其他操作

bstrUser: 用户名,可省略。
bstrPassword:用户口令,可省略。

send(varBody)
varBody: 指令集。可以是XML格式数据,也可以是字符串,流,或者一个无符号整数数组。也可以省略,让指令通过Open方法的URL参数代入。 发送数据的方式分为同步和异步两种。在异步方式下,数据包一旦发送完毕,就结束Send进程,客户机执行其他的操作;而在同步方式下,客户机要等到服务器 返回确认消息后才结束Send进程。

setRequestHeader(bstrHeader, bstrValue)
bstrHeader:HTTP 头(header)
bstrValue:HTTP 头(header)的值
如果Open方法定义为POST,可以定义表单方式上传:
xmlhttp.setRequestHeader "Content-Type", "application/x-www-form-urlencoded"

abort
取消当前 HTTP 请求

getAllResponseHeaders
从响应信息中检索所有的标头字段

getResponseHeader
从响应信息正文中获得一个 HTTP 标头值
 

XMLHTTP属性:

onreadystatechange

指定当readyState属性改变时的事件处理句柄

语法

oXMLHttpRequest.onreadystatechange = funcMyHandler;readyState
XMLHTTP对象中的readyState属性能够反映出服务器在处理请求时的进展状况。客户机的程序可以根据这个状态信息设置相应的事件处理方法。属性值及其含义如下表所示: 
值 说明
0 Response对象已经创建,但XML文档上载过程尚未结束
1 XML文档已经装载完毕
2 XML文档已经装载完毕,正在处理中
3 部分XML文档已经解析
4 文档已经解析完毕,客户端可以接受返回消息

responseBody
Variant型 结果返回为无符号整数数组

responseStream
Variant型 结果返回为IStream流
responseText 
将响应信息作为字符串返回

变量,此属性只读,将响应信息作为字符串返回。 XMLHTTP尝试将响应信息解码为Unicode字符串,XMLHTTP默认将响应数据的编码定为UTF-8,如果服务器返回的数据带BOM(byte-order mark),XMLHTTP可以解码任何UCS-2 (big or little endian)或者UCS-4 数据。注意,如果服务器返回的是xml文档,此属性并不处理xml文档中的编码声明。你需要使用responseXML来处理

responseXML object型 结果返回为XML格式数据。 status Long型 服务器返回的HTTP状态码 statusText String型 服务器HTTP响应行状态   附录 (一) HTTP 1.1支持的状态代码 100 Continue 初始的请求已经接受,客户应当继续发送请求的其余部分 101 Switching Protocols 服务器将遵从客户的请求转换到另外一种协议 200 OK 一切正常,对GET和POST请求的应答文档跟在后面。 201 Created 服务器已经创建了文档,Location头给出了它的URL。 202 Accepted 已经接受请求,但处理尚未完成。 203 Non-Authoritative Information 文档已经正常地返回,但一些应答头可能不正确,因为使用的是文档的拷贝 204 No Content 没有新文档,浏览器应该继续显示原来的文档。如果用户定期地刷新页面,而Servlet可以确定用户文档足够新,这个状态代码是很有用的 205 Reset Content 没有新的内容,但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容 206 Partial Content 客户发送了一个带有Range头的GET请求,服务器完成了它 300 Multiple Choices 客户请求的文档可以在多个位置找到,这些位置已经在返回的文档内列出。如果服务器要提出优先选择,则应该在Location应答头指明。 301 Moved Permanently 客户请求的文档在其他地方,新的URL在Location头中给出,浏览器应该自动地访问新的URL。 302 Found 类似于301,但新的URL应该被视为临时性的替代,而不是永久性的。 303 See Other 类似于301/302,不同之处在于,如果原来的请求是POST,Location头指定的重定向目标文档应该通过GET提取 304 Not Modified 客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用。 305 Use Proxy 客户请求的文档应该通过Location头所指明的代理服务器提取 307 Temporary Redirect 和302(Found)相同。许多浏览器会错误地响应302应答进行重定向,即使原来的请求是POST,即使它实际上只能在POST请求的应答是303时才能重定向。由于这个原因,HTTP 1.1新增了307,以便更加清除地区分几个状态代码:当出现303应答时,浏览器可以跟随重定向的GET和POST请求;如果是307应答,则浏览器只能跟随对GET请求的重定向。 400 Bad Request 请求出现语法错误。 401 Unauthorized 客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头,浏览器据此显示用户名字/密码对话框,然后在填写合适的Authorization头后再次发出请求。 403 Forbidden 资源不可用。 404 Not Found 无法找到指定位置的资源 405 Method Not Allowed 请求方法(GET、POST、HEAD、DELETE、PUT、TRACE等)对指定的资源不适用。 406 Not Acceptable 指定的资源已经找到,但它的MIME类型和客户在Accpet头中所指定的不兼容 407 Proxy Authentication Required 类似于401,表示客户必须先经过代理服务器的授权。 408 Request Timeout 在服务器许可的等待时间内,客户一直没有发出任何请求。客户可以在以后重复同一请求。 409 Conflict 通常和PUT请求有关。由于请求和资源的当前状态相冲突,因此请求不能成功。 410 Gone 所请求的文档已经不再可用,而且服务器不知道应该重定向到哪一个地址。它和404的不同在于,返回407表示文档永久地离开了指定的位置,而404表示由于未知的原因文档不可用。 411 Length Required 服务器不能处理请求,除非客户发送一个Content-Length头。 412 Precondition Failed 请求头中指定的一些前提条件失败 413 Request Entity Too Large 目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求,则应该提供一个Retry-After头 414 Request URI Too Long URI太长 416 Requested Range Not Satisfiable 服务器不能满足客户在请求中指定的Range头 500 Internal Server Error 服务器遇到了意料不到的情况,不能完成客户的请求 501 Not Implemented 服务器不支持实现请求所需要的功能。例如,客户发出了一个服务器不支持的PUT请求 502 Bad Gateway 服务器作为网关或者代理时,为了完成请求访问下一个服务器,但该服务器返回了非法的应答 503 Service Unavailable 服务器由于维护或者负载过重未能应答。例如,Servlet可能在数据库连接池已满的情况下返回503。服务器返回503时可以提供一个Retry-After头 504 Gateway Timeout 由作为代理或网关的服务器使用,表示不能及时地从远程服务器获得应答 505 HTTP Version Not Supported 服务器不支持请求中所指明的HTTP版本

XMLHTTP中setRequestHeader方法和参数

注意:在FF里面需要将open方法放在setRequestHeader之前

一、为何要用到setRequestHeader
通 常在HTTP协议里,客户端像服务器取得某个网页的时候,必须发送一个HTTP协议的头文件,告诉服务器客户端要下载什么信息以及相关的参数。而 XMLHTTP 就是通过HTTP协议取得网站上的文件数据的,所以也要发送HTTP头给服务器。 但是 XMLHTTP 默认的情况下有些参数可能没有说明在HTTP头里,这是当我们需要修改或添加这些参数时就用到了
setRequestHeader 方法。


二、setRequestHeader参数详解
使用GET下列参数 XMLObject.setRequestHeader ("CONTENT-TYPE", "application/x-www-form-urlencoded" )
代表的意义:

GET /bb.asp?www=1234 HTTP/1.1
Accept: */*
Accept-Language: zh-cn
UA-CPU: x86
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
CONTENT-TYPE:application/x-www-form-urlencoded
Host:ourys.com
Connection: close
Cookie: %C3%F7%CC%EC=%B0%CB;ASPSESSIONIDASDBSDRR=BLEDBIBBCGKBJAKJCFEJKGII

 

注:
1、CONTENT-TYPE:application/x-www-form-urlencoded含义是表示客户端提交给服务器文本内容的编码方式 是URL编码,即除了标准字符外,每字节以双字节16进制前加个“%”表示

2、当然还有其他编码方式,如:CONTENT-TYPE:multipart/form-data
至于:Content-length 就是表示提交的数据字节大小
http有几种提交方式,其中比较常用的就是 GET 和 POST

3、这个标志就放在HTTP头开头的地方,这样讲容易理解点
GET 方式是没有提交内容的,所以 Content-length 在 GET 模式下是无效的.
GET 传参数的方式就是通过虚拟地址传送,如:
GET /bb.asp?www=1234 HTTP/1.1
参数全部就只有 "www=1234" 这么多

4、如果用POST的话就有些不同,POST是将参数放到HTTP后面的,就以上面的HTTP作范例,用POST的方法传参数

POST /bb.asp HTTP/1.1
Accept: */*
Accept-Language: zh-cn
UA-CPU: x86
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
CONTENT-TYPE:application/x-www-form-urlencoded
Host: ourys.com
Content-length: 8
Connection: close
Cookie: %C3%F7%CC%EC=%B0%CB;ASPSESSIONIDASDBSDRR=BLEDBIBBCGKBJAKJCFEJKGII

www=1234

这时,数据就需要说明字节大小了

至于 Connection: Close,很明显英文的意思是 连接:关闭
只是客户端在提交数据时告诉服务器让谁先关闭连接而已。

三、PS:
setRequestHeader方法只是XMLHTTP为添加或修改HTTP头提供的一个接口方法而已,
至于里面的值则是HTTP协议的含义,当然也可以发自己的东西进去,即使IIS不能识别你的信息也不会报错
如:
setRequestHeader ("MyName", "Supermanking" )

虽然IIS不会报错,但这个信息也可以有用,可以在ASP程序里读取HTTP头信息分析是否有
MyName: Supermanking
信息,可根据你的需求来做处理
 

php与ajax的应用

1.创建xmlhttp对象时的问题。
创建xmlhttp对象在不同的浏览器中有不同的方法,在IE里好像只能用ActiveXObject创建,然而在Firefox等其他浏览器里就不行 了:(,但可以用XMLHttpRequest()函数创建,这样的不统一给程序员写程序带来了很大的难度,所以我认为在学习JS的过程中记录下这些不同 的地方很有必要,不然一个很有前途的程序很容易就会成为 "IE only" 的!!
下面是一个兼容的xmlhttp对象创建函数。以后就可以直接用这个函数创建xmlhttp对象,而不用担心兼容性问题了:D
[code]
function createAJAX()
{
var xmlhttp;
try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e1)
{
try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e2) { xmlhttp = null; }
}
if (!xmlhttp)
{
if (typeof XMLHttpRequest != "undefined") { xmlhttp = new XMLHttpRequest(); }
else return false;
}
return xmlhttp;
}
[/code]


2.AJAX的数据传输方式。
正如你知道的,AJAX支持以POST何GET方式传送数据。但你知道怎样正确使用他们吗?
GET:
GET是最常用的数据传输方式,就是将变量名和值直接跟在URL后面就可以了,同时这个也是最简单的方法。
比如: 调用的URL为 ajax.php?id=1,这样在ajax.php中的$_GET数组里就有 $_GET["id"] = 1; 如果有多个变量,则用"&"分开。
POST:
POST相对于GET来说要用得比较少一点,而且POST的用法比GET要麻烦一点。
首先,POST也跟GET一样,要先把变量名和值用"="和"&"符号连成一个字符串。 然后用 xmlhttp的 send 方法传送。而且要在send之前设置header。
[code]
var ajax = createAJAX(); //就是前面那个创建xmlhttp对象的函数
ajax.open("POST","ajax.php",true);
ajax.onreadystatechange = function1; //配置状态处理函数名,不能在后面加上"()"!!
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //这句必须要,而且一定要放在send以前
ajax.send("变量1=值1&变量2=值2");
[/code]
用这种方法传送出去的值就和用表单的post方式传出的值一样。

还有一个非常重要的,不管用POST还是GET,都应特别注意"&","+"和"%"等特殊字符的问题。如果变量的值里面含有这些字符,那么后果 不堪设想。一个很好地解决办法就是使用encodeURIComponent这个全局函数来将所有的值都处理一遍(注意只是处理值),将特殊字符转换 成%XX的形式(和php里的urlencode貌似是一个功能)。但这个函数在IE5里不能用!

用POST方法传送数据的时候,xmlhttp.send()传出的所有东西在php里都可以在一个名叫"php://input"的特殊文件里读取到。 比如上面的那个代码,在ajax.php里用 file_get_contents("php://input") 就可以得到 "变量1=值1&变量2=值2"。 这是一个非常好的功能!这样我们就可以不用再使用"变量名=值"的方式了!也不用担心特殊字符! 将这个方法和GET结合起来就可以做一个AJAX的文章自动保存的程序。
[code]
var ajax = createAJAX();
ajax.open("POST","ajax.php?filename=a.txt",true);
ajax.onreadystatechange = function1;
//ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //如果不需要将send出的字符串解析成POST变量数据,那么这句就可以不用了
ajax.send("这里可以传送文件正文!!!!!");
[/code]
这样从ajax.php的$_GET数组中可以获得文件名,用 file_get_contents("php://input") 就可以获得文件正文,而且不用担心任何的特殊字符,同时也不用处理数据,减轻客户端压力。
[code]

sack.js文件说明:(代码附在最底下)
实体化对象:
var ajax = new sack("URL"); // URL为ajax调用地址

属性:( =默认值)
method = "GET"; //"GET"和"POST"或"GET&POST"
encodeURL = true; //是否处理参数值
late = true; //是否为异步方式
函数配置:
onLoading = 空函数; //当loading的时候触发
onLoaded = 空函数; //当下载完的时候触发
onInteractive = 空函数; //当交互的时候触发
onCompletion = 空函数; //当全部完成的时候触发
onError = 空函数; //当发生错误的时候触发
方法:
setVar 设置变量和值,可以以两种方式:setVar("varName","varValue"); 和 setVar( { "name1":"value1","name2":"value2"} );
send 发送,可以当method = "GET&POST" 的时候可以接受一个字符串作为 POST 的内容
当完成的时候才可用的属性(在onCompletion里可以使用):
response //返回的字符串
responseXML //返回的xml
[/code]

具体样例:
ajax.htm:
[code]
<div id='mydiv'>Loading...</div>
<script src='sack.js'></script>
<script>
var ajax = new sack("ajax.php");
ajax.method = "GET&POST";
ajax.setVar(
{
"action":"read",
"my":"posttdfsfdsfafasd"
});
ajax.onCompletion = function ()
{
document.getElementById('mydiv').innerHTML = ajax.response;
}

ajax.send("这里是POST出去的内容,可以有特殊字符&=等");
</script>
[/code]

ajax.php:
[code]
<?
$br = "<br/>---------------------------<br/>";
print_r($_GET);
echo $br;
print_r($_POST);
echo $br;
echo file_get_contents("php://input");
echo $br;
?>
[/code]

 

function sack(file) {

/*************************
/    小屋
/  //sjolzy.cn/post-182.html
/    www.sjolzy.cn
/     By sjolzy
*************************/

	this.xmlhttp = null;

	this.resetData = function() {
		this.method = "GET";
		this.URLString = "";
		this.encodeURL = true;
		this.file = file;
		this.late = true;
		this.failed = false;
  	};

	this.resetFunctions = function() {
  		this.onLoading = function() { };
  		this.onLoaded = function() { };
  		this.onInteractive = function() { };
  		this.onCompletion = function() { };
  		this.onError = function() { };
		this.encode = (encodeURIComponent && this.encodeURL)?function(s) {
			return encodeURIComponent(s);
		}:function(s){return s;}
	};

	this.reset = function() {
		this.resetFunctions();
		this.resetData();
	};

	this.createAJAX = function(){
		try {
			this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
		}catch (e1){
			try {
				this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e2) {
				this.xmlhttp = null;
			}
		}
		if (! this.xmlhttp) {
			if (typeof XMLHttpRequest != "undefined") {
				this.xmlhttp = new XMLHttpRequest();
			} else {
				this.failed = true;
			}
		}
	};

	this.setVar = function(name, value) {
		var arr1 = [], arr2 = [];
		if (typeof name == "object" && !value) {
			for(var i in name) {
				arr1[arr1.length] = i;
				arr2[arr2.length] = name[i];
			}
		}
		else {
			arr1[0] = name;
			arr2[0] = value;
		}
		var first = (this.URLString.length == 0);
		for(var i=0;i<arr1.length;i++) {
			this.URLString += (first)?"":"&";
			this.URLString += arr1[i] + "=" + this.encode(arr2[i]);
		}
	};

	this.send = function(content) {
		if (!content) content = "";
		if (!this.xmlhttp || this.failed ) {
			this.onError();
			return;
		}
		var self = this;
		if (this.method == "GET" || this.method == "GET&POST") {
			this.xmlhttp.open(this.method,this.file+"?"+this.URLString,this.late);
		} else if (this.method == "POST") {
			this.xmlhttp.open(this.method,this.file,this.late);
			try {
				this.xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			} catch(e) {}
		}
		else this.onError();

		this.xmlhttp.onreadystatechange = function() {
			switch (self.xmlhttp.readyState) {
				case 1:
					self.onLoading();
					break;
				case 2:
					self.onLoaded();
					break;
				case 3:
					self.onInteractive();
					break;
				case 4:
					self.response = self.xmlhttp.responseText;
					self.responseXML = self.xmlhttp.responseXML;
					if (self.xmlhttp.status == "200") {
						self.onCompletion();
					} else {
						self.onError();
					}
					self.URLString = "";
					break;
			}
		};
		
		if (this.method == "POST") {
			this.xmlhttp.send(this.URLString);
		} else if (this.method == "GET") {
			this.xmlhttp.send(null);
		} else if (this.method == "GET&POST") {
			this.xmlhttp.send(content);
		}
	};

	this.reset();
	this.createAJAX();
}