自己写的ajax

最新推荐文章于 2023-12-12 20:32:43 发布

原创最新推荐文章于 2023-12-12 20:32:43 发布 · 209 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #onreadystatechange #status属性 #wamp5

javascript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个简单的AJAX实现方法，通过new_ajax.js脚本发起GET请求，并展示了如何处理请求的成功与失败情况。文章详细解释了事件处理函数onreadystatechange的作用及readyState和status属性的意义。

开发环境：wamp5_1.7.4

new_ajax.js

function ajax(url, fnSucc, fnFaild)
{
	//1.创建ajax对象
	var oAjax=null;
	
	if(window.XMLHttpRequest)//做兼容性处理
	{
		oAjax=new XMLHttpRequest();
	}
	else
	{
		oAjax=new ActiveXObject("Microsoft.XMLHTTP");//ie
	}
	
	//2.连接服务器
	//open(方法, url, 是否异步)
	oAjax.open('GET', url, true);
	
	//3.发送请求
	oAjax.send();
	
	//4.接收返回
	//OnReadyStateChange
	oAjax.onreadystatechange=function ()
	{
		if(oAjax.readyState==4)
		{
			if(oAjax.status==200)
			{
				//alert('成功：'+oAjax.responseText);
				fnSucc(oAjax.responseText);
			}
			else
			{
				if(fnFaild)
				{
					fnFaild();
				}
			}
		}
	};
}

new_ajax.html

<script src="new_ajax.js"></script>
<script>
ajax('abc5.txt',function(str){
	alert(str);},function(){alert('失败了');})
	</script>

安装wamp5之后，主要关注/www文件夹，网页都放在里面，打开浏览器，输入localhost/new_ajax.html即有弹窗出现，为文件中的内容或者失败。

事件产生时，主要关注

onreadystatechange事件
readyState属性：请求状态
0   （未初始化）还没有调用open()方法
1   （载入）已调用send()方法，正在发送请求
2   （载入完成）send()方法完成，已收到全部响应内容
3   （解析）正在解析响应内容
4   （完成）响应内容解析完成，可以在客户端调用了
status属性：请求结果（200为成功响应）