Ajax(javascript)案例
一、注册案例(Get方式)
1、前台
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ajax</title> </head> <body> <form> 用户名[GET]:<input id="usernameID" type="text" name="username" /> 光标移出后,立即检查结果 </form> <hr /> <span id="resultID"></span> <script type="text/javascript"> //定位文本框,同时提供焦点失去事件 document.getElementById("usernameID").onblur = function() { var userName=this.value; //判断是否为空 if(userName.length==0){ document.getElementById("resultID").innerHTML="<font color='red'>用户名必填</font>"; }else{ //对汉字进行UTF-8编码 userName=encodeURI(userName); console.log(userName); //1、创建AJAX对象 var ajax = createAJAX(); //2、准备发送请求 var method = "GET"; //为了适应IE浏览器对其不变的地址缓存,以致其不会继续去发送请求,所以加上时间,保证唯一 var url = "${pageContext.request.contextPath}/RegisterServlet?time="+new Date().getTime()+"&userName="+userName; ajax.open(method, url); //3、真正发送请求的具体数据到服务器,如果球体中无数据,就用null表示 ajax.send(null); //4、Ajax异步对象不断监听服务器 ajax.onreadystatechange = function() { //如果状态码为4 if (ajax.readyState == 4) { //如果响应码为200 if (ajax.status == 200) { var tip=ajax.responseText; document.getElementById("resultID").innerHTML = tip; } } } } } function createAJAX() { var ajax = null; try { //如果是IE5——IE12的话 ajax = new ActiveXObject("microsoft.xmlhttp"); } catch (e1) { //如果是非IE的话 ajax = new XMLHttpRequest(); } return ajax; } </script> </body> </html>
2、servlet
public class RegisterServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String userName = request.getParameter("userName"); userName=new String(userName.getBytes("iso-8859-1"),"utf-8"); String tip = "<font color='green'>可以注册</font>"; if("郭庆兴".equals(userName)){ tip = "<font color='red'>该用户已存在</font>"; } response.setContentType("text/html;charset=UTF-8"); PrintWriter pw = response.getWriter(); pw.write(tip); pw.flush(); pw.close(); } }
二、注册(POST)
1、前台
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ajax</title> </head> <body> <form> 用户名[POST]:<input id="usernameID" type="text" name="username" /> 光标移出后,立即检查结果 </form> <hr/> <span id="resultID"></span> <script type="text/javascript"> //定位文本框,同时提供焦点失去事件 document.getElementById("usernameID").onblur = function() { var userName=this.value; //判断是否为空 if(userName.length==0){ document.getElementById("resultID").innerHTML="<font color='red'>用户名必填</font>"; }else{ //1、创建AJAX对象 var ajax = createAJAX(); //2、准备发送请求 var method = "POST"; //为了适应IE浏览器对其不变的地址缓存,以致其不会继续去发送请求,所以加上时间,保证唯一 var url = "${pageContext.request.contextPath}/RegisterServlet?time="+new Date().getTime(); ajax.open(method, url); //设置AJAX请求头为POST,他会将请求体中的汉字自动进行UTF-8的编码 //<form action="" enctype="application/x-www-form-urlencoded"></form> ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); //3、真正发送请求的具体数据到服务器, var content="userName="+userName; ajax.send(content); //4、Ajax异步对象不断监听服务器 ajax.onreadystatechange = function() { //如果状态码为4 if (ajax.readyState == 4) { //如果响应码为200 if (ajax.status == 200) { var tip=ajax.responseText; //创建img标签 var imgElement=document.createElement("img"); //设置imng标签的属性 imgElement.src=tip; imgElement.style.width="12px"; imgElement.style.height="12px"; //定位span标签、 var spanElement=document.getElementById("resultID"); //清空span标签 spanElement.innerHTML = ""; //请img标签加入到span标签中去 spanElement.appendChild(imgElement); } } } } } function createAJAX() { var ajax = null; try { //如果是IE5——IE12的话 ajax = new ActiveXObject("microsoft.xmlhttp"); } catch (e1) { //如果是非IE的话 ajax = new XMLHttpRequest(); } return ajax; } </script> </body> </html>
这与前面,有个地方不同,就是在open方法和send方法之间要设置一个响应头,否则后台没办法接收到数据。
2、后台servlet
public class RegisterServlet extends HttpServlet { public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); String userName=request.getParameter("userName"); String tip="img/right.gif"; if ("郭庆兴".equals(userName)) { tip="img/error.gif"; } response.setContentType("text/html;charset=utf-8"); PrintWriter pw=response.getWriter(); pw.write(tip); pw.flush(); pw.close(); } }
结果如图
三、三级联动
省份-城市联动
1、前台
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ajax</title> </head> <body> 省份:<select id="provinceID" style="width: 120px"> <option>选择省份</option> <option>湖北省</option> <option>广东省</option> <option>湖南省</option> </select> 城市:<select id="cityID" style="width: 120px"> <option>选择城市</option> </select> <script type="text/javascript"> //定位下拉框,同时添加内容改变事件 document.getElementById("provinceID").onchange = function() { //清空城市下拉列表的内容,除了第一项 var cityElement=document.getElementById("cityID"); cityElement.length=1; //获取选中的省份标签的索引号,从0开始 var index=this.selectedIndex; //定位当前的option标签 var optionElement=this[index]; //获取option内容的标签 var province=optionElement.innerHTML; //如果选中的不是提示“选择省份”,不需要向服务器去查询城市信息 if ("选择省份" != province) { var ajax=createAJAX(); var method="post"; var url="${pageContext.request.contextPath}/ProvinceServlet?time="+new Date().getTime(); ajax.open(method, url); //设置响应头 ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded"); var content="province="+province; ajax.send(content); //***************等待服务器发送数据************** ajax.onreadystatechange=function(){ if (ajax.readyState==4) { if (ajax.status=200) { //从ajax异步对象中获取服务器响应的xml文档 var xmlDocument = ajax.responseXML; //按照DOM规则解析xml文档 var cityElementArray = xmlDocument.getElementsByTagName("city"); var size=cityElementArray.length; for (var i = 0; i < size; i++) { var city = cityElementArray[i].firstChild.nodeValue; //开始往城市的下拉栏添加 var optionElement=document.createElement("option"); optionElement.innerHTML=city; cityElement.appendChild(optionElement); } } } } } } function createAJAX() { var ajax = null; try { //如果是IE5——IE12的话 ajax = new ActiveXObject("microsoft.xmlhttp"); } catch (e1) { //如果是非IE的话 ajax = new XMLHttpRequest(); } return ajax; } </script> </body>
2、后台servlet
package com.gqx.test1; 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; /** * 二级联动,基于xml方式完成 * @author 郭庆兴 * */ public class ProvinceServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); String province=request.getParameter("province"); //通知ajax异步对象,服务器响应的数据格式为xml response.setContentType("text/xml;charset=UTF-8"); //获取字符流输出 PrintWriter pw=response.getWriter(); //如果是连接数据库的话,应该查出来的是一个list集合,然后将其按xml的方式封装,如下格式 pw.write("<?xml version='1.0' encoding='UTF-8'?>"); pw.write("<root>"); if ("湖北省".equals(province)) { pw.write("<city>武汉</city>"); pw.write("<city>黄石</city>"); pw.write("<city>荆州</city>"); pw.write("<city>襄阳</city>"); pw.write("<city>宜昌</city>"); }else if ("湖南省".equals(province)) { pw.write("<city>长沙</city>"); pw.write("<city>株洲</city>"); pw.write("<city>萍乡</city>"); pw.write("<city>湘潭</city>"); pw.write("<city>岳阳</city>"); }else if ("广东省".equals(province)) { pw.write("<city>广州</city>"); pw.write("<city>深圳</city>"); pw.write("<city>中山</city>"); pw.write("<city>佛山</city>"); pw.write("<city>汕头</city>"); pw.write("<city>珠海</city>"); } pw.write("</root>"); pw.flush(); pw.close(); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request, response); } }
这里要注意的是在后台要用xml的方式去发送数据,同时前台去接受数据的时候要去解析,先接受
//从ajax异步对象中获取服务器响应的xml文档 var xmlDocument = ajax.responseXML; //按照DOM规则解析xml文档 var cityElementArray = xmlDocument.getElementsByTagName("city");
要获取xml最小节点内的数据可以通过如下方法去获取
var city = cityElementArray[i].firstChild.nodeValue;
最终 效果如下
Ajax(javascript)案例的更多相关文章
- jQuery中的ajax用法案例
什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载 ...
- Django(十二)视图--利用jquery从后台发送ajax请求并处理、ajax登录案例
一.Ajax基本概念 [参考]:https://www.runoob.com/jquery/jquery-ajax-intro.html 异步的javascript.在不全部加载某一个页面部的情况下, ...
- JavaScript案例开发之扑克游戏
随着时代的发展,知识也在日益更新,但是基础知识永远不会过时,它是新时代的基石,更是我们进一步学习的保障,下面带着大家用JavaScript开发一款真正的扑克游戏,和大家一起分享,希望你们能够喜欢:闲话 ...
- 关于ajax入门案例
$.ajax方法 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他ht ...
- node+ajax实战案例(2)
2.静态资源渲染 2.1.创建http服务器 var http = require('http'); var url = require('url'); var app = http.createSe ...
- ajax经典案例--省市联动
ajax的省市联动案例 如果我们的代码比较复杂,可以通过file_put_contents来输出信息到某个日志. 在一个元素中添加另一个元素使用的方法是:appendChild(). 函数append ...
- ajax交互案例
数据交互是前端很重要的一部分,静态页是基础,而交互才是网页的精髓.交互又分为人机交互和前后端数据交互,现阶段的互联网下,大部分的网站都要进行前后端数据交互,如何交互呢?交互的流程大概就是前端发送数据给 ...
- JavaScript案例一:Window弹窗案例
注:火狐可运行,谷歌不可运行(安全级别高) <!DOCTYPE html> <html> <head> <title>JavaScript 弹窗案例&l ...
- JQuery的ajax登录案例
1.简单版AjaxLogin.html代码: <head> <title></title> <script src="jquery-1.8.3.js ...
随机推荐
- 最顶尖的12个IT技能
这差不多是十年前得了,看看今天这些东西哪些死掉了,哪些成长茁壮了,又能有哪些启示. KevinScott是谷歌公司的高级技术经理,也是美国计算机协会专业与教育委 员会的创始成员,他说:“我在硅谷看到的 ...
- 20155326刘美岑2016-2017-2《Java程序设计》第三周学习总结
20155326刘美岑2016-2017-2<Java程序设计>第三周学习总结 教材学习内容总结 基本类型和类类型 基本类型:第三章中讲述的那几种,short.long.int.byte. ...
- codeblock快捷键使用
•在编辑区按住右键可拖动代码,省去拉滚动条之麻烦:相关设置:Mouse Drag Scrolling. •Ctrl+D可复制当前行或选中块. •可拖动选中块使其移动到新位置,按住Ctrl则为复制到新位 ...
- Spring下配置几种常用连接池
1.连接池概述 数据库连接是一种关键的有限的昂贵的资源,这一点在多用户的网页应用程序中体现得尤为突出.对数据库连接的管理能显著影响到整个应用程序的伸缩性和健壮性,影响到程序的性能指标.数据库连接池正是 ...
- WPF学习笔记(5):两个DataGrid的滚动条实现同步滚动
效果:两个DataGrid的滚动条实现同步滚动. 代码参考了博客园chuncn的文章<.net中同步多个ScrollViewer滚动的四种方法>,原文是针对ListBox的.现改为针对Da ...
- 使用ActionFilterAttribute实现MVC后台授权
授权就是我们在用户未登录的情况下不允许访问一些页面,只有登录后才能进行访问一些页面. 在mvc中我们可以使用ActionFilterAttribute来进行授权验证来阻止一些未经授权的直接访问的页面. ...
- QT中的一些信号
QLineEdit: 通过改变QLineEdit的echoMode(),可以设置其属性,比如以密码的形式输入. 文本的长度可以由maxLength()限制,可以通过使用validator()或者inp ...
- 基于tkinter的九型人格测试系统介绍
基于tkinter的九型人格测试系统介绍 一.程序代码地址,GitHub 二.程序介绍 1.login.py 登录界面: 注册界面: 2.mainWindow.py 登录成功之后的界面: 3.doTe ...
- Spring 扫描标签<context:component-scan/>
一. <context:annotation-config/> 此标签支持一些注入属性的注解, 列如:@Autowired, @Resource注解 二. <context:comp ...
- CSS3标签显示模式
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素.具体如下: 块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常 ...