用JavaScript實現的Ajax

用JavaScript實現的Ajax，在性能上要比使用jQuery的ajax方法快一些，，因此說通常狀況下，，我的建議仍是我的用javascript實現ajax請求較好，javascript主要是利用XMLHttpRequest對象發送異步請求，首先須要定義XMLHttpRequest對象：

 

<script type="text/javascript">
//定義XMLHttpRequest對象
if(window.XMLHttpRequest){
    //兼容Mozilla、Safari等非IE瀏覽器
    var xmlhttprequest = new XMLHttpRequest();
}else{
    if(window.ActiveXObject){
        //兼容IE瀏覽器
        try{
            var xmlhttprequest = new ActiveXObject('Msxml12.XMLHTTP');
        }catch(e){
            try{
                xmlhttprequest = new ActiveXObject('Microsoft.XMLHTTP');
            }catch(e){
            }
        }
    }
}
</script>

而後就是使用該對象，在這裏定義了兩個，一個是GET方式發送，一個是POST方式發送：

 

GET方式：

 

function jsAjaxGet(){
    var ul = document.getElementById("jsajaxget");
    //調用XMLHttpRequest對象的open方法，打開與服務器之間的同步通訊鏈接

    /**
     * 創建異步鏈接
     * xmlhttprequest.open(Method,Url,Async,User,Password)方法
     * Method:表示Http方法，POST,GET,PUT,PROPFIND
     * Url:參數請求的url
     * Async:可選項，設置是否爲異步通訊，
     *      默認true表示能夠異步，
     *      取false,代表異步發出請求以後不須要等待服務端的響應，繼續執行其餘操做。
     * User,password:可選項，表示請求的文件須要進行服務器進行驗證
     */
    xmlhttprequest.open("GET","Ajax_javascript.action",false);
    /**
     * 向服務器發送請求
     * xmlhttprequest.send(null)
     * 只有一個參數，該參數傳遞客戶端發送給服務器的請求數據
     * 該方法通常是在POST方式下傳遞參數，多個參數用&隔開
     */
    xmlhttprequest.send(null);

    ul.innerHTML += "<li>status:" + xmlhttprequest.status + "</li>";
    ul.innerHTML += "<li>statusText:" + xmlhttprequest.statusText + "</li>";
    ul.innerHTML += "<li>return:" + xmlhttprequest.responseText + "</li>";
}

POST方式：

 

 

function jsAjaxPost(){
    var ul = document.getElementById("jsajaxpost");
    //調用XMLHttpRequest對象的open方法，打開與服務器之間的同步通訊鏈接

    /**
     * 創建異步鏈接
     * xmlhttprequest.open(Method,Url,Async,User,Password)方法
     * Method:表示Http方法，POST,GET,PUT,PROPFIND
     * Url:參數請求的url
     * Async:可選項，設置是否爲異步通訊，
     *      默認true表示能夠異步，
     *      取false,代表異步發出請求以後不須要等待服務端的響應，繼續執行其餘操做。
     * User,password:可選項，表示請求的文件須要進行服務器進行驗證
     */
    xmlhttprequest.open("POST","Ajax_javascript.action",false);
    /**
     * 設置請求的消息頭
     * application/x-www-form-urlencoded表示傳遞的是表單值
     * 通常使用POST都必須設置此項，不然服務器沒法識別傳遞過來的數據
     * 雖然該值表示表單值，可是也能夠一text/xml或者application/xml類型給服務器直接發送XML數據
     * 甚至也能夠application/json類型發送JavaScript對象數據
     */
    xmlhttprequest.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    /**
     * 設置User-Agent爲XMLHTTP便於服務器可以識別出XMLHttpRequest異步請求
     * 和其餘客戶端的普通請求
     */
    xmlhttprequest.setRequestHeader('User-Agent','XMLHTTP');

    /**
     * 向服務器發送請求
     * xmlhttprequest.send(null)
     * 只有一個參數，該參數傳遞客戶端發送給服務器的請求數據
     * 該方法通常是在POST方式下傳遞參數，多個參數用&隔開
     */
    xmlhttprequest.send("user=goomoon&com=fantong");

    ul.innerHTML += "<li>status:" + xmlhttprequest.status + "</li>";
    ul.innerHTML += "<li>statusText:" + xmlhttprequest.statusText + "</li>";
    ul.innerHTML += "<li>return:" + xmlhttprequest.responseText + "</li>";
}

寫完ajax方法以後，接下來就是定義了鏈接了：

 

 

<ul>
    <li>
        <a href="javascript:jsAjaxGet();">(GET)javascript ajax testing.</a>
        <ul id="jsajaxget"></ul>
    </li>
    <li>
        <a href="javascript:jsAjaxPost();">(POST)javascript ajax testing.</a>
        <ul id="jsajaxpost"></ul>
    </li>
</ul>

提交的Url是struts2實現的action類，繼承自com.opensymphony.xwork2.ActionSupport，主要代碼以下：

public String javascript() throws IOException{

    HttpServletResponse response = ServletActionContext.getResponse();
    PrintWriter out = response.getWriter();

    out.print("com:"+com+",");
    out.print("user:"+user+",");
    out.print("the ajax testing is success");
    out.flush();
    out.close();
    return NONE;
}

最後輸出結果圖爲：

 

轉載文章，感謝原博主：http://blog.csdn.net/lzkkevin/article/details/6777474。