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的时候调用该方法就行