前端基础之AJAX
AJAX
什么是AJAX,简单来说就是利用JavaScript天生异步的特性,使用异步请求后台数据,从而达到不刷新网页也能局部更新页面的效果。
原生AJAX
JavaScript中的AJAX依赖于XMLHttpRequest
对象。
- Js也使用new创建对象:
new XMLHttpRequest()
onreadystatechange
监听事件,监听请求和响应变化,也可以理解为回调函数callback(onreadystatechange 事件被触发 5 次(0 - 4),对应着 readyState 的每个变化。)- readyState:请求状态值,存有 XMLHttpRequest 的状态。从 0 到 4 发生变化:
- 0 : 请求未初始化
- 1 : 服务器连接已建立
- 2 : 请求已接收
- 3 : 请求处理中
- 4 : 请求已完成,且响应已就绪
- status:响应状态值:200:成功响应,404
open(method,url,async)
:规定请求方式、地址、同/异步:- method:请求的类型;GET 或 POST
- url:文件在服务器上的位置
- async:true(异步)或 false(同步)(同步时不需要设置回调函数)
send(String)
发送请求。当get时,open中的url拼好参数,send中不传参数;当post时,open中不带参数,send中传入参数(此时需要使用serHeader方法设置Content-Type属性)responseText
以字符串方式获得响应结果。(responseXML)以XML方式获得响应
上个原生AJAX检测用户名的Demo:
原生AJAX
前端HTML:
<h2>用户注册</h2>
用户名:
<input type="text" name="userName" id="userName"> <span id="info"></span>
Js:
//绑定失去焦点事件
document.getElementById("userName").onblur = function (ev) {
var userName = this.value;
var xhr = new XMLHttpRequest();
//绑定回调函数
xhr.onreadystatechange = function (ev1) {
if (xhr.readyState === 4 && xhr.status === 200){
document.getElementById('info').innerText = xhr.responseText;
}
};
xhr.open("get", '/AjaxServlet?userName=' + userName, true);
xhr.send();
};
servlet后台:
String userName = request.getParameter("userName");
response.setContentType("text/plain;charset=utf-8");
if ("admin".equals(userName)){//这里为了简单不从数据库获取了,直接使用固定的"admin"检验
response.getWriter().println("用户名已存在");
}else {
response.getWriter().println("用户名可用");
}
JQuery封装的AJAX
JQuery对原生AJAX进行了封装,来更方便的使用。
请求方式 | 语法 | 说明 |
---|---|---|
GET请求 | $.get(url,[data],[callback],[type]) |
带[ ]为可选参数 |
POST请求 | $.post(url,[data],[callback],[type]) |
带[ ]为可选参数 |
AJAX请求 | $.ajax({settings}) |
|
GET签名 | $.get({settings}) |
jQuery3.0新增get方法 |
POST签名 | $.post({settings}) |
jQuery3.0新增post方法 |
Get/Post
$.get(url,[data],[callback],[type])
$.post(url,[data],[callback],[type])
参数 | 说明 | 是否必需 |
---|---|---|
url | 请求地址 | 必需 |
data | 发送给服务器端的请求参数,格式: 方式一:key=value&key=value 方式二:{key:value,key:value...} |
可选 |
callback | 回调函数:当请求成功后触发的函数 | 可选 |
type | 返回参数类型:取值可以是xml, html, script, json, text, _defaul等,默认text | 可选 |
使用JQuery的get/post方法进行AJAX访问:
$('#userName').blur(function () {
//看var不舒服换成了let
let userName = $(this).val();
$.get('/AjaxServlet', {userName:userName},function (result) {
$('#info').text(result)
});
});
//get/post用法一样
以下情况使用post,其他情况一般使用get
- 无法使用缓存文件(更新服务器上的文件或数据库)--提交表单数据
- 向服务器发送大量数据(POST 没有数据量限制) ---文件上传
使用JQuery的ajax方法进行AJAX访问:
$.ajax({settings})
setting参数:
属性名 | 描述 |
---|---|
url | 请求的url地址 |
async | true为异步,false为同步(默认为true) |
data | 发送到服务器的数据,可以使键值对形式,也可以是js对象形式 |
type | 请求方式(默认为get) |
dataType | 预期返回数据类型(xml, html, script, json, text, _default) |
success | 请求成功的回调函数 |
error | 请求失败的回调函数 |
ajax方法进行数据请求:
AJAX方法
$("#userName").blur(function () {
let userName = $(this).val();
$.ajax({
url:"/ajaxDemoServlet",
data:{"userName":userName,"age":4},
async:true,
type:"GET",
dataType:"text",
success:function (result) {
$("#info").text(result);
},
error:function (errorRes) {
alert("出现异常了")
}
})
});
JQuery 3.0 新增方法:$.get({settings})
、$.post({settings})
用法和ajax方法类似:
新增Get方法
$("#userName").blur(function () {
let userName = $(this).val();
$.get({
url:"/ajaxDemoServlet",
data:{"userName":userName,"age":4},
dataType:"text",
success:function (result) {
//处理正常的响应
$("#info").text(result);
},
error:function (errorRes) {
alert("出现异常了")
}
})
});
JSON
Json的三种表达方式:
类型 | 方式 | 描述 |
---|---|---|
对象类型: | {K:V,K:V} |
代表一个对象,有多个属性名和值 |
数组/集合类型: | [V1,V2,V3] |
代表一个数组对象,里面的元素可以是任意类型 |
混合类型: | [{K:V, K:V}, {K:V, K:V}] 或{K:[V, V, V]} |
代表数组中每个元素都是对象,一个对象某个属性值是一个数组 |
Java中Json与对象互转
使用Jackson
添加依赖(可以手动添加三个包jackson-databind.jar
jackson-core.jar
jackson-annotation.jar
,或者直接使用maven):
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.9</version>
</dependency>
对象转化Json字符串:
依靠ObjectMapper
对象,调用writeValueAsString(Object o)
方法即可把对象、数组、集合转化为Json。
Json字符串转化为对象
调用ObjectMapper
的public <T> T readValue(String content, Class<T> valueType)
方法。
使用FastJson工具类
主要使用toJSONString
和parseObject
两个静态方法进行序列化和反序列化的操作,这里不再赘述。
AJAX 进行用户名验证的Demo
前端页面:
<input type="text" id="inputUserName" name="username" class="form-control" placeholder="用户名" required autofocus>
<span id="info"></span>
完整代码:
HTML完整代码
使用了Bootstrap框架,请自行修改JS文件位置。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come test in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>AJAX Demo</title>
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/css/login.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form class="form-signin" action="/login" method="POST">
<div class="text-center">
<h2 class="form-signin-heading">登录页面</h2>
</div>
<label for="inputUserName" class="sr-only">用户名</label>
<input type="text" id="inputUserName" name="username" class="form-control" placeholder="用户名" required autofocus>
<span id="info"></span>
<label for="inputPassword" class="sr-only">密码</label>
<input type="password" id="inputPassword" name="password" class="form-control" placeholder="密码" required>
<div>
<input type="text" name="checkCode" class="form-control" style="width: 184px;float: left;"
placeholder="请输入验证码">
<img id="captcha" style="width: 84px;margin-left: 29px;" src="/CodeServlet" alt="验证码"
onclick="changeImg(this)">
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> 记住账号密码
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
</form>
</div> <!-- /container -->
</body>
<script src="/js/jquery.js"></script>
<script src="/js/myjs/login.js"></script>
</html>
JavaScript绑定事件:
//使用JQuery绑定
$('#inputUserName').blur(function () {
//获取输入的userName
let userName = $(this).val();
if (userName === "") {
$('#info').html('<font color="red">请输入用户名</font>');
} else {
//AJAX异步请求数据
$.get('/CheckNameServlet', {userName: userName}, function (result) {
//这里需要把字符串转化为boolean
if (!JSON.parse(result.flag)) {
$('#info').html('<font color="red">用户名已存在</font>');
} else {
$('#info').html('<font color="green">✔</font>');
}
console.log(result);
},'json')
}
});
然后是后端控制层:
@WebServlet("/CheckNameServlet")
public class CheckNameServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/plain;charset=utf-8");
String userName = request.getParameter("userName");
UserService us = new UserService();
boolean flag = us.queryUserByName(userName);
Map<String,String> map = new HashMap<>();
map.put("flag", String.valueOf(flag));//返回布尔值好像还不如返回 0 或 1
//这里使用了Jackson转化为Json
response.getWriter().print(new ObjectMapper().writeValueAsString(map));
//System.out.println(map);
}
}
后台业务层:
public class UserService {
public boolean queryUserByName(String name){
UserDao ud = new UserDao();
List<User> list = ud.queryUserByName(name);
if (list!=null && list.size()>0){
return false;
}else {
return true;
}
}
}
后台持久层:
public class UserDao {
public List<User> queryUserByName(String name) {
JdbcTemplate jt = DataSourceUtil.getJdbcTemplate();
String sql = "select * from t_user where username = ?";//这个sql不太好,查询了太多无用数据
return jt.query(sql, new BeanPropertyRowMapper<>(User.class), name);
}
}
最终效果:
初始页面:
不输入的情况下用户名框失去焦点时:
输入已存在用户名时:
用户名可用时:
至此,AJAX简单介绍完毕
前端基础之AJAX的更多相关文章
- web前端基础知识及快速入门指南
web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
- 框架基础:ajax设计方案(三)---集成ajax上传技术
之前发布了ajax的通用解决方案,核心的ajax发布请求,以及集成了轮询.这次去外国网站逛逛,然后发现了ajax level2的上传文件,所以就有了把ajax的上传文件集成进去的想法,ajax方案的l ...
- 前端基础面试题(JS部分)
1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...
- web前端基础学习路线
1.HTML和CSS的基础知识,完成网页的初步设计 2.JavaScript基础知识和DOM.BOM的学习 3.前端基础框架:CSS框架Bootstrap.JavaScript框架jquery的熟悉使 ...
- 前端通信:ajax设计方案(三)--- 集成ajax上传技术
在此之前让我感慨一下现在的前端开发的氛围.我遇到好多人,给我的观念都是,这个东西这个框架有了,那个东西那个框架做了,前端嘛,学几个框架,这个拼凑一下那个拼凑一下就好了.其实我想问,东西都框架做了,那你 ...
- 前端基础之:JQuery(可编辑版)
前端基础之jquery 一 jQuery是什么? [1] jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. [2] ...
- 进击的Python【第十六章】:Web前端基础之jQuery
进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...
- BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js
BAT 前端开发面经 —— 吐血总结 目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...
- 前端第四篇---前端基础之jQuery
前端第四篇---前端基础之jQuery 一.jQuery介绍 二.jQuery对象 三.jQuery基础语法 四.事件 五.动画效果 六.补充each 一.jQuery简介 1.jQuery介绍 jQ ...
随机推荐
- 为何以及如何学Linux系统?
在当今的社会中,linux用处实在是太过广泛了.现在用在服务器和嵌入式上的Linux发行版本数不胜数,桌面上linux只占1%的比例,但这不代表linux比windows和mac 做得差,实际上桌面系 ...
- [ERROR] error: error while loading <root>, error in opening zip file error: scala.reflect.internal.MissingRequirementError: object scala.runtime in compiler mirror not found.
在家编译一个Apache的开源项目,在编译时遇到错误如下: error: error while loading <root>, error in opening zip file [ER ...
- boost::timer demo
#include <iostream> #include <boost/timer.hpp> //timer的头文件 using namespace boost; //打开bo ...
- MyEclipse 8.5整合Git,并在Github上发布项目
我们在闲暇时间想加入些团队做点属于自己有意义的东西,那Github就是为你准备的.但是用惯SVN的我们就得学习学习了. 工具/原料 myeclipse8.5 github 方法/步骤 1 下载Ecli ...
- Day 1:思考
干游戏这行从实习到工作算起来也有快7年的时间了, 7年的时间~上学了.毕业了.工作了.结婚了.孩子要出生了~ 也算是经历了不少的事情了,自己觉得生活过的是越来越好了, 自己做过的游戏也不算少了,不过真 ...
- 二十 Filter&自动登录功能
Filter过滤器 过滤器,其实就是对客户端发出来的请求进行过滤,浏览器发出,然后服务器用Servelt处理.在中间就可以过滤,起到的是拦截的作用. 不仅仅作用于客户端请求,而且过滤服务器响应 作用: ...
- JavaScript 文件延迟和异步加载
JavaScript 文件延迟和异步加载 -般情况下,在文档的 <head> 标签中包含 JavaScript 脚本,或者导入的 JavaScript 文件. 这意味着必须等到全部 Jav ...
- ubuntu安装discourse论坛----结合在apache服务上建立虚拟主机
指导操作:https://github.com/discourse/discourse/blob/master/docs/INSTALL-cloud.md 一.先安装 Docker / Git: wg ...
- CCF 201703-4 地铁修建(最小生成树)
题意:A市有n个交通枢纽,其中1号和n号非常重要,为了加强运输能力,A市决定在1号到n号枢纽间修建一条地铁.地铁由很多段隧道组成,每段隧道连接两个交通枢纽.经过勘探,有m段隧道作为候选,两个交通枢纽之 ...
- ZCGL项目解析——概述
模块清单 微服务模块:routeservice.eurekaservice.configservice 数据服务模块:fdfsservice.hbaseservice 工具服务模块:common 系统 ...