最近做了一个Ajax的demo，前台用HTML+javascript，后台用一个servlet来响应，流程如下：

页面点击链接事件，由js捕获，生成一个请求到后台，servlet处理后给出响应信息，并显示在页面上。

问题是，页面无法获取到servlet的响应信息。

初始代码

index.html

<!DOCTYPE html>

<html>

<head>

    <title>Test H2</title>

    <style>

        #result{

            position:absolute;

            left:50px;

            top:300px;

        }

    </style>

    <!-- <script type="text/javascript" src="js/jquery-1.11.1.js"></script> -->

    <script>

        function handle(url){

            // Fetch the data, HERE i just give some dummy data

            var username = "joshua";

            var query = "query_test";

            var feature = url;

            var click_type = "clc_test";

            var rank = 1;

            var page_number = 1;

            var paras = "?query="+query+"&username="+username+"&feature="+feature+

                        "&click_type="+click_type+"&rank="+rank+"&page_number="+page_number;

            // transfer this data to servlet to save

            var xmlhttp;

            // code for IE7+, Firefox, Chrome, Opera, Safari

            if(window.XMLHttpRequest){

                xmlhttp = new XMLHttpRequest;

            // code for IE6, IE5

            }else{

                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

            }

            xmlhttp.open("POST","/WebDemo_H2/AjaxServlet"+paras+"&tip="+Math.random(),true);

            xmlhttp.send();

        document.getElementById("result").innerHTML = xmlhttp.responseText;

        }

    </script>

</head>

<body>

    <aside style="margin:10px;">

        <div>

            <p style="font-weight:bold;">Main Testing Page</p>

            <a href="index.html">Back</a>

        </div>

        <div style="height:20px"></div>

        <div>

            <a href="javascript:handle('test1.html')">test link 1</a><br/>

            <a href="javascript:handle('test2.html')">test link 2</a><br/>

            <a href="javascript:handle('test3.html')">test link 3</a>

        </div>

    </aside>

    <button onclick="">Clear Data</button>

    <div id="result">

    </div>

</body>

</html>

Servlet:

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

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;

public class AjaxServlet extends HttpServlet {

    public Connection conn = null;

    public void init() {

        try {

            Class.forName("org.h2.Driver");

            conn = DriverManager.getConnection(

                    "jdbc:h2:C:/Users/zhoum18/H2Test/db/test", "sa", "");

        } catch (Exception e) {

            e.printStackTrace();

        }

    }

    public void service(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

            request.setCharacterEncoding("GBK");

            response.setContentType("text/html;charset=GBK");

        // get the parameters

        try {

            PrintWriter out = response.getWriter();

            String userName = request.getParameter("username");

            String query = request.getParameter("query");

            String feature = request.getParameter("feature");

            String click_type = request.getParameter("click_type");

            String rank = request.getParameter("rank");

            String page_number = request.getParameter("page_number");

            String sql = "INSERT INTO CLICK_TRACKING SELECT ?,?,?,?,?,?";

            PreparedStatement pstmt = conn.prepareStatement(sql);

            pstmt.setString(1, query);

            pstmt.setString(2, userName);

            pstmt.setString(3, feature);

            pstmt.setString(4, click_type);

            pstmt.setInt(5, Integer.parseInt(rank));

            pstmt.setInt(6, Integer.parseInt(page_number));

            pstmt.executeUpdate();

            conn.commit();

            sql = "select feature,count(*) as num  from click_tracking group by feature";

            pstmt = conn.prepareStatement(sql);

            ResultSet rs = pstmt.executeQuery();

            out.println("<table border='1'>");

            out.println("<tr>");

            out.println("<td>Link</td>");

            out.println("<td>Click Times</td>");

            out.println("</tr>");

            while (rs.next()) {

                out.println("<tr>");

                out.println("<td>" + rs.getString("feature") + "</td>");

                out.println("<td>" + rs.getString("num") + "</td>");

                out.println("</tr>");

            }

            out.println("</table>");

            out.close();

        } catch (Exception e) {

            e.printStackTrace();

        }

    }

    public void destroy() {

        if (conn != null) {

            try {

                conn.close();

            } catch (Exception e) {

            }

        }

    }

}

可以看到在servlet中用PrintWriter对象返回了建立table的HTML语句，按照逻辑，应该在页面上打印出table的内容跟应有的值；

结果是，xmlhttp.responseText方法返回的值始终为空，没有任何值返回，用chrome浏览器调试，发现HTTP请求是有响应的，而且response tab里面有值:

经过代码查看，发现xmlhttp对象的readystate始终为1.

修改了下页面js的代码，将原有的写入改成了以下代码:

            xmlhttp.open("POST","/WebDemo_H2/AjaxServlet"+paras+"&tip="+Math.random(),true);

            xmlhttp.onreadystatechange = function(){

                if (xmlhttp.readyState == 4) {

                    document.getElementById("result").innerHTML = xmlhttp.responseText;

                }

            }

            xmlhttp.send();

成功显示出response的内容。

结论：

页面发送出请求后，往往无法得知什么时候才能完成这个请求并获得回应，所以要使用一个事件机制来捕获请求完成的状态。

XmlHttpRequest对象有一个方法，onreadystatechange这个函数实现这一个功能。

类似于回调函数，在readystate改变时，这个方法可以指定一个函数来判断和处理，比如上面的代码：

