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字符串转化为对象

调用ObjectMapperpublic <T> T readValue(String content, Class<T> valueType)方法。

使用FastJson工具类

主要使用toJSONStringparseObject两个静态方法进行序列化和反序列化的操作,这里不再赘述。


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的更多相关文章

  1. web前端基础知识及快速入门指南

    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

  2. 框架基础:ajax设计方案(三)---集成ajax上传技术

    之前发布了ajax的通用解决方案,核心的ajax发布请求,以及集成了轮询.这次去外国网站逛逛,然后发现了ajax level2的上传文件,所以就有了把ajax的上传文件集成进去的想法,ajax方案的l ...

  3. 前端基础面试题(JS部分)

    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...

  4. web前端基础学习路线

    1.HTML和CSS的基础知识,完成网页的初步设计 2.JavaScript基础知识和DOM.BOM的学习 3.前端基础框架:CSS框架Bootstrap.JavaScript框架jquery的熟悉使 ...

  5. 前端通信:ajax设计方案(三)--- 集成ajax上传技术

    在此之前让我感慨一下现在的前端开发的氛围.我遇到好多人,给我的观念都是,这个东西这个框架有了,那个东西那个框架做了,前端嘛,学几个框架,这个拼凑一下那个拼凑一下就好了.其实我想问,东西都框架做了,那你 ...

  6. 前端基础之:JQuery(可编辑版)

     前端基础之jquery   一 jQuery是什么? [1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. [2]   ...

  7. 进击的Python【第十六章】:Web前端基础之jQuery

    进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...

  8. BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js

    BAT 前端开发面经 —— 吐血总结   目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...

  9. 前端第四篇---前端基础之jQuery

    前端第四篇---前端基础之jQuery 一.jQuery介绍 二.jQuery对象 三.jQuery基础语法 四.事件 五.动画效果 六.补充each 一.jQuery简介 1.jQuery介绍 jQ ...

随机推荐

  1. 为何以及如何学Linux系统?

    在当今的社会中,linux用处实在是太过广泛了.现在用在服务器和嵌入式上的Linux发行版本数不胜数,桌面上linux只占1%的比例,但这不代表linux比windows和mac 做得差,实际上桌面系 ...

  2. [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 ...

  3. boost::timer demo

    #include <iostream> #include <boost/timer.hpp> //timer的头文件 using namespace boost; //打开bo ...

  4. MyEclipse 8.5整合Git,并在Github上发布项目

    我们在闲暇时间想加入些团队做点属于自己有意义的东西,那Github就是为你准备的.但是用惯SVN的我们就得学习学习了. 工具/原料 myeclipse8.5 github 方法/步骤 1 下载Ecli ...

  5. Day 1:思考

    干游戏这行从实习到工作算起来也有快7年的时间了, 7年的时间~上学了.毕业了.工作了.结婚了.孩子要出生了~ 也算是经历了不少的事情了,自己觉得生活过的是越来越好了, 自己做过的游戏也不算少了,不过真 ...

  6. 二十 Filter&自动登录功能

    Filter过滤器 过滤器,其实就是对客户端发出来的请求进行过滤,浏览器发出,然后服务器用Servelt处理.在中间就可以过滤,起到的是拦截的作用. 不仅仅作用于客户端请求,而且过滤服务器响应 作用: ...

  7. JavaScript 文件延迟和异步加载

    JavaScript 文件延迟和异步加载 -般情况下,在文档的 <head> 标签中包含 JavaScript 脚本,或者导入的 JavaScript 文件. 这意味着必须等到全部 Jav ...

  8. ubuntu安装discourse论坛----结合在apache服务上建立虚拟主机

    指导操作:https://github.com/discourse/discourse/blob/master/docs/INSTALL-cloud.md 一.先安装 Docker / Git: wg ...

  9. CCF 201703-4 地铁修建(最小生成树)

    题意:A市有n个交通枢纽,其中1号和n号非常重要,为了加强运输能力,A市决定在1号到n号枢纽间修建一条地铁.地铁由很多段隧道组成,每段隧道连接两个交通枢纽.经过勘探,有m段隧道作为候选,两个交通枢纽之 ...

  10. ZCGL项目解析——概述

    模块清单 微服务模块:routeservice.eurekaservice.configservice 数据服务模块:fdfsservice.hbaseservice 工具服务模块:common 系统 ...