ajax+php+js实现异步刷新表单验证

创建ajax对象

 //创建对象
 function createAjax(){
     var request =false;
     //IE浏览器，window对象存在ActiveXObject属性
     if(window.ActiveXObject){
         try{
              request = new ActiveXObject("Msxml2.XMLHTTP");
              }
              catch(othermicrosoft){
               try{
                request = new ActiveXObject("Microsoft.XMLHTTP");
               }catch(failed){
                request = false;
               }
             }
     }

     //非IE浏览器,window对象存在XMLHttpRequest属性
     if(window.XMLHttpRequest){
         request = new XMLHttpRequest();

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

页面js语句触发事件

 <input type="text" id="search_input" placeholder="智能搜索" onkeydown="search('total_marks')" onkeyup="result('total_marks')" style="border-color:#32CD32;border-radius:5px;">

调用的js方法

 var content = document.getElementById("total_marks").innerHTML;

 function search(id){

     var search = document.getElementById(id);
     search.innerHTML = "<div style='margin-left:200px;'>正在搜索...请稍候...</div>";
 }

 //获取数据
 function search_result(){
     var ajax = null;
     // alert(ajax);每次请求都要求使用一个新的XMLHttpRequest

     var div_ajax = document.getElementById("search_input");
     var val = div_ajax.value;

     ajax = createAjax();
     ajax.onreadystatechange=function(){
         // alert(ajax.readyState);//可知当状态值为4时，才能取值
         if(ajax.readyState == 4){
             // alert(ajax.status);
             if(ajax.status == 200){
                 var data = ajax.responseText;//数据都返回在responsetext中
                 document.getElementById('total_marks').innerHTML = data;
             }else{
                 alert('页面请求失败！');
             }
         }
     }
     url = "../bookmarks/js/search.php?key="+val;
     //如果使用get，就直接通过url直接将数据传给服务器
     ajax.open("get",url,true);
     ajax.send(null);    

 }

 function result(id){

     if (document.getElementById("search_input").value == "") {
         document.getElementById(id).innerHTML = window.content;
     }else{
         setTimeout(search_result,1000)
     };
 }

请求的php代码

 <?php
     //最好设定字符集，不然在ajax中默认的字符集会导致出错
     require_once("../db.php");
     header("Content-Type:text/html;charset=utf-8");

     $sql = "SELECT icon,content from bookmarks  where title LIKE '%".$_GET['key']."%' order by clicknum";
     $result = mysql_query($sql);

     //将多个值存放进数组才能输出，不然会当作一个字符串输出
     // $arr = array("one"=>"111111","two"=>"222222","three"=>"33333333");
     // echo json_encode($arr);
 ?>