webcode

浏览: 5951377 次
性别:
来自: 上海

最近访客更多访客>>

ap950

u012363178

wangyy

ybfjavaeye

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (7533)

社区版块

存档分类

2013-02 ( 78)
2013-01 ( 83)
2012-12 ( 121)
更多存档...

Ajax学习系列3—XMLHttpRequest对象使用的扩展问题

这次介绍使用XMLHttpRequest对象过程中，经常遇到三个问题的解决方法：

（在Ajax学习系列2—核心对象XMLHttpRequest中介绍了XMLHttpRequest对象的五步使用法）

解决浏览器缓存问题
解决中文乱码问题
解决跨域访问问题

浏览器缓存带来的问题

AjaxCache.html

<!DOCTYPE html>
<html>
    <head>
        <title>ajax-测试缓存</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <input type="button" value="测试缓存问题" onclick="checkCache()"/>
        <div id="cacheMes"></div>

        <script type="text/javascript">
            var xmlhttp;
            function checkCache(){
                // 1.创建XMLHttpRequest对象
                if(window.XMLHttpRequest){
                    // IE7,IE8,FireFox,Mozillar,Safari,Opera
                    xmlhttp = new XMLHttpRequest();
                    // 由于Mozillar版本的，XML以MimeType开头时，服务端可能会无法工作
                    if(xmlhttp.overrideMimeType){
                        xmlhttp.overrideMimeType("text/xml");
                    }
                }else if(window.ActiveXObject){
                    // // IE5，IE5.5,IE6
                    var activexName = ["MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];
                    for(var i = 0;i < activexName.length;i++){
                        // 循环测试
                        try{
                            xmlhttp = new ActiveXObject(activeName[i]);
                            break;
                        }catch(e){};
                    }
                }else{
                    alert("不能建立XMLHttpRequest对象");
                    return false;
                }

                // 2.注册回调方法
                xmlhttp.onreadystatechange = callback; // 需要方法名
               
						/*
                // 为了屏蔽浏览器缓存，url中增加时间戳
                var url = "Cache";
                if(url.indexOf("?") > 0){
                    url = url + "&t=" + (new Date()).valueOf();
                }else{
                    url = url + "?t=" + (new Date()).valueOf();
                }
						*/                

                // 3.设置和服务端交互的基本信息（GET方式）
                xmlhttp.open("GET",url,true);
                // 4.设置向服务端发送的数据，启动和服务端的交互
                xmlhttp.send(null);
            }
              
            function callback(){
                // alert(xmlhttp.readyState);
                // 5.判断和服务端的交互是否完成，服务端是否正确返回数据，如果都正确，更新页面
                if(xmlhttp.readyState ==4){
                    // 表示交互已完成
                    if(xmlhttp.status ==200){
                        // 表示服务器的相应代码是200，正确返回数据
                        // 
                        // 纯文本数据的接受方法
                        var messageNode = document.getElementById("cacheMes");
                        messageNode.innerHTML = xmlhttp.responseText;
                        
                        // xml数据对应的dom对象接受方法
                        // 使用的前提是，服务端需要设置content-type为text/xml
                        // var domXml = xmlhttp.responseXML;
                    }
                }
            }
        </script>
    </body>
</html>

Cache.java

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 *
 * @author TCH
 */
public class Cache extends HttpServlet {

    /**
     * Processes requests for both HTTP
     * <code>GET</code> and
     * <code>POST</code> methods.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            Integer counter = (Integer)request.getSession().getAttribute("counter");
            if(null == counter){
                counter = 0;
            }else{
                counter ++;
            }
            request.getSession().setAttribute("counter", counter);
            out.println("当前计数器的值为：" + counter);
        } finally {            
            out.close();
        }
    }

    /**
     * Handles the HTTP
     * <code>GET</code> method.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    /**
     * Handles the HTTP
     * <code>POST</code> method.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    /**
     * Returns a short description of the servlet.
     *
     * @return a String containing servlet description
     */
    @Override
    public String getServletInfo() {
        return "Short description";
    }// </editor-fold>
}

单击按钮多次，发现结果依然是0，达不到我们想要的结果。原因是当第二次单击按钮时，给服务端发送的和第一次发送的是相同的url，服务端回到相应的Session中查看，如果有之前访问的结果，则直接从缓存中提取数据。利用HttpWatch工具证明这点：

Result列：200表示从服务端成功返回；（Cache）表示结果从缓存中返回的

URL列：两个地址相同。

屏蔽缓存

思想：善意的欺骗—让浏览器看到每次的url都不一样，也就不会到缓存中去找了。

通过url中增加时间戳实现

// 为了屏蔽浏览器缓存，url中增加时间戳

var url = "Cache";

if(url.indexOf("?") > 0){

url = url + "&t=" + (new Date()).valueOf();

}else{

url = url + "?t=" + (new Date()).valueOf();

}

这次再次点击按钮，就达到了我们想要看到的效果

利用HttpWatch工具证明这点：

解决中文乱码问题

解决跨域访问问题

因为使用Ajax的跨域访问，会带来不安全因素。

解决：通过同域的代理，访问跨域的服务器

用户名校验实例：

AjaxProxy.html

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <input type="text" id="userName"/>
        <input type="button" name="submit" onclick="submit()" value="AJAX校验"/>
        <div id="message"></div>

        <script type="text/javascript">
            var xmlhttp;
            function submit(){
                // 1.创建XMLHttpRequest对象
                if(window.XMLHttpRequest){
                    // IE7,IE8,FireFox,Mozillar,Safari,Opera
                    xmlhttp = new XMLHttpRequest();
                    // 由于Mozillar版本的，XML以MimeType开头时，服务端可能会无法工作
                    if(xmlhttp.overrideMimeType){
                        xmlhttp.overrideMimeType("text/xml");
                    }
                }else if(window.ActiveXObject){
                     // IE5，IE5.5,IE6
                    var activexName = ["MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];
                    for(var i = 0;i < activexName.length;i++){
                        try{
                            xmlhttp = new ActiveXObject(activeName[i]);
                            break;
                        }catch(e){};
                    }
                }else{
                    alert("不能建立XMLHttpRequest对象");
                    return false;
                }

                // 2.注册回调方法
                xmlhttp.onreadystatechange = callback; // 需要方法名
                
                var name = document.getElementById("userName").value;
                 
                // 两次编码，屏蔽请求数据中包含中文，服务端接受错误导致中文乱码问题
                name = encodeURI(encodeURI(name));
                
                // 通过代理解决跨域问题
                var url = "http://192.168.24.145:8084/VerifyUserName/AjaxServer?name=" + name;
                if(url.indexOf("http://") > 0){
                    // url = "http://192.168.24.151:8080/Ajax/AjaxServer?name="+name
                    url.replace("?","&");
                    // url = "http://192.168.24.151:8080/Ajax/AjaxServer&name="+name
                    url = "Proxy?url" + url;
                    // url = "Proxy?http://192.168.24.151:8080/Ajax/AjaxServer&name="+name
                }
                // 3.设置和服务端交互的相应参数（GET方式）
                xmlhttp.open("GET",url,true);
                // 4.设置向服务端发送的数据，启动和服务端的交互
                xmlhttp.send(null);
            }
              
            function callback(){
                // alert(xmlhttp.readyState);
                // 5.判断和服务端的交互是否完成，服务端是否正确返回数据，如果都正确，更新页面
                if(xmlhttp.readyState ==4){
                    // 表示交互已完成
                    if(xmlhttp.status ==200){
                        // 表示服务器的相应代码是200，正确返回数据
                        // 
                        // 纯文本数据的接受方法
                        var messageNode = document.getElementById("message");
                        messageNode.innerHTML = xmlhttp.responseText;
                        
                        // xml数据对应的dom对象接受方法
                        // 使用的前提是，服务端需要设置content-type为text/xml
                        // var domXml = xmlhttp.responseXML;
                    }
                }
            }
        </script>
    </body>
</html>

Proxy.java

AjaxServer.java（远程服务端）

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 *
 * @author TCH
 */
public class AjaxServer extends HttpServlet {

    /**
     * Processes requests for both HTTP
     * <code>GET</code> and
     * <code>POST</code> methods.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            String old = request.getParameter("name");
            if (old == null || old.length() == 0) {
                out.println("用户名不能为空");
            } else {
                String name = new String(old.getBytes("ISO8859-1"), "gb2312");
                if (name.equals("tch")) {
                    //4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段，而不是将一个新的页面发送给用户
                    //写法没有变化，本质发生了改变
                    out.println("用户名[" + name + "]已经存在，请使用其他用户名");
                } else {
                    out.println("用户名[" + name + "]尚未存在，可以使用该用户名注册");
                }

            }
        } finally {
            out.close();
        }
    }

    /**
     * Handles the HTTP
     * <code>GET</code> method.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    /**
     * Handles the HTTP
     * <code>POST</code> method.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    /**
     * Returns a short description of the servlet.
     *
     * @return a String containing servlet description
     */
    @Override
    public String getServletInfo() {
        return "Short description";
    }// </editor-fold>
}

小结