Ajax开发

1. netbeans 中文版改成英文版
    在NetBeans的配置文件 "etc/netbeans.conf" 的netbeans_default_options="..." 配置项中加一个值： -J-Duser.language=en

 

2. 建立XMLHttpRequest对象
    * IE7,IE8,FireFox,Mozilla,Safari,Opera中直接new XMLHttpRequest()创建
    * IE6,IE5.5,IE5则需要通过某一个正确的ActiveXObject控件名称通过new ActiveXObject(控件名)的方式创建

 

3. XMLHttpRequest方法
    * open(String method, String url,boolean asynch, String username, String password)
        - 指定和服务器端交互的HTTP方法，URL地址及其它请求信息
        - method 表示HTTP所有请求方法，取值GET，POST、
        - url 请求服务器的地址
        - asynch 取值为true表示异步请求，false表示同步请求
        - username password 表示http认证机制需要的用户名和密码
    * send(content)
        - 向服务器发出请求，如果采用异步方式，该方法会立即返回
        - Content可以为null，DOM，输入流或字符串
    * setRequestHeader(String header, String value)
        - 设置HTTP请求中的指定头部header的值
        - 此方法在open方法后调用
    * getAllResponseHeaders()
        - 返回包含HTTP的所有响应头信息
        - 返回的头信息是字符串的形式，其中键名和键值用冒号分开，每组键之间用回车换行分隔
    * getResponseHeader(String header)
        - 返回HTTP响应头中指定的键名所对应的值
    * abort()
        - 停止当前http请求，对应的XMLHttpRequest对象会复位到未初始化状态

4. XMLHttpRequest的属性
    * readyState
        - 0 表示未初始化，对象已创建，未调用open
        - 1 表示open方法成功调用，Send方法尚未调用
        - 2 表示send方法已经调用，尚未开始接受数据
        - 3 正在接受数据，Http响应头信息已经接收，响应数据尚未接收完成
        - 4 完成。响应数据接收完成
    * onreadystatechange
        - 请求状态改变的时间触发器(readyState变化时，会调用这个属性上注册的javascript函数)

    * responseTest    服务器响应的文本内容
    * responseXML     服务器响应的XML内容对应的DOM对象
    * status          服务器返回的http状态码
    * statusText      服务器返回状态码的文本信息

5. 判断服务器端返回的XML数据是否正确

    当服务器端没有正确返回XML数据时，在JavaScript中使用responseXML的方式获取返回的XML数据对应的DOM对象时，FireFox和IE的结果是有差别的，IE获取根元素节点为null，FireFox获取根元素节点则是表示解析错误的元素节点

var rootElement = xmlhttp.responseXML.documentElement;
if(rootElement == null || rootElement.nodeName != ""){

}else{//数据正确返回，可以进行相关处理}

AJAX请求完整的示例代码

        <script type="text/javascript">
            var xmlhttp;
            //1.创建XMLHttpRequest对象，
        function submit(){
               if(window.XMLHttpRequest){
                    //适应IE7，IE8，FireFox，Mozillar，Safari，Opera
                    xmlhttp= new XMLHttpRequest();
                    if(xmlhttp.overrideMimeType){
                        xmlhttp.overrideMimeType("text/xml");
                    }
                }else if(window.ActiveXObject){
                    //IE6,IE5.5,IE5
                    var activexName=['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',
                        'MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0',
                        'MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
                    for(var i=0;i<activexName.length;i++){
                        try{
                            xmlhttp=new ActiveXObject(activexName[i]);
                            break;
                        }catch(e){
                            
                        }
                    
                    }
                }
                if(xmlhttp== undefined || xmlhttp == null){
                    alert("当前浏览器不支持XMLRequest对象");
                    return;
                }
                //2.设置回调方法
                xmlhttp.onreadystatechange= callback;
                //3.设置和服务器端交互的参数
                var name = document.getElementById("name").value;
                
                //Get方式交互
                //xmlhttp.open("GET","ajaxrequest?name="+name,true);//true表示采用异步交互  
                //4. 设置向服务器发送数据，启动和服务器的交互
                //xmlhttp.send(null);//设置GET方法，不必在再send中传递参数 
                
                
                //Post方式提交
                xmlhttp.open("POST","ajaxrequest",true);
                //指定http请求中header的值，在open方法后调用
                xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xmlhttp.send("name="+name+"&password=123");//send参数的内容可以是dom对象，输入流或字符串
                
            }
            
            function callback(){
                //5. 判断和服务器的交互是否完成，还要判断服务器是否正确返回了数据
                if(xmlhttp.readyState==4){
                    if(xmlhttp.status==200){
                        var messageNode = document.getElementById("message");
                        //纯文本数据接收方法
                var message = xmlhttp.responseText;
                        
                        //xml数据接收方式，使用前提：服务器需要设置content-type为text/xml
                        //var domXml=xmlhttp.responseXML;
                        messageNode.innerHTML=message;
                        /* 判断返回的XML数据是否正确
                        var rootElement = xmlhttp.responseXML.documentElement;
                        if(rootElement == null || rootElement.nodeName != ""){
                            
                        }else{//数据正确返回，可以进行相关处理}
                         */
                    }
                }
            }
        </script>

 

6. 解决XMLHttpRequest请求的缓存问题
    * 主要是浏览器对请求有缓存，同样的请求IE浏览器会访问缓存
    * 解决办法：请求参数增加时间戳，使每次请求的url都不同。关键代码如下

if(url.indexOf("?") >=0){
     url=url + "&t="+(new Date()).valueOf();
}else{
    url = url + "?t=" + (new Date()).valueOf();
}

 

    * IE中调试工具HttpWatch Basic
    * 验证码例子------*

7. 解决Ajax应用中的中文乱码问题 (参考)
    * 请求数据中包含中文，服务器端程序接收错误导致出现乱码
        - 在页面端将包含中文信息的请求数据利用javascript中的encodeURI进行两次编码处理，在服务器端将获取到的数据使用URLDecode类的decode方法(一次)按照utf-8的方式进行解码

        在服务器端只进行一次解码的原因是：应用服务器如Tomcat会自动进行一次解码，在Servlet中getParameter得到的数据已经是经过服务器解码一次的数据。
        - 解决方法原理：2.40分
        即，页面端对于参数name: name = encodeURI(encodeURI(name));服务器端: name=URLDecoder.decode(request.getParameter("name"),"utf-8")

 

    * 响应数据包中包含中文，编码设置错误导致浏览器中看到的结果数据是乱码
        - 保证页面端定义的charset和http响应头的Content-Type中定义的charset一致即可   
        - IE6 中XMLHttpRequest对象在页面端定义的charset和http响应头的Content-Type中定义的charset都是GB2312时，中文响应数据出现乱码。其它浏览器没有这种现象。解决办法：
            *- 将http响应头的Content-Type中定义的charset设置成utf-8。这不会影响IE7和IE8
            *- 仅仅使用MSXML2.XMLHTTP和Microsoft.XMLHTTP这两个中的一个来创建XMLHttpRequest对象，即

var activexName=['MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
for(var i=0;i<activexName.length;i++){
    try{
        xmlhttp=new ActiveXObject(activexName[i]);
        break;
    }catch(e){}
}