JavaScript:创建ajax简单应用

创建ajax步骤:创建ajax对象、连接到服务器、发送请求、接收返回值。实例如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>my ajax</title>
<script type="text/javascript">
window.onload = function(){
	var oBtn = document.getElementById('btn1');

	oBtn.onclick = function(){
		//1.创建一个ajax对象 
		var oAjax = new XMLHttpRequest();
		//2.连接服务器
		//open(方法,文件名,异步传输)
		oAjax.open('GET','abc.txt?t='+new Date().getTime(),true); //?去缓存
		//3.发送请求
		oAjax.send();
		//4.接收返回信息
		oAjax.onreadystatechange = function(){
			/*readyState = 
			0 (未初始化)还没有调用open()方法
			1 (载入)已调用send()方法,正在发送请求
			2 (载入完成)send()方法完成,已收到全部响应内容 
			3 (解析)正在解析响应内容
			4 (完成)响应内容解析完成,可以在客户端调用了
			*/
			if(oAjax.readyState==4) //读取完成
			{
				if(oAjax.status == 200) //status表示请求结果,200表示读取成功,除了200基本都是失败
				{
					alert("success:"+oAjax.responseText);
				}
				else{
					alert("failed:"+oAjax.status);
				}
			}
		};
	};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="按钮"></input>
</body>
</html>

注意:该例程需要在本地服务器上运行,不然无法使用ajax。

使用wamp搭建的服务器运行结果
直接路径运行结果

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章