Java41ajax&json：校验用户名，自动提示
Posted 码农编程录
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Java41ajax&json：校验用户名，自动提示相关的知识，希望对你有一定的参考价值。
1.ajax：xhr.，$.
同步加载：1.当前页面直接跳转到另一个页面（覆盖），url发生变化。2.直接新开一个页面，url发生变化。
用户注册：所有信息填完了，点提交等待服务器响应是同步请求（有顺序，等服务器响应结果，不是同步比异步差）。之前写的都是同步请求，一个一个发，B覆盖A页面。
如上四个箭头就是四次变化。要实现异步请求，必须借助ajax，不然都是同步请求。ajax（异步请求提交）（Asychronous异步 javascript And XML）应用：1.搜索内容自动补全，2.注册页面自动检测用户名是否存在。
//01_js中的ajax请求.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function method01() {
//1. 创建一个xhr对象(内核/引擎 支持)
var xhr = new XMLHttpRequest();
//2. 设置一个监听事件 //5个状态4次改变, 当请求状态改变（点击前端发请求按钮）的时候被触发
xhr.onreadystatechange = function (ev) {
// console.log(xhr.readyState) //1 2 3 4
if(xhr.readyState == 4){ // 前端可以拿到服务器响应后的数据
if(xhr.status == 200){
alert(xhr.responseText) //响应成功，并拿到后台发来的“hello boy”
}else{
alert("响应失败了~~")
}
}
}
//3. 设置请求数据
/*
* method：请求的类型；GET 或 POST //GET请求发送参数拼接在url中如下
url：文件在服务器上的位置
async：true（异步）或 false（同步），一般默认true
*/
xhr.open("get","/AjaxServlet?name=hehe",true)
//4. 发送请求
xhr.send() //将请求发送到服务器。send里参数string：仅用于POST请求，用来放请求体 ，Get参数放在上行url中。
}
</script>
<!--111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<script>
function method02() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (ev) {
if(xhr.readyState == 4 && xhr.status == 200){
alert(xhr.responseText)
}
}
xhr.open("post","/AjaxServlet",true)
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
//一般编码解码由浏览器完成，但ajax的post请求url编码要上行手动设置。
xhr.send("name=haha")
}
</script>
</head>
<!--11111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<input type="button" value="js中的ajax(get)请求" onclick="method01()"> <br> <br>
<input type="button" value="js中的ajax(post)请求" onclick="method02()"> <br> <br>
</body>
</html>
post请求参数(“name=haha”)需要url编码才能传到服务器。
//02_jquery中的ajax请求.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
/*
GET请求
1. $.get(url, [data], [callback], [type]) // []表示可有可无
1. url : 请求地址
2. data : 请求参数 (text,json)
3. callback : 响应成功的回调
4. type : 响应数据的类型(text 默认值,json)
*/
function method01() { //name= 可以用?拼在/AjaxServlet后面 //$是全局对象
$.get("/AjaxServlet","name=xixi",function (result) {
alert(result) //result是服务器传来的"hello boy"
},"text")
}
function method02() { //不可拼在/AjaxServlet后 //不用考虑url编码和post请求参数放哪里问题
$.post("/AjaxServlet","name=huhu",function (result) {
alert(result)
},"text")
}
function method03() {
/*
AJAX完整请求: $.ajax([settings]) 考虑请求失败的情况用完整请求，上面两个方法没有失败
settings = object
{
n1 : v1,
n2 : v2...
}
*/
$.ajax({
url:"/AjaxServlet",
async:true,
data:"name=tom",
type:"GET", // 请求方式
dataType:"text", // 响应数据的类型
success:function(data){ // 成功的回调
alert(data);
},
error:function(){ // 失败的回调
alert("数据没有成功返回!")
}
});
}
function method04() {
$.post({
url:"/AjaxServlet",
async:true,
data:"name=tom",
dataType:"text", // 响应数据的类型
success:function(data){ // 成功的回调
alert(data);
},
error:function(){ // 失败的回调
alert("数据没有成功返回!")
}
});
}
</script>
</head>
<!--111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<input type="button" value="jquery中的ajax(get)请求" onclick="method01()"> <br> <br>
<input type="button" value="jquery中的ajax(post)请求" onclick="method02()"> <br> <br>
<input type="button" value="jquery中的ajax完整请求" onclick="method03()"> <br> <br>
<input type="button" value="jquery3.0中的ajax签名方式请求" onclick="method04()"> <br> <br>
</body>
</html>
package com.itheima01.ajax;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet(urlPatterns = "/AjaxServlet")
public class AjaxServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("name");
System.out.println(name);
System.out.println("服务器被访问了!");
response.getWriter().print("hello boy");
}
}
2.json：new ObjectMapper()
JSON：JavaScript对象表示法（JavaScript Object Notation），与js对象区别是JSON只有属性没有方法，比XML小快。中括号：一个表即一个数组。大括号：一行记录即一个对象。
任意数组皆为json。json不需要标签，所以数据量更小，上面为混合模式。
//03_json在js中的表达.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//json是js对象： 1.对象， 2.数组， 3.混合
var jsonObj = {"name" : "张三" , "age" : 18 , "married" : true} //name必须string格式，value无所谓
var jsonObj2 = {"name" : "李四" , "age" : 19 , "married" : false}
console.log(jsonObj.name + "," + jsonObj.age + "," + jsonObj.married)
var jsonArray = ["哈哈", 1 , true] //也是json对象
console.log(jsonArray[0])
var jsonArray2 = [jsonObj,jsonObj2]
console.log(jsonArray2[1].name)
var jsonComplex = {"list" : jsonArray2, "count" : 2}
console.log(jsonComplex.list[0].married) // jsonObj.married
</script>
</head>
<body>
</body>
</html>
//JsonDemo.java
package com.itheima02.json;
import org.junit.Test;
import java.util.ArrayList;
/*
* Json在java中就是普通string （java不识别json,xml,sql,正则表达式，都认为是字符串）
* Json Java
* 1. 对象 : javaBean
* 2. 数组 : List
* 3. 混合 : Map<Key, List>
*/
public class JsonDemo { //Java数据（javaBean） 变成 Json
@Test
public void method01(){
Friend f = new Friend("张三", 18, true);
//System.out.println(f.toString()); //.toString()可以不写，默认调用 //Friend{name=..}
System.out.println(f.toJson()); // {"name":"张三"，"age":18，"married":true}
}
@Test
public void method02(){
ArrayList<Friend> list = new ArrayList<>();
Friend f1 = new Friend("张三", 18, true);
Friend f2 = new Friend("李四", 19, false);
list.add(f1);
list.add(f2);
System.out.println(list); //打印如下
//[Friend{name='张三', age=18, married=true}, Friend{name='李四', age=19, married=false}]
StringBuilder sb = new StringBuilder(); //将上面list转化为json的数组
sb.append("[");
for (int i = 0; i < list.size(); i++) { //i最多=2个对象
String s = list.get(i).toJson();
//下面为加一个逗号
if(i == list.size() - 1){
sb.append(s);
}else{
sb.append(s + ",");
}
}
sb.append("]");
System.out.println(sb.toString());
}
}
package com.itheima02.json;
public class Friend {
private String name;
private Integer age;
private Boolean married;
public Friend() {
}
public Friend(String name, Integer age, Boolean married) {
this.name = name;
this.age = age;
this.married = married;
}
@Override
public String toString() {
return "Friend{" +
"name='" + name + '\\'' +
", age=" + age +
", married=" + married +
'}';
}
public String toJson() {
return "{\\"name\\" : \\""+name+"\\",\\"age\\":"+age+",\\"married\\":"+married+"}";
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public Boolean getMarried() {
return married;
}
public void setMarried(Boolean married) {
this.married = married;
}
}
如上手动转换麻烦，如下用jar包将java对象或集合转为json格式字符串。
如下右击add as library。
package com.itheima02.json;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;
import java.util.ArrayList;
import java.util.HashMap;
public class JsonDemo02 {
@Test
public void method01() throws JsonProcessingException {
Friend f = new Friend("张三", 18, true)以上是关于Java41ajax&json：校验用户名，自动提示的主要内容，如果未能解决你的问题，请参考以下文章
用户管理的设计--4.jquery的ajax实现登录名的校验