XMLHttpRequest 对象用于在后台与服务器交换数据。

后台

package com.java1234.web;

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;

import net.sf.json.JSONArray;

import net.sf.json.JSONObject;

public class GetAjaxInfoServlet extends HttpServlet{

    /**

     *

     */

    private static final long serialVersionUID = 1L;

    @Override

    protected void doGet(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        this.doPost(request, response);

    }

    @Override

    protected void doPost(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        response.setContentType("text/html;charset=utf-8");

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

        if("checkUserName".equals(action)){

            this.checkUserName(request, response);

        }else if("ejld".equals(action)){

            this.ejld(request, response);

        }

    }

    private void checkUserName(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        PrintWriter out=response.getWriter();

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

        JSONObject resultJson=new JSONObject();

        if("jack".equals(userName)){

            resultJson.put("exist", true);

        }else{

            resultJson.put("exist", false);

        }

        out.println(resultJson);

        out.flush();

        out.close();

    }

    private void ejld(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        PrintWriter out=response.getWriter();

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

        JSONObject resultJson=new JSONObject();

        JSONArray jsonArray=new JSONArray();

        JSONObject temp=null;

        switch(Integer.parseInt(shengId)){

            case 1:{

                temp=new JSONObject();temp.put("id", 1);temp.put("text", "南京");jsonArray.add(temp);

                temp=new JSONObject();temp.put("id", 2);temp.put("text", "南通");jsonArray.add(temp);

                temp=new JSONObject();temp.put("id", 3);temp.put("text", "泰兴");jsonArray.add(temp);

                break;

            }

            case 2:{

                temp=new JSONObject();temp.put("id", 4);temp.put("text", "济南");jsonArray.add(temp);

                temp=new JSONObject();temp.put("id", 5);temp.put("text", "烟台");jsonArray.add(temp);

                temp=new JSONObject();temp.put("id", 6);temp.put("text", "蓬莱");jsonArray.add(temp);

                break;

            }

            case 3:{

                temp=new JSONObject();temp.put("id", 7);temp.put("text", "杭州");jsonArray.add(temp);

                temp=new JSONObject();temp.put("id", 8);temp.put("text", "宁波");jsonArray.add(temp);

                temp=new JSONObject();temp.put("id", 9);temp.put("text", "温州");jsonArray.add(temp);

                break;

            }

        }

        resultJson.put("rows", jsonArray);

        out.println(resultJson);

        out.flush();

        out.close();

    }

}

首页

<%@ 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 'insex.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">

    -->

  </head>

  <body>

    <br/>

    <br/>

    <br/>

    <a href="ejld.jsp">二级联动</a>

    <br/>

    <br/>

    <br/>

    <a href="checkUserName.jsp">ajax&json验证</a>

  </body>

</html>

验证姓名是否存在

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

    function checkUserName(){

        var userName=document.getElementById("userName").value;

        var xmlHttp;

        if(window.XMLHttpRequest){

            xmlHttp=new XMLHttpRequest();

        }else{

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

        }

        xmlHttp.onreadystatechange=function(){

            if(xmlHttp.readyState==4 && xmlHttp.status==200){

                alert(xmlHttp.responseText);

                var dataObj=eval("("+xmlHttp.responseText+")");

                if(dataObj.exist){

                    document.getElementById("tip").innerHTML="<img src='no.png'/>&nbsp;该用户名已经存在";

                }else{

                    document.getElementById("tip").innerHTML="<img src='ok.png'/>&nbsp;该用户名可用";

                }

            }

        };

        xmlHttp.open("get", "getAjaxInfo?action=checkUserName&userName="+userName, true);

        xmlHttp.send();

    }

</script>

</head>

<body>

<table>

    <tr>

        <th>用户注册</th>

    </tr>

    <tr>

        <td>用户名：</td>

        <td><input type="text" id="userName" name="userName" onblur="checkUserName()"/>&nbsp;&nbsp;<font id="tip"></font></td>

    </tr>

    <tr>

        <td>密码：</td>

        <td><input type="text" id="password" name="password"/></td>

    </tr>

    <tr>

        <td>确认密码：</td>

        <td><input type="text" id="password2" name="password2"/></td>

    </tr>

    <tr>

        <td><input type="submit" value="注册"/></td>

        <td><input type="button" value="重置"/></td>

    </tr>

</table>

</body>

</html>

二级联动

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

    function loadInfo(){

        var shengId=document.getElementById("sheng").value;

        shi.options.length=0;  // 删除所有市下拉框的选项

        var xmlHttp;

        if(window.XMLHttpRequest){

            xmlHttp=new XMLHttpRequest();

        }else{

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

        }

        xmlHttp.onreadystatechange=function(){

            if(xmlHttp.readyState==4 && xmlHttp.status==200){

                //alert(xmlHttp.responseText);

                var dataObj=eval("("+xmlHttp.responseText+")");

                for(var i=0;i<dataObj.rows.length;i++){

                    var o=dataObj.rows[i];

                    shi.options.add(new Option(o.text,o.id));

                }

            }

        };

        xmlHttp.open("get", "getAjaxInfo?action=ejld&shengId="+shengId, true);

        xmlHttp.send();

    }

