创建ajax库过程中碰到的几个问题

发布时间：2020-12-16 00:22:59 所属栏目：百科来源：网络整理

导读：问题一：针对非IE浏览器创建时，必须这样写，避免浏览器报错导致在IE下执行不到后面的语句。 if(window.XMLHttpRequest){ var oAjax=new XMLHttpRequest();} 因为这样写，在IE下执行时，浏览器会认为是Undefined，而执行else后的语句： else{ var oAjax=new

问题一：

针对非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}]

其实就是一个以字符串形式存在的数组，数组里每个元素都是一个json。接下来会用到eval这个方法，把responseText获取的字符串转化成数组，并赋给变量arr.

<html>
	<head>
		<meta charset="utf-8"/>
		<title>写一个自己的ajax库</title>
		<script src="ajax.js"></script>
		<script>
			window.onload=function(){
				oBtn=document.getElementById("btn1");
				oUl=document.getElementById("ul1");
				oBtn.onclick=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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!