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 ...
随机推荐
- Xcode7建立自己的自定义工程和类模板
首先进入系统模板的目录 /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/Library ...
- python file
>>> help(open) Help on built-in function open in module __builtin__: open(...) open(name[, ...
- javascript删除数组某个元素
1.首先可以给js的数组对象定义一个函数,用于查找指定的元素在数组中的位置,即索引 Array.prototype.indexOf = function(val) { for (var i = 0; ...
- MySQL的语句执行顺序
MySQL的语句执行顺序 MySQL的语句一共分为11步,如下图所标注的那样,最先执行的总是FROM操作,最后执行的是LIMIT操作.其中每一个操作都会产生一张虚拟的表,这个虚拟的表作为一个处理的输入 ...
- 数据库DBA(3年以内需求)
1.DBA工作:日常维护,备份及恢复,系统安装,补丁应用,健康检查及优化,故障处理; 2.精通sql语句.视图存储过程.函数的编写.触发器; 3.精通data guard/RAC,能顺利配置和管理da ...
- Android笔记：通知
可以在活动里创建,也可以在广播接收器里创建,还可以在服务里创建. NotificationManager manager = (NotificationManager)getSystemService ...
- SQLite入门语句之HAVING和DISTINCT
一.SQLite入门语句之HAVING HAVING 子句允许指定条件来过滤将出现在最终结果中的分组结果. WHERE 子句在所选列上设置条件,而 HAVING 子句则在由 GROUP BY 子句创建 ...
- 如何查看OpenCv的源代码
需要移植部分opencv的算法,不得不查看opencv的原始代码. 在一般的代码调试中一般只能看到一些opencv的函数声明和定义,看不到内部执行过程,需要利用 CMake导出opencv 源码,生成 ...
- HDU 3015 Disharmony Trees（树状数组）
题意:给你n棵树,每棵树上有两个权值X H 对于X离散化 :3 7 1 5 3 6 -> 2 6 1 4 2 5,对于H一样 然后F = abs(X1-X2) S=min(H1,H2) 求出 ...
- javascript数组去重的两个方法
方法一: 创建一个临时数组,判断目标数组中每个元素是否在临时数组中,如果不在就添加进临时数组,最后return临时数组 <script> var arr=[1,2,3,4,5,1,2,3, ...