JS中的Ajax技术的核心就是XMLHttpRequest对象。这个对象充当着浏览器中的脚本(客户端)与服务器之间的中间人的角色。以往的请求都由浏览器发出,而JavaScript通过这个对象可以自己发送请求,同时也自己处理响应。
现在我们先创建一个html页面,命名为test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Ajax学习</title>
<script type="text/javascript" src="test.js">
</head>
<body>
<div id="testdiv"></div>
</body>
</html>
其中引的test.js文件与当前html页面文件同在一个文件夹下
为了模拟服务器的响应,在test.html所在文件夹下再建一个文本文件test.txt,
包含内容:”这里面存的是模拟服务器的文本”;
这个test.txt文件将充当服务器端脚本的输出。多数情况下,服务器脚本接到请求之后,会做出相应的处理后才有所返回,这里为了方便,就直接用这个test.txt文件演示就行了,希望不会给大家带来太多的困惑。
XMLHttpRequest对象的历史比较早,几乎支持所有的浏览器,但是不同的浏览器实现XMLHttpRequest对象的方式有所不同,例如IE浏览器。为了能够保证能够跨浏览器调用,我们不得不为同样的事情写不同的代码分支了。
在IE浏览器上面,创建XMLHttpRequest对象就要使用下面的代码了:
var request = new ActiveXObject("Msxml2.XMLHTTP.3.0");
但是在其他浏览器上相对比较简单,就是基于XMLHttpRequest对象来创建对象
var request = new XMLHttpRequest();
但是,这里有一个比较麻烦的问题是:不同的IE版本中使用的XMLHTTP对象也是不完全相同的。为了兼容所有的浏览器,我们在test.js中定义这么一个函数,用来处理跨浏览器和跨版本时实现XMLHTTP对象
function getHTTPObject(){
//筛选IE浏览器
if((typeof XMLHttpRequest) == 'underfine'){
XMLHttpRequest = function(){
try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP");}
catch(e){}
return false;
}
}
//针对其他浏览器
return new XMLHttpRequest();
}
getHTTPObject()方法通过对象检测技术检测了XMLHttpRequest对象,如果失败,则继续检测其他方法,最终返回false或一个新的XMLHttpRequest(或XMLHTTP)对象。
上面的getHTTPObject方法返回了一个XMLHttpRequest(或XMLHTTP)对象,现在我们定义一个函数getNewContent(),用这个对象来实现与服务器的交流。
function getNewContent(){
var request = getHTTPObject();//调用前面的函数,得到XMLHttpRequest(或XMLHTTP)对象
if(request){
request.open('GET','test.txt',true);//指定服务器上将要访问的文件
request.onreadystatechange = function(){
if(request.readyState == 4){
var para = document.createElement('p');
var txt = document.createTextNode(request.responseText);
para.appendChild(txt);
var testdiv = document.getElementById("testdiv");
testdiv.appendChild(para);
}
}
request.send(null);
}else{
alert("你的浏览器暂不支持XMLHttpRequest");
}
}
现在可以执行getNewContent()函数,将test.txt里的内容加载到test.html里面了
window.onload = function(){
getNewcontent();
}
审查test.html页面的元素,就会发现,原来的
<body>
<div id="testdiv"></div>
</body>
变成了
<body>
<div id="testdiv">
<p>这里面存的是模拟服务器的文本</p>
</div>
</body>
这就证明了,我成功的从test.txt中把里面的内容取出来,并且在test.html里展示出来。
在getNewContent()函数里面,可能会有陌生的一些属性,我在这里顺便解释一下:
1、request.open().
open()指定服务器上将要访问的文件。一般只需指定三个参数:第一个参数指定请求的类型,GET/POST/SEND。第二个参数指定访问的文件的路径,注意该文件必须与test.html处于同一项目下。第三个参数指定是以同步的方式还是异步的方式发送和处理,true表示异步,false表示同步。
2、request.onreadystatechange.
这里的onreadystatechange是XMLHttpRequest的一个属性,它是一个事件处理函数,会在服务器给XMLHttpRequest对象送回响应的时候被触发执行。在这个函数中,可以根据服务器的具体响应做相应的处理。
3、request.readystate.
readystate属性存有服务器响应的状态信息,服务器在向XMLHttpRequest对象发回响应时,该对象有许多属性可用,浏览器回在不同的阶段更新readystate属性的值,它有5个可能的值:
<1>0表示未初始化
<2>1表示正在加载
<3>2表示加载完毕
<4>3表示正在交互
<5>4表示完成
当readystate属性的值为4的时候,我们就可以访问服务器发送回来的数据并利用它们了。
还有就是,每当readystate的值改变的时候,onreadystatechange函数就会被执行。
4、request.responseText
我们可以用responseText属性来取到由服务器返回的数据
5、request.send()
该方法向服务器发送请求
例如:
var params = "username=jack&pwd=123456";
request.send(params);
//向服务器发送两个值,值之间用&号隔开
在最后,我试验一下open()方法中的同步和异步的区别
在getNewContent()方法中,我添加两行代码
function getNewContent(){
var request = getHTTPObject();//调用前面的函数,得到XMLHttpRequest(或XMLHTTP)对象
if(request){
request.open('GET','test.txt',true);//指定服务器上将要访问的文件
request.onreadystatechange = function(){
if(request.readyState == 4){
alert("step 1");
var para = document.createElement('p');
var txt = document.createTextNode(request.responseText);
para.appendChild(txt);
var testdiv = document.getElementById("testdiv");
testdiv.appendChild(para);
}
}
request.send(null);
}else{
alert("你的浏览器暂不支持XMLHttpRequest");
}
alert("step 2");
}
此时open()函数中我设定第三个参数为true,即异步方式,
刷新页面, 你会发现先输出的是 step 2;
这就证明了脚本不会等待send()的响应,而是继续往下执行,因为服务器响应的速度比客户端慢。
加入你把true改成false,也就是同步的方式。那么,无论服务器的响应速度有多慢,step 2 都会等到 step 1 输出后再输出。
以上所有内容是本人在看《JavaScript DOM 编程艺术》这本书和百度后整理出来的,希望对大家的学习有所帮助。还有,感觉《JavaScript DOM 编程艺术》这本书不错,大家可以看一下。(大神勿喷)