XMLHttpRequest 对象相关

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>

 

posted @ 2017-12-20 18:02  Angelye  阅读(153)  评论(0)  编辑  收藏  举报