ajax处理数据（html,xml,json）

html 文件

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>ajax test</title>
<script src="js/ajax.js"></script>
<script src="js/base.js"></script>
<script type="text/javascript">
	var ajax=new ajax();
	function send(){
		/*var str=ajax.get("deal.PHP?name=zhangsan&age=22"+Math.random(),"text",function (data){
			alert($("show"));	
			$("show").innerHTML=data;
		});*/
		/*ajax.post("deal.PHP","xml","name=zhangsan&age=13&sex=nan",function (obj){
			var htmlobj=obj.getElementsByTagName('name')[0];
			alert(htmlobj.childNodes[0].nodeValue);
			$("show").innerHTML=htmlobj.childNodes[0].nodeValue+"<br  />";
			while(htmlobj.nextSibling.nodeType===1){
				var i=0;
				while(i<htmlobj.nextSibling.childNodes.length){
					$("show").innerHTML+=htmlobj.nextSibling.childNodes[i].textContent+"<br   />";
					i++;
				}
				htmlobj=htmlobj.nextSibling;
			}*/
			var str=ajax.get("deal.PHP?name=zhangsan&age=22"+Math.random(),"json",function (data){	
					var str='';
					 for (var i in data)
					  {
						 if(i=="introduce")
						 {
							 for (var j in data[i]){
								 str +=  j + '=>' + data[i][j] + '<br  />';
								 j++;
							 }
						 }
						 else{
						    str +=  i + '=>' + data[i] + '<br  />';
						   
						 }
						 i++;
					  }
				$("show").innerHTML=str;
		});
	}
</script>
</head>
<body>
<button name="aaa" onclick="send()">点我试试！</button>
		<div id="show">
			
		</div>
</body>
</html>

ajax.js 文件

<pre name="code" class="javascript">function ajax(){
	var _this=this;
	this.xhr='';
	this.contenttype='';
	this.get=function (url,contenttype,fun){
		_this.contenttype=contenttype;
		_this.xhr=createajax();
		_this.fun=fun;
		_this.xhr.onreadystatechange=chuli;
		_this.xhr.open("get",url,true);
		_this.xhr.send(null);
		return _this.data;
	};
	this.post=function (url,data,fun){
		_this.xhr=createajax();
		_this.contenttype=contenttype;
		_this.fun=fun;
		_this.xhr.onreadystatechange=chuli;
		_this.xhr.open("post",true);
		_this.xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		_this.xhr.send(data);
	};
	function createajax(){
		if(XMLHttpRequest){
			return new XMLHttpRequest(); 
		}
		if(ActiveXObject){
			return new ActiveXObject("microsoft.XMLHTTP");
		}
	}
	function chuli(){
		if(_this.xhr.readyState===4&&_this.xhr.status==200){
			if(_this.contenttype=="xml"){
				alert(_this.xhr.responseXML);
				_this.fun(_this.xhr.responseXML);
			}
			else if(_this.contenttype=="json"){
				var obj='';
				eval("obj="+_this.xhr.responseText);
				alert(typeof(obj));
				//if(typeof(obj)=="object")
					_this.fun(obj);
				//_this.fun(false);
			}
				
			else
				_this.fun(_this.xhr.responseText);
		}
	}
}

base.js 文件

<pre name="code" class="javascript">function $(str){
		var htmlobj=document.getElementById(str);
		return htmlobj;
		
}

deal.PHP 文件

<pre name="code" class="PHP"><?PHP
//header("Content-Type:text/xml;charset=utf-8");
header("Content-Type:text/html;charset=utf-8");
header("Cache-Control:no-cache");
	
	//echo $str;
	/*$file=fopen("save.txt","a");
	fwrite($file,$str);
	fclose($file);*/
	/*echo "<?xml version='1.0' encoding='UTF-8'?>" .
			"<root>" .
			"<name>xxxx</name>" .
			"<sex>男</sex>" .
			"<introduce>" .
				"<msgone>单身,求交往!</msgone>" .
				"<msgtwo>请叫我,码农!程序猿!</msgtwo>" .
			"</introduce>" .
			"</root>";*/
	echo '{
		"name":"张珊","age":"29","sex":"男","introduce":{
						"msgone":"单身,求交往!","msgtwo":"请叫我,码农!程序猿!"
					}
 
	}';
?>

ajax处理数据（html,xml,json）

猜你在找的Ajax相关文章