原始ajax发起请求并反馈
在用户登陆的时候，离开用户、密码输入框即进行验证：ajax发起请求进行验证的：
login.jsp代码:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户登陆</title>
</head>
<body>
<form action="#" method="post">
<input type="hidden" name="action" value="login"/>
用户名: <input type="text" maxlength="10" name="username" id="userid" onblur="validata('user')">
<span id="uservalidate" style="color:red"></span>
<br><br>
密码： <input type="password" maxlength="10" name="password" id="passwordid" onblur="validata('password')"/>
<span id="passvalidate" style="color:red"></span>
<br><br>
<input type="submit" value="登陆"/> <input type="reset" value="重置"/>
</form>
</body>
<script type="text/javascript">
var request;
var actionType; //onblur的时候，发起ajax请求验证用户/密码是否正确
function validata(type){
actionType = type;
var url;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else if(window.ActiveXObject){
request = new ActiveXObject("Microsoft.XMLHTTP");
}
if(type=='user'){
actionType = 'usercheck';
var username = document.getElementById("userid").value;
url = "validate.jsp?action=usercheck&username=" +username;
request.open("GET", url, true);
}else if(type=='password'){
actionType = 'passwordcheck';
var password = document.getElementById("passwordid").value;
url = "validate.jsp?action=passwordcheck&password=" +password;
request.open("POST", url, true);
}
request.onreadystatechange = callback; //当状态变化，调用callback方法 callback这里不能写参数，写了只调一次，为什么?
request.send(null); //sends HTTP request;body can be null;
} //ajax返回的处理函数
function callback(){
if(request.readyState == 4){
if(request.status == 200){
var msg = request.responseText;
console.log(msg);
if(actionType=='usercheck'){
if(msg == "wrong"){
document.getElementById("uservalidate").innerText = "用户名错误！";
}else if(msg == 'correct'){
document.getElementById("uservalidate").innerText = "用户名正确！";
}
}else if(actionType=='passwordcheck'){
if(msg == "wrong"){
document.getElementById("passvalidate").innerText = "密码错误！";
}else if(msg == 'correct'){
document.getElementById("passvalidate").innerText = "密码正确！";
}
}
}
}
}
</script>
</html>
后台使用validate.jsp进行简单验证模拟：
<%
/**
setContentType常用参数：
text/html HTML
text/plain TXT
text/xml XML
text/javascript json数据
response.setContentType（“text/html;charset=UTF-8”）；
*/
response.setContentType("text/plain;charset=utf-8");
response.setHeader("Cache-Control", "no-store"); //HTTP1.1
response.setHeader("Pragma", "no-cache"); //HTTP1.0
response.setDateHeader("Expires", 0); //prevents catching at proxy server String action = request.getParameter("action");
if(action!=null && action.equals("usercheck")){
String username = request.getParameter("username");
if(username!=null && !username.equals("admin")){
response.getWriter().write("wrong");
}else{
response.getWriter().write("correct");
}
}else if(action!=null && action.equals("passwordcheck")){
String password = request.getParameter("password");
if(password!=null && !password.equals("admin")){
response.getWriter().write("wrong");
}else{
response.getWriter().write("correct");
}
}
%>
页面效果：
补充知识：
XMLHttpRequest的方法：
XMLHttpRequest的属性：
有更好的例子，或者用法继续补充》》》》》》》》》》》》》》》》》
注意：上面的validate.jsp我并没有写<%@ page contentType="text/html;charset=utf8" ... %>等这个头部信息，写了之后，发现response.getWriter().write("wrong")写到客户端，console一看总是"wrong"后面多个换行符，就始终不对；研究下为什么。
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
pageEncoding是jsp文件本身的编码
contentType的charset是指服务器发送给客户端时的内容编码
不同于常规 servlet （默认的 MIME 类型为 text/plain），JSP 页面的默认 MIME 类型是 text/html （默认字符集为 ISO-8859-1）。因此，如果 JSP 页曲以 Latin 字符集输出 HTML则根本无需使用 contentType
原始ajax发起请求并反馈的更多相关文章
- Ajax向服务器发起请求
Ajax向服务器发起请求的三个步骤: 1:创建Ajax 2:打开Ajax,打开Ajax请求 3:向服务器发起请求:需要知道地址和是get请求还是post方法 向服务器发起请求的两个方法:open 和 ...
- javaweb局部刷新-ajax异步请求springMVC显示返回的jsp内容,代替iframe
在jsp上要引入jquery <script src="<%=request.getContextPath()%>/js/jquery_ui/jquery.js" ...
- js ajax同步请求造成浏览器假死的问题
一.问题的起因 今天做一个需求遇到了这么个情况,就是用户个人中心有个功能,点击按钮,可以刷新用户当前的积分,这个肯定需要使用到ajax的同步请求了,当时喀喀喀三下五除二写玩了,大概代码如下: /** ...
- jQuery Ajax(异步请求)
jQuery异步请求 原始的异步请求是需要创建的 XMLHttpRequest 对象.(IE5,6不支持)目前很多浏览器都支持XMLHttpRequest对象 jQuery ajax常用的回调函数:b ...
- AJAX POST请求中参数以form data和request payload形式在servlet中的获取方式
转载:http://blog.csdn.net/mhmyqn/article/details/25561535 HTTP请求中,如果是get请求,那么表单参数以name=value&name1 ...
- AJAX POST请求中參数以form data和request payload形式在servlet中的获取方式
HTTP请求中,假设是get请求,那么表单參数以name=value&name1=value1的形式附到url的后面,假设是post请求,那么表单參数是在请求体中,也是以name=value& ...
- ajax客户端请求与服务端响应浅谈
AJAX,即Asynchronous Javascript And XML,AJAX本质是在HTTP协议的基础上以异步的方式与服务器进行通信. 所谓的异步,是指某段程序执行不会阻塞其他程序执行,其表现 ...
- 关于ajax post请求跨域问题的解决心得
最近啊,公司有个项目,需要做一个手机端APP的后台管理系统.所以用到了度文本编辑框,经过了好好一番周折,终于弄好了,带到上线的时候发现啊,只能使用ip去访问网页的时候上能穿图片他不会报跨域的问题,而使 ...
- 关于AJAX异步请求的那些事儿(2)
1.使用AJAX发起GET请求消息 xhr.open("GET","XX.PHP?K1=V1$K2=V2",true); xhr.send(null); 2.使 ...
随机推荐
- spring注解方式在一个普通的java类里面注入dao
spring注解方式在一个普通的java类里面注入dao @Repositorypublic class BaseDaoImpl implements BaseDao {这是我的dao如果在servi ...
- @include与jsp:include的区别
1.可以使用一个JSP指令或者一个标准行为,在JSP页面中引入其他的页面片段. 2. include指令:在翻译阶段(将JSP页面转换成servlet的阶段),JSP的include指令会读入指定的页 ...
- 在Windows 10上安装Oracle 11g数据库出现的问题及解决
在Windows 10上安装Oracle 11g数据库,并且很多次出现过:当安装的进度条进行到快要结束的时候弹出一个提示框.如下: [Java(TM)2 Platform Standard Editi ...
- noip2014普及组——珠心算测验
题目描述 珠心算是一种通过在脑中模拟算盘变化来完成快速运算的一种计算技术.珠心算训练,既能够开发智力,又能够为日常生活带来很多便利,因而在很多学校得到普及. 某学校的珠心算老师采用一种快速考察珠 ...
- Collection+JSON 文档
Collection+JSON 文档 对于这个设计,我们不再以可能的状态和转移为起点,相反,我们将从一个集合状态响应中可能元素的顶层布局开始.从这一点入手,其他细节可以随着设计向超媒体类型最底层属性的 ...
- curl命令使用大全
curl命令使用大全 可以看作命令行浏览器 1.开启gzip请求curl -I http://www.sina.com.cn/ -H Accept-Encoding:gzip,defalte 2.监控 ...
- matlab批量灰色预测
没事玩了一下matlab 发现现在网上的代码都是一组数据预测 所以我就写个批量数据的预测 顺便学习下matlab ----------------------------------我是快乐的分割线- ...
- jmeter使用IP欺骗压力测试
最近在使用jmeter进行压力测试时需要使用类似于loadrunner的IP欺骗功能,经问津度娘无果后决定再次耐心研究jmeter官方文 档,终于发现在jmeter2.5以上的版本有此功能的实现,由于 ...
- mysql的text的类型注意
不要以为text就只有一种类型! Text也分为四种类型:TINYTEXT.TEXT.MEDIUMTEXT和LONGTEXT 其中 TINYTEXT 256 bytes TEXT 65,535 byt ...
- DBA常用SQL之会话与等待事件
SELECT * FROM V$SESSION WHERE USERNAME IS NOT NULL AND STATUS = 'ACTIVE' ORDER BY LOGON_TIME, SID; 1 ...