Ajax技术之XMLHttpRequest对象详解
2017-05-05 15:59
253 查看
Ajax是XMLHttpRequest对象和JavaScript、XML、CSS、DOM等多种技术的组合。其中,只有XMLHttpRequest对象是新技术,其他的均为已有的技术。下面就对Ajax使用的XMLHttpRequest对象进行介绍。
1、XMLHttpRequest对象的由来
Ajax使用的技术中,最核心的技术就是XMLHttpRequest,它是一个具有应用程序接口的JavaScript对象,能够使用超文本传输协议(HTTP)连接一个服务器,是微软公司为了满足开发者的需要,于1999年在IE5.0浏览器中率先推出的。现在许多浏览器都对其提供了支持,不过实现方式与IE有所不同。
2、初始化XMLHttpRequest对象
在使用XMLHttpRequest对象发送请求和处理响应之前,首先需要初始化该对象,由于XMLHttpRequest不是一个W3C标准,所以对于不同的浏览器,初始化的方法也是不同的。通常情况下,初始化XMLHttpRequest对象只需要考虑两种情况,一种是IE浏览器,一种是非IE浏览器。下面分别进行介绍。
1)IE浏览器
IE浏览器把XMLHttpRequest实例化为一个ActiveX对象。具体方法如下:
或
2)非IE浏览器
非IE浏览器(如Firefox、Opera、Mozilla、Safari)把XMLHttpRequest对象实例化为一个本地JavaScript对象。具体方法如下:
为了提高程序的兼容性,可以创建一个跨浏览器的XMLHttpRequest对象。创建一个跨浏览器的XMLHttpRequest对象其实很简单,只需要判断一下不同浏览器的实现方式,如果浏览器提供了XMLHttpRequest类,则直接创建一个实例,否则实例化一个ActiveX对象。具体代码如下:
3、XMLHttpRequest对象的常用方法
XMLHttpRequest对象提供了一些常用的方法,通过这些方法可以对请求进行操作。下面对XMLHttpRequest对象的常用方法进行介绍。
1)open()方法
用于设置进行异步请求目标的URL、请求方法以及其他参数信息。其具体语法如下:
URL:用于指定请求地址,可以使用绝对地址或者相对地址,并且可以传递查询字符串。
asyncFlag:可选参数,用于指定请求方式,异步为true,同步为false,默认为true。
userName:可选参数,用于指定请求用户名,没有时可以省略。
password:可选参数,用于指定请求密码,没有时可以省略。
例如:设置异步请求目标为register.jsp,请求方法为GET,请求方式为异步的代码如下:
2)send()方法
用于向服务器发送请求。如果请求声明为异步,该方法将立即返回,否则将等到接收到响应为止。其语法格式如下:
content:用于指定发送的数据,可以是DOM对象的实例、输入流或字符串。如果没有参数需要传递,可以设置为null。
例如:向服务器发哦是哪个一个不包含任何参数的请求,可以使用下面的代码:
3)setRequestHeader()方法
用于为请求的HTTP头设置值。其具体语法格式如下:
value:用于为指定的HTTP头设置值。
注意:setRequestHeader()方法必须在调用open()方法之后才能调用。
例如:在发送POST请求时,需要设置Content-Type请求头的值为“application/x-www-form-urlencoded”,这时就可以通过setRequestHeader方法进行设置、具体代码如下:
4)abort()方法
用于停止或放弃当前异步请求。其语法格式如下:
5)getResponseHeader()方法
用于以字符串形式返回指定的HTTP头信息。其语法格式如下:
例如:要获取HTTP头Content-Type的值,可以使用以下代码:
6)getAllResponseHeaders()方法
用于以字符串形式返回完整的HTTP头信息,其中包括Server、Content-Type和Content-Length。其语法格式如下:
4、XMLHttpRequest对象的常用属性
XMLHttpRequest对象提供了一些常用属性,通过这些属性可以获取服务器的响应状态及相应内容。下面将对XMLHttpRequest对象的常用属性进行介绍。
1)onreadystatechange属性
用于指定状态改变时所触发的事件处理器。在Ajax中,每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数。
例如,指定状态改变时触发JavaScript函数getResult()的代码如下:
注意:在指定所触发的事件处理器时,所调用的JavaScript函数不能添加小括号及指定参数名。不过这里可以使用匿名函数。例如,需要调用带参数的函数getResult(),可以使用如下代码:
2)readyState属性
用于获取请求的状态。该属性包括5个属性值,如下表所示:
3)responseText属性
用于获取服务器的响应,表示为字符串。
4)responseXML属性
用于获取服务器的响应,表示为XML。这个对象可以解析为一个DOM对象。
5)status属性
用于返回服务器的HTTP状态码,常用的状态码如下表所示:
6)statusText属性
用于返回HTTP状态码对应的文本,如OK或Not Found(未找到)等。
1、XMLHttpRequest对象的由来
Ajax使用的技术中,最核心的技术就是XMLHttpRequest,它是一个具有应用程序接口的JavaScript对象,能够使用超文本传输协议(HTTP)连接一个服务器,是微软公司为了满足开发者的需要,于1999年在IE5.0浏览器中率先推出的。现在许多浏览器都对其提供了支持,不过实现方式与IE有所不同。
2、初始化XMLHttpRequest对象
在使用XMLHttpRequest对象发送请求和处理响应之前,首先需要初始化该对象,由于XMLHttpRequest不是一个W3C标准,所以对于不同的浏览器,初始化的方法也是不同的。通常情况下,初始化XMLHttpRequest对象只需要考虑两种情况,一种是IE浏览器,一种是非IE浏览器。下面分别进行介绍。
1)IE浏览器
IE浏览器把XMLHttpRequest实例化为一个ActiveX对象。具体方法如下:
var http_request = new ActiveXObject("Msxml2.XMLHTTP");
或
var http_request = new ActiveXObject("Microsoft.XMLHTTP");在上面的语法中,Msxml2.XMLHTTP和Microsoft.XMLHTTP是针对IE浏览器的不同版本而进行设置的,目前比较常用的是这两种。
2)非IE浏览器
非IE浏览器(如Firefox、Opera、Mozilla、Safari)把XMLHttpRequest对象实例化为一个本地JavaScript对象。具体方法如下:
var http_request = new XMLHttpRequest();
为了提高程序的兼容性,可以创建一个跨浏览器的XMLHttpRequest对象。创建一个跨浏览器的XMLHttpRequest对象其实很简单,只需要判断一下不同浏览器的实现方式,如果浏览器提供了XMLHttpRequest类,则直接创建一个实例,否则实例化一个ActiveX对象。具体代码如下:
if(window.XMLHttpRequest){ http_request = new XMLHttpRequest(); }else if(window.ActiveXObject){ try{ http_request = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ http_request = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ } } }在上面的代码中,调用window.ActiveXObject将会返回一个对象,或是null。在if语句中,会把返回值看作是true或false(如果返回的是一个对象,则为true;否则返回null,则为false)。
3、XMLHttpRequest对象的常用方法
XMLHttpRequest对象提供了一些常用的方法,通过这些方法可以对请求进行操作。下面对XMLHttpRequest对象的常用方法进行介绍。
1)open()方法
用于设置进行异步请求目标的URL、请求方法以及其他参数信息。其具体语法如下:
open("method",URL"[,asyncFlag[,"userName"[,"password"]]])method:用于指定请求的类型,一般为GET或POST。
URL:用于指定请求地址,可以使用绝对地址或者相对地址,并且可以传递查询字符串。
asyncFlag:可选参数,用于指定请求方式,异步为true,同步为false,默认为true。
userName:可选参数,用于指定请求用户名,没有时可以省略。
password:可选参数,用于指定请求密码,没有时可以省略。
例如:设置异步请求目标为register.jsp,请求方法为GET,请求方式为异步的代码如下:
open("GET","register.jsp",true);
2)send()方法
用于向服务器发送请求。如果请求声明为异步,该方法将立即返回,否则将等到接收到响应为止。其语法格式如下:
send(content)
content:用于指定发送的数据,可以是DOM对象的实例、输入流或字符串。如果没有参数需要传递,可以设置为null。
例如:向服务器发哦是哪个一个不包含任何参数的请求,可以使用下面的代码:
http_request.send(null);
3)setRequestHeader()方法
用于为请求的HTTP头设置值。其具体语法格式如下:
setRequestHeader("header","value")header:用于指定HTTP头。
value:用于为指定的HTTP头设置值。
注意:setRequestHeader()方法必须在调用open()方法之后才能调用。
例如:在发送POST请求时,需要设置Content-Type请求头的值为“application/x-www-form-urlencoded”,这时就可以通过setRequestHeader方法进行设置、具体代码如下:
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
4)abort()方法
用于停止或放弃当前异步请求。其语法格式如下:
abort()
5)getResponseHeader()方法
用于以字符串形式返回指定的HTTP头信息。其语法格式如下:
getResponseHeader("headerLabel")headerLabel:用于指定HTTP头,包括Server、Content-Type和Date等。
例如:要获取HTTP头Content-Type的值,可以使用以下代码:
http_request.getResponseHeader("Content-Type");
6)getAllResponseHeaders()方法
用于以字符串形式返回完整的HTTP头信息,其中包括Server、Content-Type和Content-Length。其语法格式如下:
getAllResponseHeaders()例如,应用下面的代码调用getAllResponseHeaders()方法,将弹出对话框显示完整的HTTP头信息。
alert(http_request.getAllResponseHeaders());
4、XMLHttpRequest对象的常用属性
XMLHttpRequest对象提供了一些常用属性,通过这些属性可以获取服务器的响应状态及相应内容。下面将对XMLHttpRequest对象的常用属性进行介绍。
1)onreadystatechange属性
用于指定状态改变时所触发的事件处理器。在Ajax中,每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数。
例如,指定状态改变时触发JavaScript函数getResult()的代码如下:
http_request.onreadystatechange = getResult;
注意:在指定所触发的事件处理器时,所调用的JavaScript函数不能添加小括号及指定参数名。不过这里可以使用匿名函数。例如,需要调用带参数的函数getResult(),可以使用如下代码:
http_request.onreadystatechange = function(){ getResult("添加的参数"); };
2)readyState属性
用于获取请求的状态。该属性包括5个属性值,如下表所示:
3)responseText属性
用于获取服务器的响应,表示为字符串。
4)responseXML属性
用于获取服务器的响应,表示为XML。这个对象可以解析为一个DOM对象。
5)status属性
用于返回服务器的HTTP状态码,常用的状态码如下表所示:
6)statusText属性
用于返回HTTP状态码对应的文本,如OK或Not Found(未找到)等。
相关文章推荐
- 详解AJAX核心 —— XMLHttpRequest 对象 (下)
- 详解AJAX核心 —— XMLHttpRequest 对象 (上)
- AJAX核心对象-- XMLHttpRequest 对象使用详解 (一)
- AJAX核心对象-- XMLHttpRequest 对象使用详解 (一)
- AJAX核心对象-- XMLHttpRequest 对象使用详解 (二)
- 详解AJAX核心中的XMLHttpRequest对象
- 详解AJAX核心中的XMLHttpRequest对象
- Ajax核心对象-- XMLHttpRequest 对象使用详解
- js技术:该函数返回ajax需要的关键对象:xmlhttprequest
- AJAX核心对象-- XMLHttpRequest 对象使用详解 (二)
- AJAX核心对象-- XMLHttpRequest 对象使用详解 (一)
- [翻译]AJAX XMLHttpRequest对象 详解
- AJAX核心对象-- XMLHttpRequest 对象使用详解 (二)
- Ajax中的XMLHttpRequest对象详解
- AJAX技术使用XMLHttpRequest对象传递参数的中文乱码问题
- 详解AJAX核心中的XMLHttpRequest对象
- Ajax-核心对象--XMLHttpRequest 对象使用详解
- 艾伟:详解AJAX核心 —— XMLHttpRequest 对象 (上)
- 详解AJAX核心 —— XMLHttpRequest 对象
- AJAX核心对象-- XMLHttpRequest 对象使用详解 (二)