AJAX中xhr对象详解 -
- ITeye技术网站
ajax中XMLHttpRequest参数详解时间: 15:15:41来源:网络 作者:未知 点击:468次 XJAX ,并不是一种新技术的诞生.它实际上代表的是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用.
它包括：
使用XHTML和CSS标准化呈现；
使用DOM实现动态显示和交互；
使用XML和XSLT进行数据交换与处理；
使用XMLHttpR
XJAX ,并不是一种新技术的诞生.它实际上代表的是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用.
它包括：
使用XHTML和CSS标准化呈现；
使用DOM实现动态显示和交互；
使用XML和XSLT进行数据交换与处理；
使用XMLHttpRequest进行异步数据读取；
最后用JavaScript绑定和处理所有数据。
在这里我只向谈点XMLHttpRequest对象:
在上面看到,使用XMLHttpRequest进行异步数据读取；
首先,我们要创建该对象,针对不同的浏览器,该对象的创建方法是有区别.
Internet Explorer以ActiveX对象引入,被称为XMLHTTP.
对于Internet Explorer浏览器，创建XMLHttpRequest 方法如下：
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
在不同Internet Explorer浏览器中XMLHTTP版本可能不一致，为了更好的兼容不同版本的Internet Explorer浏览器，因此我们需要根据不同版本的Internet Explorer浏览器来创建XMLHttpRequest类，上面代码就是根据不同的Internet Explorer浏览器创建XMLHttpRequest类的方法。
对于Mozilla?Netscape?Safari等浏览器，创建XMLHttpRequest 方法如下：
xmlhttp_request = new XMLHttpRequest();
　　如果服务器的响应没有XML mime-type header，某些Mozilla浏览器可能无法正常工作。 为了解决这个问题，如果服务器响应的header不是text/xml，可以调用其它方法修改该header。
xmlhttp_request = new XMLHttpRequest();
xmlhttp_request.overrideMimeType('text/xml');
在实际应用中，为了兼容多种不同版本的浏览器，一般将创建XMLHttpRequest类的方法写成如下形式：
try{
　if( window.ActiveXObject ){
　　for( var i = 5; i-- ){
　　　try{
　　　　if( i == 2 ){
　　　　　xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );
　　　　}else{
　　　　　xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
　　　　}
　　　xmlhttp_request.setRequestHeader("Content-Type","text/xml");
　　　xmlhttp_request.setRequestHeader("Content-Type","gb2312");
　　　
　　}
　　catch(e){
　　　xmlhttp_request =
　　}
　}
}else if( window.XMLHttpRequest ){
　xmlhttp_request = new XMLHttpRequest();
　if (xmlhttp_request.overrideMimeType) {
　　xmlhttp_request.overrideMimeType('text/xml');
　}
}
}catch(e){ xmlhttp_request = }
在定义了如何处理响应后，就要发送请求了。可以调用HTTP请求类的open()和send()方法，如下所示：
xmlhttp_request.open('GET', URL, true); xmlhttp_request.send(null);
open()的第一个参数是HTTP请求方式?GET，POST或任何服务器所支持的您想调用的方式。 按照HTTP规范，该参数要大写；否则，某些浏览器(如Firefox)可能无法处理请求。
第二个参数是请求页面的URL。
　　第三个参数设置请求是否为异步模式。如果是TRUE，JavaScript函数将继续执行，而不等待服务器响应。这就是"AJAX"中的"A"。
用JavaScript来创建XMLHttpRequest 类向服务器发送一个HTTP请求后，接下来要决定当收到服务器的响应后，需要做什么。这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名，如下所示：xmlhttp_request.onreadystatechange =FunctionN
FunctionName是用JavaScript创建的函数名，注意不要写成FunctionName()，当然我们也可以直接将JavaScript代码创建在onreadystatechange之后，例如：
xmlhttp_request.onreadystatechange = function(){
　// JavaScript代码段
};
在这个函数中。首先要检查请求的状态。只有当一个完整的服务器响应已经收到了，函数才可以处理该响应。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。
　　readyState的取值如下：
　　　0 (未初始化)
　　　1 (正在装载)
　　　2 (装载完毕)
　　　3 (交互中)
　　　4 (完成)
　　所以只有当readyState=4时，一个完整的服务器响应已经收到了，函数才可以处理该响应。具体代码如下：
if (http_request.readyState == 4) {
　// 收到完整的服务器响应
} else {
　// 没有收到完整的服务器响应
}
　当readyState=4时，一个完整的服务器响应已经收到了，接着，函数会检查HTTP服务器响应的状态值。完整的状态取值可参见W3C文档。当HTTP服务器响应的值为200时，表示状态正常。
　　在检查完请求的状态值和响应的HTTP状态值后，就可以处理从服务器得到的数据了。有两种方式可以得到这些数据：(1) 以文本字符串的方式返回服务器的响应.
XMLHttpRequest详解
/*
*author Jouy.lu
*/
var xmlH //首先定义一个全局域变量来保存对象的引用;
function createXMLHttpRequest(){ //该方法用来创建XMLHttpRequest对象的实例.
if(window.ActiveXObject){
& xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
& xmlhttp = new XMLHttpRequest();
考虑到兼容浏览器的问题：建议的写法如下：
function createXmlhttp(){
if(window.XMLHttpRequest){
& xmlhttp = new XMLHttpRequest();
& if (xmlhttp.overrideMimeType){
&& xmlhttp.overrideMimeType("text/xml");
& }
&
else if(window.ActiveXObject){
& try{
&& xmlhttp = new& ActiveXObject("Msxml2.XMLHTTP");
& }catch(e){
&& xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
& }
if(!xmlhttp){
& window.alert("Your broswer not support XMLHttpRequest!");
}
/************************************XMLHttpRequest的标准操作*********************
abort():终止当前请求;
getAllResponseHeaders():把HTTP所以响应首部作为键/值对返回;
getResponseHeader("header");返回指定首部的串值;
open("POST/GET/PUT","url");建立对服务器的调用,url参数可以是相对URL或绝对URL,该方法还包含了另三个可选参数;
send(content);向服务器发送请求;
setRequestHeader("header","value");把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。
注:
& void open(string method, string url, boolean asynch, string username, string password)：这个方法会建立对服务器的调用。
要提供调用的特定方法（GET、POST或PUT），还要提供所调用资源的URL。另外还可以传递一个Boolean值，指示这个调用是异步还是同步的， 默认值为true，这表示请求本质上是异步的。如果这个参数为false，处理就会等待，直到从服务器返回响应为止。由于异步调用是使用Ajax 的主要优点之一，所以倘若将这个参数设置为false，从某种程度上讲与使用XMLHttpRequest对象的初衷不太相符。在某些情况下这,个参数 设置为false也是有用的，比如在持久存储页面之前你可能想先验证用户的输入。最后两个参数不说自明，允许你指定一个特定的用户名和口令。
& void send(content)：这个方法具体向服务器发出请求。如果请求声明为异步的，这个方法就会立即返回，否则它会等待，直到接收到响应 为止。参数是可选的，可以是一个DOM对象的实例、一个输入流，或者是一个串。传入这个对象的内容会作为请求体的一部分发送。
& void setRequestHeader(string header, string value)：这个方法为HTTP请求中一个给定的首部设置值。它有两个参数，第一个串表 示要设置的首部，第二个串表示要在首部中放置的值。需要说明，这个方法必须在open()之后才能调用。在所有这些方法中，最有可能用到 的就是open()和send()。XMLHttpRequest对象还有许多属性，在设计Ajax交互时这些属性非常有用。
& void abort()： 顾名思义，这个方法就是要停止请求。
& string getAllResponseHeaders()： 这个方法的核心功能对Web应用开发人员应该很熟悉了，它会返回一个串，其中包含HTTP请求的所有响 应首部。首部包括Content-Length、Date和URI。
& string getResponseHeader(string header)：这个方法与getAllResponseHeaders()是对应的，不过它有一个参数来表示你希望得到哪一个& 首部值，并且会把这个值作为一个串返回。
******************************/
/***************标准XMLHttpRequest属性******************
onreadystatechange:每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数。
readyState:请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载， 2 = 已加载， 3 = 交互中， 4 = 完成。
responseText:服务器的响应，表示为一个串。
responseXML:服务器的响应，表示为XML。这个对象可以解析为一个DOM对象。
status:服务器的HTTP状态码（200对应OK，404对应Not Found（未找到），等等）.
statusText:HTTP状态码的相应文本（OK或Not Found（未找到）等等）。
*************************************************************/
/*********************来看看到底要怎么才能发送请求*******
使用XMLHttpRequest对象发送请求的基本步骤如下：
1.得到XMLHttpRequest对象实例的一个引用，为此，可以创建一个新的实例，也可以访问包含有
XMLHttpRequest实例的一个变量。
2.告诉XMLHttpRequest对象，哪个函数会处理XMLHttpRequest对象状态的改变。为此要把对象的onreadystatechange属性设置为指向一个JavaScript函数的指针。
3. 指定请求的属性。XMLHttpRequest对象的open()方法会指定将发出的请求。open()方法取3个 参数：一个是指示所用方法（通常是GET或POST）的串，另一个是表示目标资源URL的串，还有一个Boolean值，指示请求是否是异步的。
4. 将请求发送给服务器。XMLHttpRequest对象的send()方法会把请求传送到指定的目标资源。
send()方法接受一个参数，这通常是一个串或一个DOM对象。这个参数会作为请求体的一部分传送到目标URL.向send()方法提供参数时，要确保open()中指定的方法是POST。如果没有数据要作为请求体的一部分发送，则使用null。
异步方式给用户带来的体验:(我想程序员看到这段解释,心里真的很爽!)
对服务器的请求是异步发送的，因此浏览器可以继续响应用户输入，并在后台等待服务器的响应。
如果选择同步操作，而且倘若服务器的响应要花好几秒才能到达，浏览器就会表现得很迟钝，在等待期间不能响应用户的输入。这样一来，浏览器好像被冻住一样，无法响应用户输入，而异步做法可以避免这种情况，从而让最终用户有更好的体验，尽管这种改善很细微，但确实很有意义。
这样用户就能继续工作，而且服务器会在后台处理先前的请求。能与服务器通信而不打断用户的工作流，这样就可以采用很多技术来改善用户体验。例如，假设有一个验证用户输入的应用。用户在输入表单上填写各个域时，浏览器可以定期地向服务器发送表单值来进行验证，此时并不打断用户，他还可以继续填写余下的表单域。如果某个验证规则失败，用户会立即得到通知，而不必等表单真正发送到服务器进行处理时才知道有错误，这就能大大节省用户的时间，也能减轻服务器上的负载压力，因为不必在表单提交不成功时完全重建表单的内容。
下面是说明安全问题的:
XMLHttpRequest对象要受制于浏览器的安全“沙箱”。XMLHttpRequest对象请求的所有资源都必须与调用脚本在同一个域（domain）内。这个安全限制使得XMLHttpRequest对象不能请求脚本所在域之外的资源。这个安全限制的强度如何因浏览器而异（见图2-5）。Internet Explorer
会显示一个警告，指出可能存在一个安全风险，但是用户可以选择是否继续发出请求。Firefox则会断然停止请求，并在JavaScript控制台显示一个错误消息。Firefox确实提供了一些JavaScript技巧，使得XMLHttpRequest也可以请求外部URL的资源。不过，由于这些技术针对特定的浏览器，最好不要用，而且要避免使用XMLHttpRequest访问外部URL。
本篇文章来源于：开发学院 && 原文链接：/92.php
浏览 24984
jianghg2010
浏览: 40899 次
来自: 北京
6.以下二条语句返回值为true的有：(Core Java)[转载][原创]用XHR2实现大文件的切割上传（分块上传）
首先要截取上传动作，并用JS获取到要上传的文件资源，我们要用：
var fileobj =
document.getElementByTagName('input')[i].files[0];
来获取上传的文件资源，然后通过它这个对象里面继承的一个slice()方法来对二进制文件进行切割，每次切割的大小是在JS里设定的
这个过程里面关键问题有两点：
1、要把文件按顺序依次切割并依次发送到服务器
2、服务器接收到的是一块一块的二进制文件块，要把这些文件块按顺序组合到一起
对于第一点，我们的做法是，关闭ajax的异步上传，并用while()循环不断切割，在while中记录每次切割的起始和结束位置（位置是按字节算的，1MB要换算成1*字节），然后依次send()，这里面要注意的问题有三点：
1、要在while前获取到文件总大小，这个通过fileobj.size可以得到。
2、ajax对象要每次循环时重新创建，否则当第一次send()完毕后，状态变为4，就发送完毕不会再发送后续文件了
3、被切割的数据依然要用FormData对象来append打包发送，否则服务器不认识这是文件数据
关键代码如下：
const SLICESIZE = 10 * 1024 * 1024;//每次切割的大小，这里是10MB
var start = 0;
var end = 0;
totalsize = fileobj.
while(start & totalsize){
end = start + SLICESIZE;
var xhr = new XMLHttpRequest();
var fd = new FormData();
=&fileobj.slice(start,end);//对文件进行切割，两个参数
fd.append('name',part);//把切割文件打包进FormData对象中以便发送，其中name的值就是服务器$_FILES['name']接受处的变量名
xhr.open('POST','test.php',false);//之所以关闭异步，是为了防止文件块送达服务器的顺序出错
xhr.send(fd);//把打包的数据发送
对于第二点，由于我们在ajax处已经关闭了异步，所以只需要把收到的文件块以append的方式追加到接受文件里即可，当所有文件块都追加完毕，则整个大文件就接受完毕了。
这个过程里关键问题有两点：
1、对于接受到的文件，我们要用file_get_contents()函数读取它的文件数据
2、读取完文件数据后，我们用file_put_contents()以APPEND追加的方式加入到保存的文件
这个地方保存的文件可能在第一次接收的时候不存在，所以需要用file_exists()判断一下，如果不存在的话，就把接收到的文件通过move_uploaded_file()把第一次传的文件移动到指定位置并命名，然后，后续再传上来的文件，就以APPEND追加进这个文件就OK了
关键代码：
file_put_contents('./upload/demo.mov',file_get_contents($_FILES['name']['tmp_name']),FILE_APPEND);
另外有一点值得补充：
由于JS是单线程的，加上浏览器的渲染原理，导致如果再ajax异步被关闭的情况下进行分块传送大文件，将造成两个明显的问题：
1、传送大文件所需的时间比较长。
2、ajax异步被关闭后，直到大文件全部传送完毕，后续程序，至少该函数才会结束。
那么这里有个问题就是关于动态改变CSS来处理进度条的问题，根据浏览器的渲染原理，如果JS某个函数一直处于执行状态，那么由此导致的一切可能造成浏览器repain的操作都得等到JS函数执行完毕后进行，期间，浏览器会把所有repain操作积蓄起来，等到JS执行完毕后，统一一次全部完成，所以这个地方的进度条设计要用到setInterval()来规定间隔多长时间触发一次计算和渲染才行
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。javascript ajax, XHR对象_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
javascript ajax, XHR对象
上传于|0|0|文档简介
&&javascript 短轮询,ajax
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩2页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