初识Ajax-基本解析和读取文件信息（一）

1.ajax详细解释代码

//ajax用于数据读取(GET)，上传数据(POST)的js语言
//函数(地址，成功函数，失败函数)
function ajax(url, fnSucc, fnFaild)
{
	//1.创建Ajax对象
	if(window.XMLHttpRequest)
	{
		var oAjax=new XMLHttpRequest();				
	}
	else
	{
		var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
	}				
	
	//2.连接服务器
	//open(方法，文件名，异步传输)
	oAjax.open('GET', url, true);
	
	//3.发送请求
	oAjax.send();
	
	//4.接收返回
	oAjax.onreadystatechange=function()
	{				
	/*  0 (未初始化) 还没有调用open()方法
		1 (载入) 已经调用send()方法,正在发送请求
		2 (载入完成) send()方法完成,已收到全部响应内容
		3 (解析) 正在解析响应内容
		4 (完成) 响应内容解析完成,可以在客户端调用了  */
		
		if(oAjax.readyState==4)    //读取完成
		{ 
			if(oAjax.status==200)  //成功
			{ 
				fnSucc(oAjax.responseText);
			}
			else
			{
				if(fnFaild)
				{
					fnFaild(oAjax.status);
				}
				
			}
		}
	};
}

2.ajax实例用法(获取文本信息，展现在页面上)

ajax('txt/c.txt?p='+new Date().getTime(),function(str){
  // 读取成功执行的语句
  var arr=eval(str); //eval方法将获取到的数据变成一个数组 
  
  for(var i=0;i<arr.length;i++){//数组遍历
  	var oLi = document.createElement('li'); // 创建li标签添加有关信息
  	
  	oLi.innerHTML='用户名：<strong>'+arr[i].user+
  	'</strong>   密码：<span>'+arr[i].pass+'</span>'; 
  	
  	oUl.appendChild(oLi); // 将oL 往后添加到 oUl标签里
  }
  
}, function(){
  // 读取失败执行的语句
  alert('读取失败');
});