</script>

</head>

<body>

省：

<select id="sheng" onchange="loadInfo()">

    <option value="1">江苏省</option>

    <option value="2">山东省</option>

    <option value="3">浙江省</option>

</select>

&nbsp;&nbsp;

市：

<select id="shi">

</select>

</body>

</html>

XMLHttpRequest 对象相关的更多相关文章

  1. XmlHttpRequest对象的获取及相关操作

    一.获取XMLHttpRequest对象 方案一: function ajaxFunction(){ var xmlHttp; try{ // Firefox, Opera 8.0+, Safari ...

  2. 轻松掌握XMLHttpRequest对象------【这是.net 版本】

    轻松掌握XMLHttpRequest对象 XmlHttp是什么? 最通用的定义为:XmlHttp是一套可以在Javascript.VbScript.Jscript等脚本语言中通过http协议传送或从接 ...

  3. AJAX——XMLHttpRequest对象的使用

    AJAX是web2.0即动态网页的基础,而XMLHttpRequest对象又是AJAX的核心.XMLHttpRequest对象负责将用户信息以异步通信地发送到服务器端,并接收服务器响应信息和数据 一. ...

  4. XMLHttpRequest对象解读

    <!DOCTYPE html> <html> <body> <script> function reqListener () { console.log ...

  5. js进阶ajax的XMLHttpRequest对象的status和statustext属性（如果ajax和php联合使用的话：open连接服务器的第二个参数文件路径改成请求php的url即可）

    js进阶ajax的XMLHttpRequest对象的status和statustext属性(如果ajax和php联合使用的话:open连接服务器的第二个参数文件路径改成请求php的url即可) 一.总 ...

  6. 轻松掌握XMLHttpRequest对象

    XmlHttp是什么? 最通用的定义为:XmlHttp是一套可以在Javascript.VbScript.Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API.XmlHt ...

  7. ES6深入学习记录(二)promise对象相关

    1.Promise的含义 Promise是异步编程的一种解决方案,比传统的解决方案--回调函数和事件更合理和强大.ES6将其写进了语言标准,统一了用法,原生提供了promise对象. 所谓Promis ...

  8. AJAX的核心XMLHttpRequest对象

    为了实现异步通讯,提高用户体验度,而将很多旧知识(XML,DOM,JavaScript,HTML,jQuery,Css...)重新融合程一个新的知识框架.而XMLHttpRequest对象则是其中的重 ...

  9. XMLHTTPRequest对象的创建与浏览器的兼容问题

    MLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpRequest ...

随机推荐

  1. php检测函数是否存在函数 function_exists

    php检测函数是否存在函数 function_exists 语法 bool function_exists ( string $function_name )检查的定义的函数的列表,同时内置(内部)和 ...

  2. redis的数据类型和基本操作

    Redis 的Key Redis 的 key 是字符串类型,但是 key 中不能包括边界字符,由于 key 不是 binary safe的字符串,所以像"my key"和" ...

  3. vim简明教程(附快速记忆方法）

    vim分为四种模式: 普通模式(normal mode) 插入模式(insert mode) 可视模式(visual mode) 命令模式(excute mode) 下面整理了常用的快捷键和记忆方法( ...

  4. 换个眼界看IE，它真的有那么可恶吗？

    一说到IE我想很多web小伙伴都避之不及,对于IE经验不足的同学可以说更是恨之入骨,撕心裂肺般的烦恼与气愤?,被折磨的不要不要的.我感同身受,去年的我的生日愿望就是,我希望IE浏览器在这世界上没有一个 ...

  5. DevExpress ASP.NET v19.1版本亮点：Pivot Grid等控件

    行业领先的.NET界面控件DevExpress 发布了v19.1版本,本文将以系列文章的方式为大家介绍DevExpress ASP.NET Controls v19.1中新增的一些控件及增强的控件功能 ...

  6. 使用CEfSharp之旅 前后端访问代码

    1.引入CEfSharp newget包 2.把平台配置为X86或X64,any cpu不支持此控件 3.引入命名空间 using CefSharp; using CefSharp.WinForms; ...

  7. mysql之单表条件查询

    create table staff_info( id int primary key auto_increment, name varchar(32) not null, age int(3) un ...

  8. 【leetcode】1262. Greatest Sum Divisible by Three

    题目如下: Given an array nums of integers, we need to find the maximum possible sum of elements of the a ...

  9. bytes和bytearray总结

    The core built-in types for manipulating binary data are bytes and bytearray. They are supported by ...

  10. 函数返回指针类型（strchr函数）

    #include<stdio.h> #include<string.h> char *mystrchr(char *s,char c) { while(*s) { if(*s ...