Notes7ajax&json，校验用户名，自动提示，CORS
Posted 码农编程录
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Notes7ajax&json，校验用户名，自动提示，CORS相关的知识，希望对你有一定的参考价值。
文章目录
1.ajax/fetch/axios：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) // 前端可以拿到服务器响应后的数据，只4对于我们才有意义
if(xhr.status == 200)
alert(xhr.responseText) //响应成功，拿到后台发来的“hello boy”
else
alert("响应失败了~~")
//3.设置请求数据 ，如上的2相当于最后一步
/* 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请求：$.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");
如下jquary里内置了ajax请求函数即$ajax，现在浏览器流行的不是ajax了，毕竟jquary出现很多年了，现在用的是fetch和axios，这两者用法很像。
浏览器输入框输入：data:text/html,<h1>hello<h1>，页面自动显示hello。data:text/html,<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>，F12 Network中刷新页面显示如下，这时就可在console中使用jquery了。
监听99号端口的小程序，直接双击打开：链接：https://pan.baidu.com/s/1nHhdf7Qerq3bEkOfXr8FXw 提取码：eipc。
如上在console中回车发送后，如下Network中会多一条localhost请求。
1.1 fetch&axios：fetch大部分浏览器都自带了，除了ie
2.json：new ObjectMapper()
JSON：JavaScript对象简单表示法（JavaScript Object Notation），与js对象区别是JSON只有属性没有方法，比XML小快（因为json不需要标签）。中括号：一个表即一个数组。大括号：一行记录即一个对象。
如下右边java中list集合，前端看不懂无法解析，变成xml后，前端可以解析。任意数组皆为json，上面为混合模式。
2.1 json在前端和后端中表达：json在js中的表达.html（前端）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
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] //[0,1]
console.log(jsonArray2[1].name)
//jsonComplex.list指的是jsonArray2数组，0索引位是jsonObj
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()可以不写，默认调用.toString() //Friendname='张三'，age=18，..
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); //打印如下，默认调用.toString()
//[Friendname='张三', age=18, married=true, Friendname='李四', 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;
pub以上是关于Notes7ajax&json，校验用户名，自动提示，CORS的主要内容，如果未能解决你的问题，请参考以下文章