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

前端之家收集整理的这篇文章主要介绍了创建ajax库过程中碰到的几个问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

问题一:

针对非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>
原文链接:https://www.f2er.com/ajax/164427.html

猜你在找的Ajax相关文章