ajax精简版

尽管现在的ajax框架很多，但我们通常用不了那么多功能，如果仅是为了一个简单的功能去使用诸入dojo、prototype、yui等框架，未免小题大做，这里，我仅从服务器端获取数据这一最常用的功能出发，分离并整理出了这个函数，使用时非常方便，供大家参考。

给出一个示例

/**/ /** myajax.js
 * AJAX对象封装
 * @author: kevon
 * @date: 2007-07-27
 * 注：本文件的最后附有使用示例
 */

function  $(obj) ... {return document.getElementById(obj);}

this .xml = false ; // 是否传回xml格式的数据
this .asynchronous = true ; // 是否异步

/**/ /** url：路径
 * pars：参数
 * showResponse：处理函数
 *               showResponse的格式为aa
 *                 注：aa为函数名
 */
myajax  =   function (url,pars,showResponse,xml)
... {
    if(typeof(xml)!="undefined" && xml.toLowerCase()=="xml")
        this.xml=true;
    
    if (pars.length > 0)
        url += (url.match(/?/) ? '&' : '?') + pars;
    if(typeof(showResponse)!="undefined")
        this.callBack=showResponse;
    try ...{
     req = xmlHTTP();
     } catch(e) ...{
     req = false;
    }
    req.onreadystatechange = processRequest;
    req.open("GET",url,this.asynchronous);
    req.send(null);
}

// 创建XMLHttpRequest对象
xmlHTTP  =   function ()  ... {
    var xmlHTTP;
    var msxmlhttp = new Array(
    'Msxml2.XMLHTTP.5.0',
    'Msxml2.XMLHTTP.4.0',
    'Msxml2.XMLHTTP.3.0',
    'Msxml2.XMLHTTP',
    'Microsoft.XMLHTTP');
    for (var i = 0; i < msxmlhttp.length; i++) ...{
        try ...{
            xmlHTTP = new ActiveXObject(msxmlhttp[i]);
        } catch (e) ...{
            xmlHTTP = null;
        }
    }
    if(!xmlHTTP && typeof XMLHttpRequest != "undefined")
        xmlHTTP = new XMLHttpRequest();
    return xmlHTTP;
}

//  处理返回信息的函数
function  processRequest()  ... {
    if (req.readyState == 4) ...{ // 判断对象状态    
        if (req.status == 200 && req.statusText == "OK") ...{ // 信息已经成功返回，开始处理信息
            if(typeof(callBack)=="function")
                if(xml)                    
                    callBack(req.responseXML);
                else            
                    callBack(req.responseText);
        } else ...{ //页面不正常
            alert("您所请求的页面有异常。");
        }
    }
}

 

show.html

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< html >
< head >
< title > Ajax </ title >
< meta  name ="Generator"  content ="EditPlus" >
< meta  name ="Author"  content ="" >
< meta  name ="Keywords"  content ="" >
< meta  name ="Description"  content ="" >
< script  src ="myajax.js" ></ script >
< script  language ="JavaScript" > ...
<!--
    function processReal(responseText)...{        
        $("spanPaiming").innerHTML=responseText;

        //var result = responseText.getElementsByTagName("info")[0].text;//处理以xml格式返回的数据
        //alert(result);
        
    }    
    function doPaiming() ...{    
        var baojia = $("txtBaojia").value;
        if(baojia=="" || baojia==null) ...{
            window.alert("不能为空。");
            $("txtBaojia").focus();
            return false;
        }
        else ...{    
            $("spanBao").innerHTML=baojia;
            var url='test.asp';            
            var pars='baojia='+baojia;
            var callback=processReal;

            //如果要返回xml格式的，请加上下面这行
            //this.xml=true;//缺省为false（以text的方式返回信息），另外，this.xml=true与myajax(url,pars,callback,'xml')这种方式等价;
            
            //ajax调用
            myajax(url,pars,callback);        
            //myajax(url,pars);
        }
    }
//-->
</ script >
</ head >

< body >
< form >
< div > 请输入数值 < input  id ="txtBaojia"  maxlength ="8"  onkeyup ="value=(/^(+)?d+($|.d+$)/.test( value +'0' ))? value : value.replace(/[^d]/g,'');"   />
< input  type ="button"  onclick ="doPaiming()"  value ="在服务器端计算"   /></ div >
< div  style ="bgcolor:#fafcea" >
您输入的是[ < span  id ="spanBao"   ></ span > ],除2之后是[ < span  id ="spanPaiming"   ></ span > ]。
</ div >
</ form >
</ body >
</ html >

用最常用的ASP来处理客户端的请求，当然，你可以随便用其他的服务器端语言，这个页面太简单了，你可以很轻松的改成其他语言，修改之后你记得改show.html中的url，这里是（test.asp）。

<%
 Dim s
 s=request("baojia")
 s=s/2
 Response.write(s)
 Response.End()
%>
<%
'下面的是xml方式输出，传递xml格式的用这种
'Response.ContentType="text/xml"
'response.Write("<?xml version='1.0' encoding='GB2312' ?>")
'response.Write("<root>")
'response.Write("<info>love you</info>")
'response.Write("</root>")
%>

注：方法并非越通用越好，最适合自己的才是最好的。文中使用的返回数据类型可以自由指定,默认是responseText，你如果想用xml的话照注释做就可以，随你了，适用就好。