XMLHttpRequest是Ajax的核心对象,通过此对象,Javascript可以以异步或同步的方式与服务器端通信。
一,IE和其他浏览器创建该对象的方法
二,open()
open()是用来初始化XHLHttpRequest连接的函数。
三,send()
send()是传送数据到服务器端的函数
四,onreadystatechange
当指定XMLHttpRequest为异步传输时,发生任何状态的变化,该对象都会调用onreadystatechange所指定的Javascript函数。
五,responseText
responseText所记录的是服务器所返回的所有文字内容
实例:
六,readyState
readyState是XMLHttpRequest处理的状态,通常会在onreadystatechange所指定的函数中去检查当前的处理状态,所有可能的值如下:
七,status
八,statusText
在statue里所记录的是HTTP的返回代码,但是在statusText中所记录的则是代码相对应的文字消息,代码如下:
例如,若取得的status为404,statueText中就会是“Not Found”
九,abort()
abort()这个函数可以用来终止目前的连接。可以设置一个定时器,在向服务器发出请求后的一段时间终止连接,避免因为服务器处理过久而造成的问题。
十,getAllResponseHeaders()
getAllResponseHeaders()这个函数可以取得所有的服务器响应的HTTP头
十一,getResponseHeader()
getResponseHeader()取得指定栏位的名称。
参数
field 指定的HTTP头栏位名称,如“Content-Type”、“Server”或“Content-Length”等
实例
十二,setRequestHeader()
在某些情况下也需要自定义HTTP请求的栏位,可以用SetRequsetHeader()这个函数来实现。
参数
field 栏位名称
value 栏位内容
实例
实际送出的HTTP请求如下:
在实现Ajax时,有时候会发现,XMLHttpRequest的动作都已经完成,而且没有任何错误,但是所取得的总是旧的数据,这通常都是浏览器或者服务器缓存所造成的结果。有两个方法可以解决这个问题。
(1)修改CGI或Server Side Script,让返回的HTTP Header中带有“Cache-Control:no-cache”或“Pragma:no-cache”
使用这两个HTTP Header会使浏览器不对这个网页保存任何缓存。
(2)使用XMLHttpRequest的setRequestHeader()函数
xmlhttp.setRequsetHeader('If-Modified-Since','0');
通常在“If-Modified-Since”栏位的后面是时间描述,如“Thu,16 Feb 2006,14:30:00 GMT”,如果服务器发现这个页面的更新时间是在此之前,服务器会返回“304 Not Modified”的响应。不过CGI或Server Side Script的文件变更时间有时候会较早,在这种情况下,前端的Ajax就无法得到正确的结果,解决方法就是将这个栏位设置为0,让服务器不要去做时间的判断。
十三,onload
onload与onreadystatechange类似,但不同的是,onload只有在整个网页被完整下载后才会被调用,也就是在状态是4的时候才会被调用。需要注意的是,IE并不支持onload这个属性。
一,IE和其他浏览器创建该对象的方法
- var xmlhttp = false;
- //当指定XMLHttpRequest为异步传输时(false),发生任何状态的变化,该对象都会调用onreadystatechange所指定的函数
- if (window.XMLHttpRequest) { //Mozilla、Safari等浏览器
- xmlhttp = new XMLHttpRequest();
- }
- else if (window.ActiveXObject) { //IE浏览器
- try {
- xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
- } catch (e) {
- try {
- xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
- } catch (e) {}
- }
- }
二,open()
open()是用来初始化XHLHttpRequest连接的函数。
1,参数
参数 | 说明 |
method | GET或者是POST,代表所要使用的HTTP的方法 |
url | 要访问的URL |
asyncFlag | true代表异步操作,false代表同步通信,可以省略此参数 |
user | 账号名称,可以省略此参数 |
password | 密码,可以省略此参数 |
2,实例
- xmlhttp.open('get','chkname.php?name='+name,true);
三,send()
send()是传送数据到服务器端的函数
1,参数
参数 | 说明 |
content | 所要传送的内容 |
2,示例
- xmlhttp.send('var1=value1&var2=value2');
- xmlhttp.send('');
四,onreadystatechange
当指定XMLHttpRequest为异步传输时,发生任何状态的变化,该对象都会调用onreadystatechange所指定的Javascript函数。
- xmlhttp.onreadystatechange = function(){
- //当指定XMLHttpRequest为异步传输时(false),发生任何状态的变化,该对象都会调用onreadystatechange所指定的函数
- if(xmlhttp.readyState == 4){ //XMLHttpRequest处理状态,4表示处理完毕
- if(xmlhttp.status == 200){ //服务器响应的HTTP代码,200表示正常
- var msg = xmlhttp.responseText; //获取响应页的内容
- if(msg == '1'){ //chkname.php页面查找数据库,数据库没有该用户返回1
- $('namediv').innerHTML="<font color=green>恭喜您,该用户名可以使用!</font>";
- cname2 = 'yes';
- }else if(msg == '2'){ //数据库存在该用户返回0
- $('namediv').innerHTML="<font color=red>用户名被占用!</font>";
- cname2 = '';
- }else{
- $('namediv').innerHTML="<font color=red>"+msg+"</font>";
- cname2 = '';
- }
- }
- }
- }
五,responseText
responseText所记录的是服务器所返回的所有文字内容
实例:
- var msg = xmlhttp.responseText;
六,readyState
readyState是XMLHttpRequest处理的状态,通常会在onreadystatechange所指定的函数中去检查当前的处理状态,所有可能的值如下:
值 | 说明 |
0 | 尚未开始 |
1 | 读取中 |
2 | 已下载完毕 |
3 | 信息交换中 |
4 | 处理完毕 |
实例:
- if(xmlhttp.readyState == 4){ //XMLHttpRequest处理状态,4表示处理完毕
- ......
- }
七,status
status是服务器所响应的HTTP代码。通常会在onreadystatechange所指定的函数中去检查服务器的返回代码,以便在处理数据前先确认服务器有正确的响应。几个重要的代码如下:
代码 | 消息内容 | 注释 |
200 | OK | 正常 |
400 | Bad Request | 错误的HTTP请求 |
401 | Unauthorized | 未经过认证 |
403 | Forbidden | 未经过允许的访问 |
404 | Not Found | 未找到所请求的文件 |
500 | Internal Server Error | 服务器错误 |
实例:
- if(xmlhttp.readyState == 4){ //XMLHttpRequest处理状态,4表示处理完毕
- if(xmlhttp.status == 200){ //服务器响应的HTTP代码,200表示正常
- var msg = xmlhttp.responseText; //获取响应页的内容
- ......
- }
- }
八,statusText
在statue里所记录的是HTTP的返回代码,但是在statusText中所记录的则是代码相对应的文字消息,代码如下:
代码 | 消息内容 |
200 | OK |
400 | Bad Request |
401 | Unauthorized |
403 | Forbidden |
404 | Not Found |
500 | Internal Server Error |
九,abort()
abort()这个函数可以用来终止目前的连接。可以设置一个定时器,在向服务器发出请求后的一段时间终止连接,避免因为服务器处理过久而造成的问题。
- function onRcvData() {
- }
- function checkStatus() {
- if(xmlhttp.readyState!=4){
- xmlhttp.abort();
- alert('连接超时被中断');
- }
- }
- xmlhttp.onreadystatechange = onRcvData;
- xmlhttp.open('GET',url,true);
- setTimeout('checkStatus()',5000);
- xmlhttp.send('');
十,getAllResponseHeaders()
getAllResponseHeaders()这个函数可以取得所有的服务器响应的HTTP头
- <span style="font-family:Microsoft YaHei;font-size:12px;">function onRecData() {
- if(xmlhttp.readyState == 4) {
- alert(xmlhttp.getAllResponseHeaders());
- }
- }</span>
十一,getResponseHeader()
getResponseHeader()取得指定栏位的名称。
参数
field 指定的HTTP头栏位名称,如“Content-Type”、“Server”或“Content-Length”等
实例
- function onRecData() {
- if(xmlhttp.readyState ==4){
- alert(xmlhttp.getResponseHeader('Content-Type'));
- }
- }
十二,setRequestHeader()
在某些情况下也需要自定义HTTP请求的栏位,可以用SetRequsetHeader()这个函数来实现。
参数
field 栏位名称
value 栏位内容
实例
- xmlhttp.open("GET",url,true);
- xmlhttp.setRequestHeader('If-Modified-Since','0');
- GET index.html HTTP/1.1
- Accept:*/*
- Accept-Language:zh-cn
- If-Modified-Since:0
- Accept-Engoding:gzip,deflate
- User-Agent:Mozilla/4.0(compatible;MSIE6.0;windows NT 5.1;SV1)
- Connection:Keep-Alive
(1)修改CGI或Server Side Script,让返回的HTTP Header中带有“Cache-Control:no-cache”或“Pragma:no-cache”
- HTTP/1.0 200 OK
- Cache-control:no-cache
- Pragma:no-cache
- Content-Type:text/xml
(2)使用XMLHttpRequest的setRequestHeader()函数
xmlhttp.setRequsetHeader('If-Modified-Since','0');
通常在“If-Modified-Since”栏位的后面是时间描述,如“Thu,16 Feb 2006,14:30:00 GMT”,如果服务器发现这个页面的更新时间是在此之前,服务器会返回“304 Not Modified”的响应。不过CGI或Server Side Script的文件变更时间有时候会较早,在这种情况下,前端的Ajax就无法得到正确的结果,解决方法就是将这个栏位设置为0,让服务器不要去做时间的判断。
十三,onload
onload与onreadystatechange类似,但不同的是,onload只有在整个网页被完整下载后才会被调用,也就是在状态是4的时候才会被调用。需要注意的是,IE并不支持onload这个属性。
- xmlhttp.open('GET',url,true);
- xmlhttp.onload = function() {
- alert(xmlhttp.readyState + ':' + xmlhttp.responseText);
- };
- xmlhttp.send('');