问题一:
针对非IE浏览器创建时,必须这样写,避免浏览器报错导致在IE下执行不到后面的语句。
if(window.XMLHttpRequest){
var oAjax=new XMLHttpRequest();
}
因为这样写,在IE下执行时,浏览器会认为是Undefined,而执行else后的语句:
else{
var oAjax=new activeXObject("Microsoft.XMLHTTP");
}
问题二:
在链接服务器时:
open(method,url,true);
其中第三个参数表示:异步。异步即多个事情一起发生。如果改为false就没有必要用aJax了。
问题三:
在判断浏览器与服务器的传输状态时用到这个事件:
oAjax.onreadystatechange=function(){
}
其中readyState这个参数,不同的值,表示浏览器与服务器的交互的一个状态。
readyState==0表示Ajax对象刚建立。
readyState==1表示已经链接服务器。
readyState==2表示已经像服务器载入数据。
readyState==3表示编译解码完成。
readyState==4表示链接完成。注意:完成并不代表成功。
在这个库里,我们只用到4这个值。
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){
if(oAjax.status==200){ //当status值等于200时,表示链接成功。
alert(oAjax.responseText); //responseText的值为所访问的文件返回的文本对象。
}
else{
alert(oAjax.status); //如果失败会返回status值为404的提示。
}
}
}
注意:readyState的第二个单词为大写,都写成小写,系统不会报错,这样的错误比较难找的。
下面贴上一个完整的AJAX库。
function ajax(url,fnSucc,fnFail){
if(window.XMLHttpRequest){
var oAjax=new XMLHttpRequest();
}
else{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.链接服务器
//open('方法','文件名',同步(true)还是异步false)) Ajax存在的意义是是读取服务器的数据
oAjax.open('GET','a.txt?t='+new Date().getTime(),true); //为了清除缓存可以在文件名后加?a=?
//3.发送请求
oAjax.send();
//4.接受返回
oAjax.onreadystatechange=function(){
// oAjax.readyState 浏览器和服务器交互到哪里了?4代表返回完成。0:(未初始化);1:已载入send()方法,正在发送。2.载入完成,即send()方法完成,已收到全部相应内容
//3.(解析)正在解析相应内容 4.(完成)相应内容解析完成,可以在客户端调用了。
if(oAjax.readyState==4)//读取完成,即使出错也算完成,也会提示4
{
if(oAjax.status==200) //读取成功
{
fnSucc(oAjax.responseText);
}
else{
if(fnFail){
fnFail(oAjax.status);
}
}
}
}
}
在我的服务器的www这个文件夹里有一个叫a.txt的文件。这个文件里有一个数组:
[{username:'大牛',password:123456},{username:'大牛',password:123456},{username:'大牛',password:123456},{username:'大牛',password:123456},{username:'大牛',password:123456}]
其实就是一个以字符串形式存在的数组,数组里每个元素都是一个json。接下来会用到eval这个方法,把responseText获取的字符串转化成数组,并赋给变量arr.
<html>
<head>
<meta charset="utf-8"/>
<title>写一个自己的ajax库</title>
<script src="ajax.js"></script>
<script>
window.οnlοad=function(){
oBtn=document.getElementById("btn1");
oUl=document.getElementById("ul1");
oBtn.οnclick=function(){
ajax("a.txt",function(str){
var arr=eval(str); <span style="color:#ff6666;">//将获取的字符串转化成数组赋给arr。</span>
//alert(arr);
for(var i=0;i<arr.length;i++){
var oLi=document.createElement("li");
oLi.innerHTML="用户名:"+arr[i].username+" 密码:"+arr[i].password+".";
oUl.appendChild(oLi);
}
});
}
}
</script>
</head>
<body>
<input type="button" value="click" id="btn1"/>
<ul id="ul1">
<li>用户名:张三 密码:123456</li>
</ul>
</body>
</html>