JavaScript基礎之AJAX

先來看看AJAX對象屬性和方法

//XMLHttpRequest對象
        //屬性
        void    XMLHttpRequest.onreadystatechange;      //每當readyState屬性改變時，就會調用該函數
        int     XMLHttpRequest.readyState;      //記錄XMLHttpRequest的狀態 0爲初始化 1服務器鏈接創建 2請求已接受 3請求處理中 4請求已完成,相應已就緒
        int     XMLHttpRequest.status;                  //返回請求狀態碼   例 200 304 404
        string  XMLHttpRequest.statusText;              //返回請求狀態文本 例 "OK" "Not Found" 
        string  XMLHttpRequest.responseText;            //返回字符串形式的響應數據
        string  XMLHttpRequest.responseXML;             //返回XML形式的響應數據

        //方法 
        object  new XMLHttpRequest();                   //建立一個新的XMLHttpRequest對象
        void    XMLHttpRequest.abort();                 //取消當前的請求
        string  XMLHttpRequest.getAllResponseHeaders(); //返回全部頭信息
        string  XMLHttpRequest.getResponseHeader(name); //返回指定的頭字段name的信息
                //設定請求 method指定方法GET或POST url指定目標 async指定true異步或false同步 username指定用戶名 password指定密碼
        void    XMLHttpRequest.open(method, url, async, [username, password]);
        void    XMLHttpRequest.send();                  //發送GET請求
        void    XMLHttpRequest.send(data);              //發送POST請求 data指定POST數據
        void    XMLHttpRequest.setRequestHeader(name,val);//設置請求頭信息 name指定字段名 val指定字段值

 

一個簡單的AJAX

/**
         * 發送ajax請求函數
         * @author guoguo
         * @param  string   method 請求方法get或post
         * @param  string   url    請求目標地址
         * @param  function func   處理響應信息的回調函數
         * @param  string   data   用於post請求的附加信息
         * @return void
         */
        function ajax(method, url, func, data){
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    //使用回調函數處理響應信息
                    func(xmlhttp.responseText);
                }
            }
            xmlhttp.open(method, url);
            //添加AJAX標識字段 方便後端區分請求
            xmlhttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            //判斷髮送get請求仍是post請求
            if(method.toLowerCase() == 'get'){  
               xmlhttp.send(); 
           }else{
               xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
               xmlhttp.send(data);
           } 
        }

須要AJAX的時候調用該方法就行