Ajax校验
一、Ajax简介
AJAX即(Asynchronous JavaScript and Xml)（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
Ajax的关键元素包括以下内容：
① JavaScript语言：Ajax技术的主要开发语言。
② XML/JSON/HTML等：用来封装请求或响应的数据格式
③ DOM(文档对象模型)：通过DOM属性或方法修改页面元素，实现页面局部刷新
④ CSS：改变样式，美化页面效果，提升用户体验度
⑤ Ajax引擎：即XMLHttpRequest对象，以异步方式在客户端与服务器之间传递数据。
二、Ajax工作流程
三、常用方法：
四、常用属性
五、实现思路：
1、锁定用户名文本框，注册onblur事件
2、创建XMLHttpRequest对象。通过window.XMLHttpRequest的返回值判断创建XMLHttpRequest对象的方式
3、设置回调函数。通过onreadystatechange属性设置回调函数，其中回调函数需要自定义
4、初始化XMLHttpRequest对象。通过open()设置请求的发送方式和路径
5、发送请求
jsp页面：
<body>
用户名：<input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/><br/>
密码： <input type="password" name="txtPwd"/>
</body>
创建Servlet：回送信息
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String uname = request.getParameter("uname");
if (uname.equals("admin")) {
//用户已经被注册了
//回送 信息
response.getWriter().write("OK"); }else {
response.getWriter().write("NO");
}
注意：
步骤一：通过window。XMLHttpRequest的返回值判断当前浏览器创建XMLHttpRequest对象的方式。如果为true，说明是新版本IE或其他浏览器，可使用new XMLHttpRequest()方式创建XMLHttpRequest对象；如果为false，说明是老版本IE浏览器，需使用new ActiveXObject("Microsoft.XMLHttp")的方式创建XMLHttpRequest对象
步骤二：通过XMLHttpRequest对象的onreadystatechange属性设置回调函数，用于当请求成功后接收服务器端返回的数据
步骤三：通过XMLHttpRequest对象的open()方法，传入参数完成初始化XMLHttpRequest对象的工作。第一个参数为Http请求方式，选择发送Httpget 请求，因此参数为get。第二个参数为要发送的url请求路径，将要发送的数据附加到url路径后面
步骤四：调用XMLHttpRequest对象的send()方法，参数为要发送到服务器端的数据，因为采用"get"方式请求时，参数已经附加到url路径后，所以直接设置为null。如果send()方法不设值，在不同的浏览器下可能存在不兼容问题。
执行完毕后，异步请求的发送过程就结束！
注：使用Ajax发送Post请求需注意要设置setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
采用Get方式发送请求时，通常会将需要携带的参数附加在URL路径后面一起发送，所以send()不需要传递参数，设置为null即可
六 、使用jQuery实现Ajax
jQuery常用的Ajax方法
语法：$.ajax([settings]);
常用属性参数:
常用函数参数：
使用$.ajax()验证用户名--使用$.ajax() 实现异步交互
注：需引jquery-1.11.1.js库
<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript"> $(function(){
var dom=$("#txtName");
dom.blur(function() {
myjquery();
});
}); function myjquery(){
var dom=$("#txtName");
$.ajax({
url:'<%=path%>/servlet/CheckUserServlet',
type:'post',
data:{uname:dom.val()},
success:function(result){
alert(result);
}
});
}
</script> </head> <body>
<h2>使用jQuery实现Ajax</h2>
用户名：<input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/><br/>
密码： <input type="password" name="txtPwd"/>
</body>
实现效果：
若输入的非admin，即可注册，否则无法注册
若是post请求，调试效果如下：
七、JSON简介
JavaScript Object Notation是一种轻量级的数据交换格式
①定义Json对象
语法：var json对象={key:value,key:value,...}
② 定义Json数组
语法：var json数组=[value,value,...]
<script type="text/javascript">
var data={"firstName":"Brett","lastName":"hehe"};
$.each(data,function(i,dom){
alert(dom);
}); /* var data={
"people":[
{"firstName":"Brett","lastName":"McLaughlin","email":"aaaa"},
{"firstName":"Jason","lastName":"Hunter","email":"bbbb"},
{"firstName":"Elliotte","lastName":"Harold","email":"cccc"}
]
};
$.each(data.people,function(i,dom){
alert(dom.firstName);
});
*/ </script>
那么即可拿到每个dom对象：
校验完毕，你放心，我安心。
Ajax校验的更多相关文章
- SSM整合框架实现ajax校验
SSM整合框架实现ajax校验 刚学习了ssm框架,ajax校验成功,分享下 1.导入jar包
- 详细讲解：tp3.2.3生成验证码并进行验证（ajax校验返回及自定义返回）
TP3.2.3的验证码也是比较经典的小功能,框架对这个小功能的封装还是比较完美的,废话不多说,开始记录 1.总体效果: (1)初始界面 (2)自定义的返回校验效果: (3)ajax的校验返回: 2.代 ...
- struts2中Ajax校验
Ajax(Asynchronous JavaScript and Xml),整合了JavaScript,XML,CSS,DOM,Ajax引擎(XMLHttpRequest). JavaScript语言 ...
- 十七 Ajax&校验用户名功能
Ajax: 即"Asynchronous JavaScript And XML", 异步JavaScript和XML , 是指一种创建的交互式页面应用的网页开发技术,它并不是新的技 ...
- JavaWeb网上图书商城完整项目--day02-6.ajax校验功能之页面实现
1 .现在我们要在regist.js中实现ajax的功能,使用用户名到后台查询是否注册,邮箱是否到后台注册,验证码是否正确的功能 我们来看regist.js的代码 //该函数在html文档加载完成之后 ...
- Struts2 Ajax校验
Ajax(Asynchronous javascript and xml):异步刷新技术 技术组成: CSS + xml +JavaScript +DOM Ajax核心对象: XMLHttpRequ ...
- AJAX校验用户名是否存在，焦点离开用户名、点击 【 检 查用户名 】的校验。分别用 XMLHttp 和 JQueryAJAX实现。
XMLHttp方法: $("#name").blur(function () { var xmlhttp = new ActiveXObject("Microsoft. ...
- AJAX校验商品价格（类似校验用户名）
服务器端程序 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <%@ WebHandler Language=" ...
- struts2实现ajax校验的2种方法
共同的一点是,Action都需要将一个方法暴露出来,给前端javascript调用 javascript的代码都是一样的: Js代码 function testAjax() { var $use ...
随机推荐
- Pandas-数据探索
Pandas包对数据的常用探索功能,方便了解数据描述性属性. 目录 基础属性 shape indexs columns values dtype/dtypes 汇总和计算描述统计 count() va ...
- LYDSY热身赛 escape
Description 给出数字N(1<=N<=10000),X(1<=x<=1000),Y(1<=Y<=1000),代表有N个敌人分布一个X行Y列的矩阵上矩形的行 ...
- LYDSY模拟赛day1 Walk
/* 依旧考虑新增 2^20 个点. i 只需要向 i 去掉某一位的 1 的点连边. 这样一来图的边数就被压缩到了 20 · 2^20 + 2n + m,然后 BFS 求出 1 到每个点的最短路即可. ...
- Raid与DAN、SAN、NAS基础
一. 磁盘基本知识 1. Raid分类 Raid磁盘阵列是由多个磁盘组合成的磁盘组,可将数据分割成许多区段,分别存放在各个磁盘上:同时利用不同排列技术,可提高磁盘性能和数据安全性.下列简单介绍几种Ra ...
- Tomcat+ssh+Mysql本地正常，远程服务器中文乱码。（转）
ssh2+mysql中文乱码解决方法(统一使用UTF-8编码) 中文乱码,首先要区分是页面乱码.action乱码,还是数据库乱码.大致的原理是java使用unicode编码– >window使用 ...
- 修复 ThinkPHP3.2.3 抛出异常模块的一个BUG，关闭字段缓存功能
使用 ThinkPHP3.2.3 遇到一个奇怪的问题,正式环境上报错,提示 “页面错误!请稍后再试~” 为了查看到底出啥错误,哪里出错,于是在入口文件中加了一段代码,开启调试: defined('AP ...
- mount img
直接挂载img文件有时会有 mount:您必须指定文件系统类型 的错误,但加 -t ext2 等类型还是没用. 这是因为img文件包含了mbr引导导致的问题.解决方法如下: $sudo fdis ...
- DAY6 处理http头，格式化输出
<html> <head> <script> function insertStr(str1,n,str2){ if(str1.length<n){ retu ...
- 利用Mongoose来结构化模式与验证
Mongoose是一个文档对象模型(ODM)库,为MongoDB Node.js原生驱动程序提供更多的功能. 把结构化的模式应用到一个MongoDB集合,提供了验证和类型转换的好处 Mongoose通 ...
- JavaScript刷新页面n种方法
window.location.href 属性 window.location.href=window.location.href;//刷新当前页面 asp.net 或 asp 利用此功能刷新页面 R ...