<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>My JSP 'ajax.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="cache-control" content="no-cache">

    <meta http-equiv="expires" content="0">

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="This is my page">

    <!--

    <link rel="stylesheet" type="text/css" href="styles.css">

    -->

    <script type="text/javascript">

    var xmlHttpRequest = null; //声明一个空对象以接收XMLHttpRequest对象

    function ajaxSubmit()

    {

        if(window.ActiveXObject) // IE浏览器

        {

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

        }

        else if(window.XMLHttpRequest) //除IE外的其他浏览器实现

        {

            xmlHttpRequest = new XMLHttpRequest();

        }

        if(null != xmlHttpRequest)

        {

            var v1 = document.getElementById("value1ID").value;

            var v2 = document.getElementById("value2ID").value;

            xmlHttpRequest.open("POST", "AjaxServlet", true);        //xmlHttpRequest.open("GET", "AjaxServlet?v1="+v1+"&v2="+v2, true);

            //关联好ajax的回调函数

            xmlHttpRequest.onreadystatechange = ajaxCallback;

            //真正向服务器端发送数据

            // 使用post方式提交，必须要加上如下一行,表单默认编码方式

            xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

            xmlHttpRequest.send("v1=" + v1 + "&v2=" + v2);            //xmlHttpRequest.send(null);

        }

    }

    function ajaxCallback()

    {

        //1.构造对象,2.发送请求,3.收到响应,4.处理响应

        if(xmlHttpRequest.readyState == 4)

        {

            if(xmlHttpRequest.status == 200)

            {

                var responseText = xmlHttpRequest.responseText;

                document.getElementById("div1").innerHTML = responseText;

            }

        }

    }

    </script>

  </head>

  <body>

    <input type="button" value="get content from server" onclick="ajaxSubmit();"><br>

    <input type="text" name="value1" id="value1ID"><br>

    <input type="text" name="value2" id="value2ID"><br>

    <div id="div1"></div>

  </body>

</html>
package com.shengsiyuan.servlet;

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

{

    @Override

    protected void doGet(HttpServletRequest req, HttpServletResponse resp)

            throws ServletException, IOException

    {

        System.out.println("doGet invoked");

        process(req, resp);

    }

    private void process(HttpServletRequest req, HttpServletResponse resp)

            throws IOException

    {

        String v1 = req.getParameter("v1");

        String v2 = req.getParameter("v2");

        System.out.println("v1=" + v1 + ", v2=" + v2);

        String v3 = String.valueOf(Integer.valueOf(v1) + Integer.valueOf(v2));

        PrintWriter out = resp.getWriter();

        // try

        // {

        // Thread.sleep(5000);

        // }

        // catch (InterruptedException e)

        // {

        // e.printStackTrace();

        // }

        resp.setHeader("pragma", "no-cache");

        resp.setHeader("cache-control", "no-cache");

        out.println(v3);

        out.flush();

    }

    @Override

    protected void doPost(HttpServletRequest req, HttpServletResponse resp)

            throws ServletException, IOException

    {

        System.out.println("doPost invoked");

        this.process(req, resp);

    }

}

