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对象在不同浏览器下有差异 优秀的 ...
随机推荐
- [2019杭电多校第二场][hdu6599]I Love Palindrome String(回文自动机&&hash)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6599 题目大意为求字符串S有多少个子串S[l,r]满足回文串的定义,并且S[l,(l+r)/2]也满足 ...
- [BZOJ 2199] [USACO11JAN] 大陆议会The Continental Cowngress(2-SAT)
[BZOJ 2199] [USACO11JAN] 大陆议会The Continental Cowngress(2-SAT) 题面 题面较长,略 分析 考虑把问题转化成一个依赖性问题 我们把每只奶牛投出 ...
- python 二维数组转一维数组
三种方法 比如 a = [[1, 2], [3, 4], [5, 6]] 列表推导式 [i for j in a for i in j] 库函数 from itertools import chain ...
- 修复线上bug
1,git branch new_branch 2,git push origin new_branch 以上是线上地址操作,以下是本地仓库操作 3,git fetch 4,git checkout ...
- C# ListView添加DragDrop
先建立好ListView,ImageList,然后编写一个比较类在就是添加DragDrop事件了具体实现看代码吧 public partial class Form1 : Form { public ...
- spring,get请求中带date日期格式参数,后台无法转换的问题
今天遇到个很奇怪的问题.前端 的查询条件中带有日期范围日期的格式 是 yyyy-MM-dd HH:mm 结果后台报错 org.springframework.validation.BindExcept ...
- java 中Shallow Heap与Retained Heap的区别
Shallow Size Shallow Size是对象本身占据的内存的大小,不包含其引用的对象.对于常规对象(非数组)的Shallow Size由其成员变量的数量和类型来定,而数组的ShallowS ...
- 01.Windows2008R2系统禁启SMBv1服务命令
微软漏洞安全问题: 检测:默认配置 = 已启用(未创建注册表项),所以不会返回 SMB1 值.Get-Item HKLM:\SYSTEM\CurrentControlSet\Services\Lanm ...
- ForkJoinPool源码简单解析
ForkJoin框架之ForkJoinTask java 阅读约 62 分钟 前言 在前面的文章"CompletableFuture和响应式编程"中提到了ForkJoinTas ...
- 自定义线程池的名称(ThreadPoolExecutor)
目的:有时候为了快速定位出现错误的位置,在采用线程池时我们需要自定义线程池的名称. 1.创建ThreadFactory(ThreadPoolExecutor默认采用的是DefaultThreadFac ...