AJAX入門

Ajax筆記

一、 Ajax定義及其工做原理

Ajax 由 HTML、JavaScript 技術、DHTML 和 DOM 組成，這一傑出的方法能夠將笨拙的 Web 界面轉化成交互性的 Ajax 應用程序。

 

二、 建立XMLHttpRequest對象

對於Ajax，最核心的一個對象是XMLHttpRequest，全部的Ajax操做都離不開對這個對象的操做

    xmlHttp = new XMLHttpRequest();
    xmlHttp =new ActiveXObject(‘Microsoft.XMLHTTP’);

 

三、 XMLHttpRequest對象相關方法

    XMLHttpRequest.open(傳遞方式,地址,是否異步請求)//打開請求
    XMLHttpRequest.onreadystatechange//準備就緒執行
    XMLHttpRequest.responseText//獲取執行結果

四、一個簡單的例子

index.php文件中

    <script src="ajax.js" type="text/javascript"></script>
    <a href="#" onclick="funAjax('lgx')" > show lgx </a>
    <a href="#" onclick="funAjax('zbj')" > show zbj </a>
    <div id="show"></div>

 

ajax.js 文件中

     var xmlHttp;
    function $_xmlHttp(){
        if(window.XMLHttpRequest){
            xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
        }else if(window.ActiveXObject){
            xmlHttp = new XMLHttpRequest();
        }
    }
    function funAjax(id){
        $_xmlHttp();
        xmlHttp.open("get","chuli.php?id="+id,true);
        xmlHttp.onreadystatechange = change;
        xmlHttp.send(null);
    }
    function change(){
        var changeResult = xmlHttp.responseText;
        document.getElementById('show').innerHTML = changeResult;
    }

chuli.php文件中

     <?php 
        $str = $_GET['id'];
        for($i = 0; $i <10; $i++)
        echo $str;
        exit;
    ?>

五、 比較標準的ajax框架

    var http_request = false;
    function createRequest(url) {
    //初始化對象併發出XMLHttpRequest請求
        http_request = false;
        if (window.XMLHttpRequest) { //Mozilla等其餘瀏覽器
            http_request = new XMLHttpRequest();
        if (http_request.overrideMimeType) {
            http_request.overrideMimeType("text/xml");
         }
        } else if (window.ActiveXObject) { //IE瀏覽器
        try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
        try {
            http_request = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            }
           }
        }
        if (!http_request) {
            alert("不能建立XMLHTTP實例!");
            return false;
        }
        http_request.onreadystatechange = alertContents; //指定響應方法
        http_request.open("GET", url, true); //發出HTTP請求
        http_request.send(null);
        }
        function alertContents() { //處理服務器返回的信息
        if (http_request.readyState == 4) {
        if (http_request.status == 200) {
            alert(http_request.responseText);
        } else {
            alert('您請求的頁面發現錯誤');
                }
            }
        }