ajax总结及案例
一、实验简介
目的:检验输入登录名在数据库中是否存在,如果存在,当鼠标移出登录名框后,会提示用户名已存在,并且鼠标指针自动回到登录名框内。
操作步骤:
1、获取登录名的值
2、根据获取的登录名,组织查询条件,查询用户信息。
*如果值存在,不能保存
*如果值不存在,可以保存
二、实验操作
jsp部分:
- <s:textfield name="logonName" id="logonName" size="20" maxlength="25" onblur="checkLogonName()" />
ajax部分:
- //创建Ajax引擎
- function createXmlHttpRequest(){
- var xmlHttp;
- try{
- //Firefox,Opera,safari
- xmlHttp=new XMLHttpRequest();
- }catch(e){
- try{
- //internet Explorer
- xmlHttp=new ActiveXObject("Mxxml2.XMLHTTP");
- }catch(e){
- try{
- xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
- }catch(e){}
- }
- }
- return xmlHttp;
- }
- function checkLogonName(){
- var logonName=document.getElementById("logonName").value;
- //第一步:创建一个ajax引擎
- xmlHttp=createXmlHttpRequest();
- //第二步:事件处理函数,实质上相当于一个监听,监听服务器与客户端的连接状态
- xmlHttp.onreadystatechange=function(){
- //存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
- if(xmlHttp.readyState==4){
- /**
- readyState:存有 XMLHttpRequest 的状态。从0到4发生变化。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成,且响应已就绪
- **/
- if(xmlHttp.status==200){
- /**
- status:
- 400: 未找到页面
- 200:"OK"
- **/
- var data=xmlHttp.responseText;
- /**
- responseText 获得字符串形式的响应数据。
- responseXML 获得 XML 形式的响应数据。
- **/
- if(data==1){
- //说明已经存在
- alert("当前输入的登录名["+logonName+"]已经存在");
- document.getElementById("logonName").value="";
- document.getElementById("logonName").focus();
- }
- }
- }
- }
- //第三步:与后台服务器创建一个连接
- xmlHttp.open("POST","../../CheckLogonName",true);
- /**
- open(method,url,async)
- 规定请求的类型、URL 以及是否异步处理请求。
- method:请求的类型;GET 或 POST
- url:文件在服务器上的位置
- async:true(异步)或 false(同步)
- **/
- xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置请求头
- //第四步:发送请求的参数
- xmlHttp.send("logonName="+logonName);
- /**
- send(string)
- 将请求发送到服务器。
- string:仅用于 POST 请求
- **/
- /**
- GET 还是 POST?
- 与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
- 然而,在以下情况中,请使用 POST 请求:
- 1: 无法使用缓存文件(更新服务器上的文件或数据库)
- 2: 向服务器发送大量数据(POST 没有数据量限制)
- 3: 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
- **/
- }
路径设置:
在web.xml配置文件中,新建一个Servlet-mapping和Servlet
- <servlet>
- <servlet-name>CheckLogonName</servlet-name>
- <servlet-class>cn.itcast.elec.servlet.CheckLogonName</servlet-class>
- </servlet>
- <servlet-mapping>
- <servlet-name>CheckLogonName</servlet-name>
- <url-pattern>/checkLogonName</url-pattern>
- </servlet-mapping>
新建一个Servlet文件
- IElecUserService elecUserService=(IElecUserService)ServiceProvider.getService(IElecUserService.SERVICE_NAME);
- public void doPost(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- response.setCharacterEncoding("UTF-8");
- response.setContentType("text/html;charset=utf-8");
- PrintWriter out = response.getWriter();
- String logonName=request.getParameter("logonName");
- /**
- * checkflag:判断当前登录名是否在数据库中存在
- * 如果查询结果有值,checkflag=1;则,数据库中有重复值
- * checkflag=2,数据库中没有重复值
- */
- String checkflag=elecUserService.checkLogonName(logonName);
- out.print(checkflag);
- out.flush();
- out.close();
- }
- public String checkLogonName(String logonName) {
- // TODO Auto-generated method stub
- String hqlWhere=" and o.logonName = ? ";
- Object [] params={logonName};
- List<ElecUser> list=elecUserDao.findCollectionByConditionNoPage(hqlWhere, params, null);
- String checkflag="";
- if(list!=null&&list.size()>0){
- checkflag="1";
- }else{
- checkflag="2";
- }
- return checkflag;
- }
ajax总结及案例的更多相关文章
- AJAX应用小案例
此案例在XAMPP本地服务器上运行,需要应用jquery3.1.1的版本,应用JSON传递数据 代码如下: html代码: <!DOCTYPE html><html lang=&qu ...
- ajax调用数据案例,二级联动
题目:请针对移动端web浏览器制作一个结账数据信息展示页面 要求: 1. 页面样式除不使用表格呈现外,可自由选择其他呈现方式 2. 需符合移动端操作习惯 3. 可根据服务区.门店查询结账信息 4. 可 ...
- ajax基本原理与案例
一.什么是Ajax AJAX即“Asynchronous Javascript And XML”( 异步 JavaScript和XML),AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互 ...
- jquery ajax/post 请求 案例
@RequestMapping("/hello") @ResponseBody public Hello getJson(HttpServletRequest requ ...
- jSon和Ajax登录功能,ajax数据交互案例
ajax实例,检测用户与注册 检测用户名是否被占用: 在用户填写完用户名之后,ajax会异步向服务器发送请求,判断用户名是否存在 首先写好静态页面: index.html <!DOCTYPE h ...
- ajax+php处理案例
<div> <table> <tr> <th>状态</th> <th>信息</th> </tr> < ...
- 使用struts dojo ajax源码案例
我这里使用的jar 包struts2-dojo-plugin-2.2.1.1.jar ===========jsp======================= <%@ taglib prefi ...
- 【前端学习笔记】2015-09-11~~~~ js中ajax请求返回案例
<body><textarea id='a' rows=100 cols=300>result:</textarea>><script>var a ...
- 第六章 jQuery和ajax应用
ajax是异步JavaScript和xml的简称. 一. ajax补白 优势 不足(不一定是不足) 不需要任何插件(但需要浏览器支持js) XMLHttpRequest对象在不同浏览器下有差异 优秀的 ...
随机推荐
- java中过滤器Filter的使用总结【转载】
1.看了别人写的,觉得获益匪浅,转载下为以后的使用 java中Filter的使用
- BZOJ 1767] [Ceoi2009] harbingers (斜率优化)
[BZOJ 1767] [Ceoi2009] harbingers (斜率优化) 题面 给定一颗树,树中每个结点有一个邮递员,每个邮递员要沿着唯一的路径走向capital(1号结点),每到一个城市他可 ...
- Django之视图(V)
Django的View(视图) 一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应. 响应可以是一张网页的HTML内容,一个重定向,一个404错误, ...
- 说明一下 os.path 和 sys.path 分别代表什么?
os.path 主要是用于对系统路径文件的操作. sys.path 主要是对Python解释器的系统环境参数的操作(动态的改变Python解释器搜索路径).
- Codeforces Round #545 (Div. 2) C. Skyscrapers (离散化)
题目传送门 题意: 给你n*m个点,每个点有高度h [ i ][ j ] ,用[1,x][1,x]的数对该元素所处十字上的所有元素重新标号, 并保持它们的相对大小不变.n,m≤1000n,m≤1000 ...
- 使用Kafka的一些简单介绍: 1集群 2原理 3 术语
目录 第一节 Kafka 集群 Kafka 集群搭建 Kafka 集群快速搭建 第二节 集群管理工具 集群管理工具 集群 Issues 第三节 使用命令操纵集群 第四节 Kafka 术语说明 第五节 ...
- mongoDB学习笔记(2)
一.删数据库 1.语法 MongoDB 删除数据库的语法格式如下: db.dropDatabase() 删除当前数据库,默认为 test,你可以使用 db 命令查看当前数据库名. 2.实例 以下实例我 ...
- BigDecimal 的用法
1.初始化 BigDecimal discount=new BigDecimal(0.9); BigDecimal discount=new BigDecimal(200); 2.加减乘除 加法 ad ...
- Robot Framework 源码阅读 day2 TestSuitBuilder
接上一篇 day1 run.py 发现build test suit还挺复杂的, 先从官网API找到了一些资料,可以看出这是robotframework进行组织 测试案例实现的重要步骤, 将传入的te ...
- VMware新加网卡NAT连接(内网)出现本机与虚拟机ping不通的问题
今新加网卡NAT连接,配置好之后始终出现eth1:link is not ready. 虚拟机与本机不能建立连接. 解决方案:windows里面打开服务开启VMware NAT Service,并关闭 ...