Ajax随笔的更多相关文章

  1. AJAX随笔1

    [1] AJAX简介   > 全称: Asynchronous JavaScript And XML   > 异步的JavaScript和XML   > AJAX就是通过JavaSc ...

  2. AJAX随笔2

    Ajax作用: 是用JavaScript向服务器发送异步请求,然后服务器给出响应,然后以XML格式的文件返回给浏览器端! 异步: 当浏览器向服务器发送请求的时候,不是整个页面刷新,而是局部刷新[局部信 ...

  3. Ajax 随笔

    例子:实现AJAX效果(投票例子) 后端代码 前端代码 原理是使用HTTP状态码204的特性(请求成功,但是不会返回内容,所以浏览器不会进行跳转) 例子:实现AJAX效果(投票例子2) 前端代码 原理 ...

  4. 原生Ajax封装随笔

    XMLHttpRequest 对象用于和服务器交换数据.我们使用 XMLHttpRequest 对象的 open() 和 send() 方法: open(method,url,async) metho ...

  5. AJAX学习随笔

    AJAX名为“啊,贾克斯”,听着挺怪的哈. 主要的技术就是XMLHttpRequest对象和Javascript 度娘的解答: AJAX即“AsynchronousJavascriptAndXML”( ...

  6. php随笔2-php+ajax 实现输入读取数据库显示匹配信息

    dropbox_index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  7. 对ajax基础的掌握随笔

    原始的ajax,在第一个页面定义如下: function createAjax() { var xmlhttp; if (window.ActiveXObject) xmlhttp = new Act ...

  8. 学习随笔:Vue.js与Django交互以及Ajax和axios

    1. Vue.js地址 Staticfile CDN(国内): https://cdn.staticfile.org/vue/2.2.2/vue.min.js unpkg:会保持和npm发布的最新的版 ...

  9. Ajax与XMLHttpRequest随笔

    1.XMLHttpRequest对象 创建XHR对象:let xhr = new XMLHttpRequest(); open():启动一个请求准备发送 open()接收3个参数:请求类型('GET' ...

随机推荐

  1. B-树和B+树

    B-树和B+树是一种平衡的多路查找树,它在文件系统中很有用.一颗m阶的b-树,或为空树,或满足下列特性的m叉树.1)树中每个节点至多有m棵子树2)若根结点不是叶子结点,则至少有两棵子树.3)除根之外的 ...

  2. java 多线程同步

    一.synchronized关键字 同步方法 每个对象都包含一把锁(也叫做监视器),它自动称为对象的一部分(不必为此写任何特殊的代码).调用任何synchronized方法时,对象就会被锁定,不可再调 ...

  3. OpenGl从零开始之坐标变换（下）

    这节主要来理解投影变换和视口变换的使用. 1.正射投影:glOrtho 函数原型: void glOrtho(GLdouble left,GLdouble right,GLdouble bottom, ...

  4. C# 类和结构

    类和结构实际上都是创建对象的模板,每个对象都包含数据,并提供了处理和访问数据的方法 . 类定义了类的每个对象(称为实例)可以包含什么数据和功能. 例如,如 果一个类表示一个顾客,就可以定义字段 Cus ...

  5. VS2013中修改.dll工程项目的.lib和.dll的输出路径

    一个dll工程,生成的两个东西是我们需要的:.lib和.dll,在实际开发过程中我们往往希望这两个东西直接输出到特定文件夹,对于这两个的修改: 设置好之后,对于调用该dll的exe工程,将exe的输出 ...

  6. Go语言相关图书推荐

    Go语言编程 作      者 许式伟 等 著 出 版 社 人民邮电出版社 出版时间 2012-08-01 版      次 1 页      数 245 印刷时间 2012-08-01 开      ...

  7. 设计模式 单件-Singleton

    单件模式 Singleton 什么时候使用?当需要独一无二的对象时,请想起他. 举例:线程池(threadpool),缓存(cache),对话框,处理偏好设置和注册表(registry)的对象,驱动程 ...

  8. 判断是否为BST

    递归的方法,用返回false的方法.中序遍历的想法很好,空间浪费.遍历的过程记录上一次的值进行比较. //题目描述 // //请实现一个函数,检查一棵二叉树是否为二叉查找树. //给定树的根结点指针T ...

  9. Juniti学习总结

    JUnit简介 JUnit是由 Erich Gamma和Kent Beck编写的一个回归测试框架(regression testing framework).JUnit测试是程序员测试,即所谓白盒测试 ...

  10. 数据结构(11) -- 邻接表存储图的DFS和BFS

    /////////////////////////////////////////////////////////////// //图的邻接表表示法以及DFS和BFS //////////////// ...