【前端开发系列】—— 别说你不会Ajax
之前一直都是用封装好的Ajax,所以一直很好奇它是如何使用和实现的。这里正好就进行一下学习，下面是Ajax的一个时间图。
设置触发条件
这里模拟一个使用场景，就是在用户登陆时，异步的对用户名以及密码进行验证。所以使用onBlur()触发，onBlur函数在输入框焦点遗失时，就会触发。
<form name="loginForm">
<table>
<tr>
<td>用戶名:<input type="text" name="username" onBlur="checkUsername()"></td>
</tr>
<tr>
<td><div id="usernameDiv"></div></td>
</tr>
<tr>
<td>密 码:<input type="password" name="password" onBlur="checkPassword()"></td>
</tr>
<tr>
<td><div id="passwordDiv"></div></td>
</tr>
</table>
</form>
创建Ajax的对象
由于Ajax并不是一个统一的标准，因此各个浏览器有自己的创建方式，因此在创建时，需要进行浏览器的验证，使用如下的验证方法即可。
if(window.XMLHttpRequest){
req = new XMLHttpRequest();
}else if(window.ActiveXObject){
req = new ActiveXObject("Microsoft.XMLHTTP");
}
open() onreadystatechante() send()
3.1 open(),这个函数有三个参数，第一个是http的发送方式，常见的有GET和POST，我们这里使用GET，来传送参数；第二个参数是一个url，这个url第一个作用是与后台的servlet进行匹配，第二个作用是传送前台的数据到后台；第三个参数是个bool值，如果为true标识用异步的方式发送请求。
req.open("GET",url+"?username="+document.loginForm.username.value,true);
3.2 onreadystatechange 指定回调函数，当数据返回时，使用该函数进行处理。我们的处理函数是自己定义的usernameCallback
req.onreadystatechange = usernameCallback;
3.3 send函数用来发送创建好的请求。由于前面的参数已经添加到url后面，因此这里直接使用null作为参数就行了。
req.send(null);
自己定义的usernameCallback函数，用于把返回的字符串使用DOM方式写入指定的div中。
在函数返回时，可以使用之前创建好的req对象，调用它的readystate 以及 status属性，4表示XMLHttpRequest对象响应正常结束。200表示HTTP请求获得正确的响应。
只有这两个条件都满足，才表明异步请求请求成功。
function usernameCallback(){
if(req.readyState == 4){
if(req.status == 200){
var str = req.responseText;
if(str.split("!")[0] == "Success"){
document.getElementById("usernameDiv").className = "black";
}else{
document.getElementById("usernameDiv").className = "red";
}
document.getElementById("usernameDiv").innerHTML = str;
}else{
alert("username failed!");
}
}else{
}
}
通过url与后台的servlet关联
<?xml version="1.0" encoding="GBK"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<servlet>
<servlet-name>checkUsername</servlet-name>
<servlet-class>usernameServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>checkUsername</servlet-name>
<url-pattern>/checkUsername</url-pattern>
</servlet-mapping> <servlet>
<servlet-name>checkPassword</servlet-name>
<servlet-class>passwordServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>checkPassword</servlet-name>
<url-pattern>/checkPassword</url-pattern>
</servlet-mapping>
</web-app>
简单反馈
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/xml;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
String username = request.getParameter("username");
// System.out.println("username"+username);
String str = "";
if("xingoo".equals(username)){
str += "Success!" + username;
}else{
str += "failed!" + username;
}
response.getWriter().write(str);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
另一个验证的servlet采用同样的方式，这里就不再赘述了。下面会贴出所有的代码。
源码暴露
Login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.red {
color:red;
font-size: 20;
}
.black {
color: black;
font-size: 20;
}
</style>
<script language="javascript">
function checkUsername(){
var url = "checkUsername";
if(window.XMLHttpRequest){
req = new XMLHttpRequest();
}else if(window.ActiveXObject){
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if(req){
req.open("GET",url+"?username="+document.loginForm.username.value,true);
req.onreadystatechange = usernameCallback;
req.send(null);
}
}
function checkPassword(){
var url = "checkPassword";
if(window.XMLHttpRequest){
req = new XMLHttpRequest();
}else if(window.ActiveXObject){
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if(req){
req.open("GET",url+"?password="+document.loginForm.password.value,true);
req.onreadystatechange = passwordCallback;
req.send(null);
}
}
function usernameCallback(){
if(req.readyState == 4){
if(req.status == 200){
var str = req.responseText;
if(str.split("!")[0] == "Success"){
document.getElementById("usernameDiv").className = "black";
}else{
document.getElementById("usernameDiv").className = "red";
}
document.getElementById("usernameDiv").innerHTML = str;
}else{
alert("username failed!");
}
}else{ }
}
function passwordCallback(){
if(req.readyState == 4){
if(req.status == 200){
var str = req.responseText;
if(str.split("!")[0] == "Success"){
document.getElementById("passwordDiv").className = "black";
}else{
document.getElementById("passwordDiv").className = "red";
}
document.getElementById("passwordDiv").innerHTML = str;
}else{
alert("password failed!");
}
}else{ }
}
</script>
</head>
<body>
<form name="loginForm">
<table>
<tr>
<td>用戶名:<input type="text" name="username" onBlur="checkUsername()"></td>
</tr>
<tr>
<td><div id="usernameDiv"></div></td>
</tr>
<tr>
<td>密 码:<input type="password" name="password" onBlur="checkPassword()"></td>
</tr>
<tr>
<td><div id="passwordDiv"></div></td>
</tr>
</table>
</form>
</body>
</html>
web.xml
<?xml version="1.0" encoding="GBK"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<servlet>
<servlet-name>checkUsername</servlet-name>
<servlet-class>usernameServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>checkUsername</servlet-name>
<url-pattern>/checkUsername</url-pattern>
</servlet-mapping> <servlet>
<servlet-name>checkPassword</servlet-name>
<servlet-class>passwordServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>checkPassword</servlet-name>
<url-pattern>/checkPassword</url-pattern>
</servlet-mapping>
</web-app>
usernameServlet.java
import java.io.IOException; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class usernameServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/xml;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache"); String username = request.getParameter("username");
// System.out.println("username"+username);
String str = ""; if("xingoo".equals(username)){
str += "Success!" + username;
}else{
str += "failed!" + username;
} response.getWriter().write(str);
} protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); }
}
passwordServlet.java
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class passwordServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/xml;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache"); String password = request.getParameter("password");
// System.out.println("password"+password);
String str = ""; if("123".equals(password)){
str += "Success!" + password;
}else{
str += "failed!" + password;
} response.getWriter().write(str);
} protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); }
}
运行效果
这里直接判断返回状态，进行样式的改变
成功时的效果！
失败时的效果！
【前端开发系列】—— 别说你不会Ajax的更多相关文章
- 【前端开发系列】—— CSS3属性选择器总结
想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...
- vue 开发系列（二） vue ajax 拦截
概要说明 在开发的过程中,我们需要通过AJAX请求,访问后台获取数据,这个获取数据的时候,当然需要后台需要时登录状态才能访问数据,当没有登录的情况,这个时候我们需要跳转到登录界面进行登录. 如果每次请 ...
- Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十二】
2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...
- Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列十七】
<Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列二十】
<Web 前端开发精华文章推荐>2013年第八期(总第二十期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- 循序渐进学.Net Core Web Api开发系列【4】：前端访问WebApi
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 前一篇文章 ...
- 使用react全家桶制作博客后台管理系统 网站PWA升级 移动端常见问题处理 循序渐进学.Net Core Web Api开发系列【4】：前端访问WebApi [Abp 源码分析]四、模块配置 [Abp 源码分析]三、依赖注入
使用react全家桶制作博客后台管理系统 前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基 ...
- Web 前端开发人员和设计师必读文章推荐【系列二十八】
<Web 前端开发精华文章推荐>2014年第7期(总第28期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
- Web 前端开发人员和设计师必读精华文章【系列二十六】
<Web 前端开发精华文章推荐>2014年第5期(总第26期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
随机推荐
- 主机与虚拟机通信：以主机VS2010连接虚拟机MySql为例
1.首先解决环境配置.网络互相通信的问题: 主机:Win7 32bit.虚拟机 Winxp 32bit(不要鄙视我不大会用unix之类的东西).使用virtualBox安装. 网络:虚拟机配置成Bri ...
- linq查询结果datetime类型转string类型
var list = new SupplierLogic().GetSupplier(pageSize, pageIndex).Select(q => new { SupplierID = q. ...
- http://www.cnblogs.com/0201zcr/p/4987561.html
http://www.cnblogs.com/0201zcr/p/4987561.html
- MVC项目中验证码的使用
这是我记录验证的第二篇文章,之前还有一篇是ashx一般处理程序的. 验证码类: 需要添加两个引用:System.Web.System.Drawing //需要添加两个引用:System.Web.Sys ...
- Leetcode: Maximum XOR of Two Numbers in an Array
Given a non-empty array of numbers, a0, a1, a2, - , an-1, where 0 ≤ ai < 231. Find the maximum re ...
- GridView布局，自定义适配器，水平滚动
添加GridItem布局XML文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...
- [原创]java WEB学习笔记100：Spring学习---Spring Bean配置：SpEL详细介绍及代码演示
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- VS2010--2013使用技巧及使用过程中遇到的问题
Microsoft Visual Studio 2010 --2013默认情况下是不显示代码的行号的,但是在编译出错时,可点击下面输出窗口中的错误提示进行定位.但是这样操作起来你有没有感觉到不方便呢. ...
- 十八、Java基础--------IO流体系以及字符流
在上一章节中详细介绍集合框架的相关知识,在接下来的几篇文章中将讲述Java中另一个及其重要的知识——IO流,本文主要是讲述IO流的一些基本概念以及字符流的相关应用. IO流 介绍IO流之前先介绍一下什 ...
- Android Studio 常见问题之Rendering Problems
1.有时会出现下面的问题: 可以按如下解决 点击任何一项即可