XMLHttpRequest 是 AJAX 的基础。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
首先说明XMLHTTP是用来模拟发起浏览器的post和get请求的一个浏览器内置对象,
先搞清楚几个问题:
1.既然是浏览器对象:那么我们如何获得这个对象:
2.为什么要用这个对象
下面开始解答:
问题1:获取XMLHTTP对象:
由于浏览器不同,所用获取方式也不同,下面给出通用的获取对象代码:
var xmlhttp;
//创建XMLHTTPRequest对象
//找是 XMLHTTPRequest对象使用中最复杂的一步
if(window.XMLHttpRequest){//针对FireFox,Mozillar,Opera,Safari,IE7,ie8
xmlhttp=new XMLHttpRequest();
//针对某些特定 版本的mozillar浏览器的bug进行修正
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
//针对IE6,IE5.5,IE5
var activeName=new ActiveXObject["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0;i<activeName.length;i++){
try{
//取出一个控件名进行创建,如果创建成功就终止循环
xmlhttp=new ActiveXObject(activeName[i]);
break;
}catch(e){
}
}
}
//确认XMLHTTPRequest是否创建成功
if(!xmlhttp){
// alert();
return;
}else{
// alert(xmlhttp);
}
xmlhttp.onreadystatechange=callback;
//3.设置连接信息 true表示采用同步还是异步方式交换 true表示异步
xmlhttp.open("GET",url,false);
//4.发送数据,开始和服务器端进行交互
//同步方式下,send这句话会在服务器端数据回来后才执行完
//异步方式下send会立即完成执行
xmlhttp.send(null);
}
问题2:为什么使用该对象
因为该对象有默认的回调方法:onreadystatechange
我们可以通过xmlhttp.readyState获的该请求的完成状态,和结果属性,这里就可以写入自己想要执行的代码,来做一些处理,比如,在请求没有完成前给出等待提示
下面看代码:
function callback(){
//5.接收相应数据
//判断对象的状态是交互完成
if(xmlhttp.readyState==4){
//判断http的交互是否成功
if(xmlhttp.status==200){
// alert('交互成功!!!关闭gif图片');
//获取服务器 端返回的数据
//获取服务器端输出的纯文本的数据
var responseText=xmlhttp.responseText;
alert(responseText);
// 将数据显示在页面上
// document.getElementById("resultMess").innerHTML=responseText;
}
}else{
// alert('提示进度条gif');
}
}
相应的servlet后台返回文本数据可以了。response.getWirter().wirte("ssssssssssssssssss");
xmlhttp.open("GET","test1.txt",true); xmlhttp.send();
GET 还是 POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
GET 请求
一个简单的 GET 请求:
xmlhttp.open("GET","demo_get.asp",true); xmlhttp.send();
在上面的例子中,您可能得到的是缓存的结果。
为了避免这种情况,请向 URL 添加一个唯一的 ID:
xmlhttp.open("GET","demo_get.asp?t=" + Math.random()
,true);
xmlhttp.send();
POST 请求
一个简单 POST 请求:
xmlhttp.open("POST","demo_post.asp",true); xmlhttp.send();
如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
xmlhttp.open("POST","ajax_test.asp",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Bill&lname=Gates");
url - 服务器上的文件
open() 方法的 url 参数是服务器上文件的地址:
xmlhttp.open("GET","ajax_test.asp",true);
该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,
比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务)。
服务器响应
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性 | 描述 |
---|---|
responseText | 获得字符串形式的响应数据。 |
responseXML | 获得 XML 形式的响应数据。 |
虽然这次项目中没用到,不过觉得这个东西还是挺好的,就记录下,尽管现在有了ajax,但是这个才是原生的东西!