xmlhttp.onreadystatechange = function(){

　　// 这里面的就是当readystate改变时，处理事件的代码，在我的例子中，判断了当readyState等于4的时候，再捕获相应的信息。

}

readyState的不同值，代表了不同的状态：

0：尚未初始化
1：正在加载
2：加载完毕
3：正在处理
4：处理完毕

当其变为4， 就可以访问从服务器返回的数据了。

另附http请求相应代码

200 请求成功
202 请求被接受但处理未完成
400 错误请求
404 请求资源未找到
500 内部服务器错误

关于 XMLHttpRequest对象的onreadyStateChange方法的更多相关文章

  1. javascript XMLHttpRequest 对象的open() 方法参数说明

    下文是从w3c上摘录下来的,其中参数 method 说明的很简短,不是很理解,所以又找了些资料作为补充.文中带括号部分. XMLHttpRequest.open() 初始化 HTTP 请求参数 语法o ...

  2. $.ajax通用格式&&XMLHttpRequest对象属性和方法

    $.ajax({ url: "", type: "POST", async: false, cache:false, //默认true data: {}, da ...

  3. JS创建Ajax的XMLHttpRequest对象的通用方法

    function createXMLHttpRequest() { var request = false; if(window.XMLHttpRequest) { request = new XML ...

  4. Ajax学习（三）——XMLHttpRequest对象的五步使使用方法

        Ajax的核心技术是XMLHttpRequest对象,它能够在不向server提交整个页面的情况下.实现局部更新网页.通过这个对象,Ajax能够像桌面应用程序那样仅仅与server进行数据层的 ...

  5. XMLHttpRequest对象的属性与方法

    XMLHttpRequest对象是Ajax的核心,它有很多属性和方法.1,readyState属性当一个XMLHttpRequest对象被创立后,readyState属性标示了当前对象处于什么状态,可 ...

  6. PHP. 02®. Ajax异步处理、常见的响应状态、XMLHttpRequest对象及API、ajax的get/post方法、

    异步对象 a)创建异步对象 b)设置请求的url等参数 c)  发送请求 d)注册时间 e)在注册的事件中获取返回的内容并修改页面显示的内容 布尔类型不能直接用echo输出 常见的响应状态 Ajax概 ...

  7. Ajax中的XMLHttpRequest对象详解

    XMLHttpRequest对象是Ajax技术的核心.在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引入,被称之为XMLHTTP,它是一种支持异步请求 ...

  8. javascript XMLHttpRequest对象全面剖析

    转载:http://www.jb51.net/article/23175.htm 一. 引言 异步JavaScript与XML(AJAX)是一个专用术语,用于实现在客户端脚本与服务器之间的数据交互过程 ...

  9. 全面剖析XMLHttpRequest对象

    XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础.尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一步简化XMLHttpRequest对象的使用:但是,我们 ...

随机推荐

  1. DOM的基本属性

    结构和内容属性1.1 nodeType1.2 nodeName, tagName1.3 innerHTML1.4 innerHTML pitFalls1.5 nodeValue 总结DOM节点是一个对 ...

  2. cocos2d-x quick 学习 一 环境

    最近几天都在学习quick 一直也在查找资料. 本来这篇文章在昨晚就能写好的.可是昨晚环境遇到点问题自己没想通. 正题:首先是环境配置: 由于我在mac下 所以在网上找了很多资料提前看了.  我之前也 ...

  3. 如何通过cmd检查自己电脑是否安装了oracle

    随便一个oracle命令,例如imp,如果提示输入用户名,就表示安装了oracle 1.直接运行sqlplus,然后要求输入用户名和密码.如果你是管理员的身份,应该在用户名后加as sysdba(以下 ...

  4. html5——自定义属性

    自定义属性:添加前缀"data-" dataset属性:添加自定义属性后,通过元素的dataset属性来访问自定义属性的值(属性名没有data-前缀) data-name:data ...

  5. JDK的安装与Java环境变量的配置详解

    JDK作为JAVA开发的环境,必须在电脑上安装JDK. 1.下载jdk http://rj.baidu.com/soft/detail/14459.html?ald下载jdk最新版jdk-8u11-w ...

  6. 百度之星初赛2A 1001 ALL X（HDU 5690）

    All X Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submi ...

  7. phpMyAdmin的配置

    好久没写东西了,上来记录一下今天学的一点小东西吧~ 之前搞php开发的时候,一直用的是SQLyog来操作mysql数据库的,但是今天发现sqlyog功能不是很完善,主要是我想修改数据库名,但是sqly ...

  8. 【哈希表】CodeVs1230元素查找

    一.写在前面 哈希表(Hash Table),又称散列表,是一种可以快速处理插入和查询操作的数据结构.哈希表体现着函数映射的思想,它将数据与其存储位置通过某种函数联系起来,其在查询时的高效性也体现在这 ...

  9. 浏览器禁止js打开新窗口

    在项目中,有个需求是需要ajax获取新地址,然后去打开该页面地址,这样会被浏览器拦截,可以采取以下方式:1.再ajax请求先前,先创建一个新窗口 var newTab = window.open('' ...

  10. 连锁机构3D指纹考勤系统解决方案

    信息技术的高速发展加速了商业零售业连锁经营的信息化和全球化的进程,同时也推动了商业管理的变革.尽管人们对它的认识是被动与滞后的,但这种变革依然伴随着商业业态的转变和信息技术的发展或快或慢地在悄然进行着 ...