Javascript 初学--基础5（AJAX）

AJAX小例子，注意要在服务器环境下来运行，简易安装集成环境，wamp或者xampp

<script>
function ajax(url, fnSucc, fnFaild)
{
	//1.建立Ajax对象
	var oAjax=null;
	if(window.XMLHttpRequest)
	{
		oAjax=new XMLHttpRequest();
	}
	else
	{
		oAjax=new ActiveXObject("Microsoft.XMLHTTP");
	}
	//2.链接服务器
	oAjax.open('GET', url, true);
	//3.发送请求
	oAjax.send();
	//4.接收服务器的返回
	oAjax.onreadystatechange=function ()
	{
		if(oAjax.readyState==4)	//完成
		{
			if(oAjax.status==200)	//成功
			{
				fnSucc(oAjax.responseText);
			}
			else
			{
				if(fnFaild)
					fnFaild(oAjax.status);
			}
		}
	};
}
</script>
<script>
	window.onload = function(){
		var aBtn = document.getElementsByTagName('input');
		var oDiv = document.getElementById("div1");
		var i = 0;
		for(i = 0; i<aBtn.length; i++){
			aBtn[i].index = i;
			aBtn[i].onclick = function(){
				ajax(this.index+1+'.txt',function(str){
						oDiv.innerHTML = str;
				})
			};
		}
	}	
</script>
<input type="button" value="读取1" />
<input type="button" value="读取2" />
<input type="button" value="读取3" />
<div id="div1"></div>

缓存的问题，加个？xx=yy 便可

<script src="ajax.js"></script>
<script>
	window.onload = function(){
		var oBtn = document.getElementById("btn1");
		oBtn.onclick = function(){
			ajax('1.txt?t='+new Date().getTime(),function(str){
				alert(str);
			})
		}
	}	
</script>
<input type="button" id="btn1" value="读取" />

读取多个json文件，并返回其中的值

page1.txt           [{user:'aaa2',pass:'bbb'},{user:'ccc',pass:'ddd'},{user:'eee',pass:'fff'}]

<script src="ajax.js"></script>
<script>
	window.onload = function(){
		var oUl = document.getElementById('ul1');
		var aBtn = document.getElementsByTagName('a');
		var i = 0;
		for(var i = 0;i<aBtn.length;i++){
			aBtn[i].index = i;//给每个a都加上索引，才能知道点击的是哪一个键
			aBtn[i].onclick = function(){
				ajax('page'+(this.index+1)+'.txt',function(str){
					var aData = eval(str);//可计算某个字符串，并执行其中的的 JavaScript 代码
					oUl.innerHTML = '';
					for(i = 0; i<aData.length; i++){
						var oLi = document.createElement('li');
						oLi.innerHTML = aData[i].user+'|'+aData[i].pass;
						oUl.appendChild(oLi);
					}
				})
			}
		}
	}
</script>
<ul id="ul1"></ul>
<a href="javascript:;">第一页</a>
<a href="javascript:;">第二页</a>
<a href="javascript:;">第三页</a>

    

ajax 小例子 

<script>
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
	//1建立ajax对象，兼容ie6的那种
	var oAjax = null;
	if(window.XMLHttpRequest){
		oAjax = new XMLHttpRequest();
	} else {
		oAjax = new ActiveXObject('Microsoft.XMLHTTP');//IE6内置插件
	}
	//2链接服务器
	//open方法（方法，url，是否异步）
	oAjax.open('GET','1.txt',true); 
	//3发送请求
	oAjax.send();
	//接收返回信息
	oAjax.onreadystatechange = function(){
//				alert(oAjax.readyState);//请求状态，4是成功
		if(oAjax.readyState == 4){
			//alert(oAjax.status);//200表明成功 404文件找不到
			if(oAjax.status == 200){
				alert('成功：'+oAjax.responseText);//返回服务器的内容
			}else{
				alert('失败');
				}
			}
		}
	}
}
</script>
<input type="button" value="点击" id="btn1" />

ajax javascript 封装和调用

ajax.js

function ajax(url, fnSucc, fnFaild)
{
	//1建立ajax对象，兼容ie6的那种
	var oAjax = null;
	if(window.XMLHttpRequest){
		oAjax = new XMLHttpRequest();
	} else {
		oAjax = new ActiveXObject('Microsoft.XMLHTTP');//IE6内置插件
	}
	//2链接服务器
	//open方法（方法，url，是否异步）
	oAjax.open('GET',url,true); 
	//3发送请求
	oAjax.send();
	//接收返回信息
	oAjax.onreadystatechange = function(){
		if(oAjax.readyState == 4){
			if(oAjax.status == 200){
				fnSucc(oAjax.responsrText);
			}else{
				if(fnFaild){
					fnFaild();
				}
			}
		}
	}
}

xxx.html

<script src="ajax.js"></script></script>
<script>
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
		ajax('1.txt',function(str){
			alert(str);
		},function(){
			alert("失败了")
		})
	}
}
</script>
<input type="button" value="点击" id="btn1" />