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);
?>