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'/> 该用户名已经存在";
}else{
document.getElementById("tip").innerHTML="<img src='ok.png'/> 该用户名可用";
}
}
};
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()"/> <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>
市：
<select id="shi">
</select>
</body>
</html>
XMLHttpRequest 对象相关的更多相关文章
- XmlHttpRequest对象的获取及相关操作
一.获取XMLHttpRequest对象 方案一: function ajaxFunction(){ var xmlHttp; try{ // Firefox, Opera 8.0+, Safari ...
- 轻松掌握XMLHttpRequest对象------【这是.net 版本】
轻松掌握XMLHttpRequest对象 XmlHttp是什么? 最通用的定义为:XmlHttp是一套可以在Javascript.VbScript.Jscript等脚本语言中通过http协议传送或从接 ...
- AJAX——XMLHttpRequest对象的使用
AJAX是web2.0即动态网页的基础,而XMLHttpRequest对象又是AJAX的核心.XMLHttpRequest对象负责将用户信息以异步通信地发送到服务器端,并接收服务器响应信息和数据 一. ...
- XMLHttpRequest对象解读
<!DOCTYPE html> <html> <body> <script> function reqListener () { console.log ...
- js进阶ajax的XMLHttpRequest对象的status和statustext属性（如果ajax和php联合使用的话：open连接服务器的第二个参数文件路径改成请求php的url即可）
js进阶ajax的XMLHttpRequest对象的status和statustext属性(如果ajax和php联合使用的话:open连接服务器的第二个参数文件路径改成请求php的url即可) 一.总 ...
- 轻松掌握XMLHttpRequest对象
XmlHttp是什么? 最通用的定义为:XmlHttp是一套可以在Javascript.VbScript.Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API.XmlHt ...
- ES6深入学习记录(二)promise对象相关
1.Promise的含义 Promise是异步编程的一种解决方案,比传统的解决方案--回调函数和事件更合理和强大.ES6将其写进了语言标准,统一了用法,原生提供了promise对象. 所谓Promis ...
- AJAX的核心XMLHttpRequest对象
为了实现异步通讯,提高用户体验度,而将很多旧知识(XML,DOM,JavaScript,HTML,jQuery,Css...)重新融合程一个新的知识框架.而XMLHttpRequest对象则是其中的重 ...
- XMLHTTPRequest对象的创建与浏览器的兼容问题
MLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpRequest ...
随机推荐
- java8学习之Collectors工厂类源码分析与实战
如上一节[http://www.cnblogs.com/webor2006/p/8360232.html]在结尾处谈到的,彻底理解了Collector收集器之后,有必要对其系统Collectors实现 ...
- hdu4405 概率dp
飞行棋游戏 问从0结束游戏的投色子次数期望是多少 设dp[i]表示i到n的期望,那么可以得到dp[i]=(dp[i+1]+dp[i+2]+dp[i+3]+dp[i+4]+dp[i+5]+dp[i+6] ...
- Summer training round2 #7 (Training #23)
A:约瑟夫环 套公式 B:线性筛素数 C:投骰子 概率DP F:有权无向图的生成树(边最大值和最小值只差最小) 直接kruskal G:状压BFS或者双向BFS H:模拟题 I:几何题 J:高斯消元
- Linux服务器安装配置JDK
一.准备工作: 1.登录服务器,切换到root用户(su - root,然后输入密码,按enter),进入根目录:cd / 2.进入要安装jdk的目录,自己可以创建一个java目录,执行命令如下: c ...
- Gym - 102082G What Goes Up Must Come Down (树状数组+贪心)
题意:有一个长度为n的序列,你每次可以选择两个相邻的元素交换,求把这个序列排成单峰序列的最少交换次数. 方法一:将元素按数值从大到小排序(保存原来的位置),把最大的插在中间,剩下的依次往两边放,依次考 ...
- k8s名称空间资源
namespace是k8s集群级别的资源,用于将集群分隔为多个隔离的逻辑分区以配置给不同的用户.租户.环境或项目使用,例如,可以为development.qa.和production应用环境分别创建各 ...
- python--数学运算函数
x=-100 y=abs(x) #求绝对值 y=divmod(9,4) #9/4之后获取整数与余数 #(2, 1) #返回一个元组(2, 1),第一个数是整数,第二个数是余数 y=round(3.14 ...
- IE ActiveObject
ActiveObject只能用于基于IE内核的浏览器 需要添加信任站点 并设置对ActiveObject的启用 问题: 1.用javascript 创建ActiveX对象时出现:Automation ...
- C# socket异步 服务端
转自: http://blog.csdn.net/qq_20282263/article/details/54310737 private Dictionary<string, Session ...
- 分布式-信息方式-ActiveMQ的动态网络链接
ActiveMQ的动态网络链接多播协议 multicast ActiveMQ使用 Multicast协议将一个 Service和其他的 Broker的 Service连接起来,IPmulticast是 ...