首页 > Javascript > 超级好用的ajax对象(类)
2012
11-30

超级好用的ajax对象(类)

ajax.js文件内容:

function Ajax(recvType){
 var aj=new Object();
 aj.recvType=recvType ? recvType.toUpperCase() : 'HTML' //HTML XML
 aj.targetUrl='';
 aj.sendString='';
 aj.resultHandle=null;

 aj.createXMLHttpRequest=function(){
  var request=false;
  
  //window对象中有XMLHttpRequest存在就是非IE,包括(IE7,IE8)
  if(window.XMLHttpRequest){
   request=new XMLHttpRequest();

   if(request.overrideMimeType){
    request.overrideMimeType("text/xml");
   }
  

  //window对象中有ActiveXObject属性存在就是IE
  }else if(window.ActiveXObject){
   
   var versions=['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];

   for(var i=0; i<versions.length; i++){
     try{
      request=new ActiveXObject(versions[i]);

      if(request){
       return request;
      }
     }catch(e){
      request=false;
     }
   }
  }
  return request;
 }

 aj.XMLHttpRequest=aj.createXMLHttpRequest();

 aj.processHandle=function(){
  if(aj.XMLHttpRequest.readyState == 4){
   if(aj.XMLHttpRequest.status == 200){
    if(aj.recvType=="HTML")
     aj.resultHandle(aj.XMLHttpRequest.responseText);
    else if(aj.recvType=="XML")
     aj.resultHandle(aj.XMLHttpRequest.responseXML);
   }
  }
 }

 aj.get=function(targetUrl, resultHandle){
  aj.targetUrl=targetUrl; 
  
  if(resultHandle!=null){
   aj.XMLHttpRequest.onreadystatechange=aj.processHandle; 
   aj.resultHandle=resultHandle; 
  }
  if(window.XMLHttpRequest){
   aj.XMLHttpRequest.open("get", aj.targetUrl);
   aj.XMLHttpRequest.send(null);
  }else{
   aj.XMLHttpRequest.open("get", aj.targetUrl, true);
   aj.XMLHttpRequest.send();
  }
  
 }

 aj.post=function(targetUrl, sendString, resultHandle){
  aj.targetUrl=targetUrl;

  if(typeof(sendString)=="object"){
   var str="";
   for(var pro in sendString){
    str+=pro+"="+sendString[pro]+"&"; 
   }
   aj.sendString=str.substr(0, str.length-1);
  }else{
   aj.sendString=sendString;
  }

  if(resultHandle!=null){
   aj.XMLHttpRequest.onreadystatechange=aj.processHandle; 
   aj.resultHandle=resultHandle; 
  }

  aj.XMLHttpRequest.open("post", targetUrl);
  aj.XMLHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  aj.XMLHttpRequest.send(aj.sendString);
  
 }

 return aj;
}

调用方法:

<script src="ajax.js"> </script>

<script>
 var ajax=Ajax();

/* ajax.get("server.php?username=zhangsan&email=aaa@bbb", function(data){
    
    alert(data);
   });
 */
/* ajax.post("server.php", "username=value&aaa=bb", function(data){
    alert(data);
    });
 */
 
 ajax.post("server.php", {username:"zs",age:10,sex:"nan"});
   
</script> 

实例应用:表单唯一性校验

form.html:

<script src="ajax.js"></script>

<script>

function show(username){
 if(username==""){
  alert("用户名不能为空!");
  return;
 }
 var ajax=Ajax();
 var userobj=document.getElementById("userid");
 ajax.post("form.php", {username:username}, function(data){
   userobj.innerHTML=data;
  });
 }
</script> 

<form action="reg.php" method="post">
 username: <input type="text" onblur="show(this.value)" name="username"><span id="userid"></span><br>
 password: <input type="password"><br>

 <input type="submit" value="submit">
</form> 

form.php:

<?php
 header("Content-Type:text/html;charset=utf-8");

 $mysqli=new mysqli("localhost", "root", "root", "db");

 $result=$mysqli->query("select * from users where name='{$_POST["username"]}'");

 if($result->num_rows > 0){
  echo "<font color='red'>用户{$_POST["username"]}已经存在,不能使用</font>";
 }else{
   echo "<font color='green'>用户{$_POST["username"]}可以使用</font>";
 }

?>
作者:admin
admin
TTF的家园-www.ttfde.top 个人博客以便写写东西,欢迎喜欢互联网的朋友一起交流!

本文》有 0 条评论

留下一个回复