跟后台实现数据交互代码,PHP代码库,德仔网

代码语言

代码分类

【PHP】跟后台实现数据交互

作者:The-duke / 发布于2014/9/10/ 515

模块化Ajax封装


	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	 "http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	 <title>模块化ajax封装</title>
	 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
	</head>
	<body>
	<div id="box1"></div>
	<div id="box2"></div>
	<div id="box3"></div>
	<script>
	var module_ajax = (function(){
	 var _xmlHttp = function(){
	 return new (window.ActiveXObject||window.XMLHttpRequest)("Microsoft.XMLHTTP");
	 };
	 var _AddEventToXHR = function(xhr,fun,format){
	 xhr.onreadystatechange=function(){
	 if(xhr.readyState == 4 && xhr.status == 200){
	 var tmp = "" ;
	 if(format){
	 switch (format.toLocaleLowerCase()){
	 case 'text':
	 tmp = xhr.responseText;
	 break;
	 case 'json':
	 tmp = eval('(' + xhr.responseText + ')');
	 break;
	 case 'xml':
	 tmp = xhr.responseXML;
	 break;
	 }
	 }else{
	 tmp = eval('(' + xhr.responseText + ')');
	 }
	 fun(tmp);
	 }
	 }
	 };
	 var _ajax = function(obj){
	 if(typeof obj =="object"){
	 var _xhr = _xmlHttp();
	 _AddEventToXHR(_xhr, obj.success||function(){}, obj.dataType);
	
	 if(obj.type){
	
	 switch (obj.type.toUpperCase()){
	 case "GET":
	 if(obj.data==null||obj.data==""){
	 _xhr.open("GET",obj.url+"?format="+obj.dataType,obj.async);
	 }else{
	 _xhr.open("GET",obj.url+"?"+obj.data+"&format="+obj.dataType,obj.async);
	 }
	 _xhr.send(null);
	 break;
	 case "POST":
	 _xhr.open("POST",obj.url,obj.async);
	 _xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	 if(obj.data==null){
	 obj.data="" ;
	 }
	 obj.data+="&format="+obj.dataType;
	 _xhr.send(obj.data);
	 break;
	
	 }
	 }
	 }
	
	 };
	 var get = function(url,data,fun,format,bool){
	 _ajax({
	 url:url,
	 type:"GET",
	 data:data,
	 dataType:format,
	 async:bool,
	 success:fun
	 })
	
	 };
	 var post = function(url,data,fun,format,bool){
	 _ajax({
	 url:url,
	 type:"POST",
	 data:data,
	 dataType:format,
	 async:bool,
	 success:fun
	 })
	 };
	
	 return {
	 get:get,
	 post:post,
	 ajax:_ajax
	 }
	})()
	module_ajax.get("response.php",null,function(res1){
	
	 document.getElementById("box1").innerHTML=res1.message;
	
	 module_ajax.post("response.php",'',function(res2){
	
	 document.getElementById("box2").innerHTML=res2.code;
	
	 module_ajax.ajax({
	 url:"response.php",
	 type:"post",
	 data:"id=box3",
	 dataType:"xml",
	 async:true,
	 success:function(responseText){
	 var root = responseText.getElementsByTagName("root")[0];
	 var title = root.getElementsByTagName("item")[0].textContent != undefined ? root.getElementsByTagName("item")[0].textContent : root.getElementsByTagName("item")[0].text;
	 document.getElementById("box3").innerHTML=title;
	 }
	 })
	
	 },'json',true);
	
	},'json',true);
	</script>
	</body>
	</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　数据交互　

同语言下

可能有用的

The-duke贡献的其它代码(2)