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 ...
随机推荐
- SameSite Cookie，防止 CSRF 攻击
因为 HTTP 协议是无状态的,所以很久以前的网站是没有登录这个概念的,直到网景发明 cookie 以后,网站才开始利用 cookie 记录用户的登录状态.cookie 是个好东西,但它很不安全,其中 ...
- PropertiesFactoryBean PropertyPlaceholderConfigurer 区别
正如 stackoverflow上说的,PropertiesFactoryBean 是PropertiesLoaderSupport 直接的实现类, 专门用来管理properties文件的工厂bean ...
- MySQL Cluster 7.3.5 集群配置参数优化（优化篇）
按照前面的教程:MySQL Cluster 7.3.5 集群配置实例(入门篇),可快速搭建起基础版的MySQL Cluster集群,但是在生成环境中,还是有很多问题的,即配置参数需要优化下, 当前生产 ...
- 【重点】Shell入门教程：流程控制（3）条件判断式的真假值
之前曾提到,在Bash中什么是真什么是假,是以命令的结束状态是否为0来做判断.传回0,即为真:传回非0,即为假. 在Bash中,这种可以影响程序流程的式子,称为条件判断式.判断式的操作数分成“单元”及 ...
- PHP setcookie() 函数
语法 setcookie(name,value,expire,path,domain,secure): name 必需.规定 cookie 的名称. value 必需.规定 cookie 的值. ex ...
- SQL,Linq,Lambda之间的转换练习
1.查询Student表中的所有记录的Sname.Ssex和Class列. SQL:select sname,ssex,class from Students linq:from s in Stude ...
- iOS开发UI篇—核心动画(UIView封装动画)
iOS开发UI篇—核心动画(UIView封装动画) 一.UIView动画(首尾) 1.简单说明 UIKit直接将动画集成到UIView类中,当内部的一些属性发生改变时,UIView将为这些改变提供动画 ...
- 多线程下NSOperation、NSBlockOperation、NSInvocationOperation、NSOperationQueue的使用
本篇文章主要介绍下多线程下NSOperation.NSBlockOperation.NSInvocationOperation.NSOperationQueue的使用,列举几个简单的例子. 默认情况下 ...
- MapKit/CoreLocation框架 总结
MapKit/CoreLocation框架 /*英译 core:核心 track:踪迹 current:当前 statellite:卫星 hybird:混合 region:范围 annotation ...
- python笔记1：python函数的使用
一.函数:len() 1:作用:返回字符串.列表.字典.元组等长度 2:语法:len(str) 3:参数: str:要计算的字符串.列表.字典.元组等 4:返回值:字符串.列表.字典.元组等元素的长度 ...