Ajax入门
一、ajax介绍
1、ajax(Asynchronous JavaScript And XML):异步的 JavaScript 和 XML。
2、本身不是一种新技术,而是多个技术综合。用于快速创建动态网页的技术。
3、一般的网页如果需要更新内容,必需重新加载个页面。
4、而AJAX 通过浏览器与服务器进行少量数据交换,就可以使网页实现异步更新。也就是在不重新加载整个页 面的情况下,对网页的部分内容进行局部更新。
2、JQuery的GET方式实现AJAX
1、核心语法:$.get(data],[callback],[type] )
1.url:请求的资源路径。
2.data:发送给服务器端的请求参数,格式可以是key=value,也可以是 js 对象。
3.callback:当请求成功后的回调函数,可以在函数中编写我们的逻辑代码。
4.type:预期的返回数据的类型,取值可以是 xml, html, js, json, text等。
2、代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<form autocomplete="off">
姓名:<input type="text" id="username">
<span id="uSpan"></span>
<br>
密码:<input type="password" id="password">
<br>
<input type="submit" value="注册">
</form>
</body><script src="js/jquery-3.3.1.min.js"></script>
<script>
//1.为用户名绑定失去焦点事件
$("#username").blur(function () {
let username = $("#username").val();
//2.jQuery的GET方式实现AJAX
$.get(
//请求的资源路径
"userServlet",
//请求参数
"username=" + username,
//回调函数
function (data) {
//将响应的数据显示到span标签
$("#uSpan").html(data);
},
//响应数据形式
"text"
);
});
</script>
</html>
3、JQuery的POST方式实现AJAX
1、核心语法:$.post(url,[data],[callback],[type]);
url:请求的资源路径。
data:发送给服务器端的请求参数,格式可以是key=value,也可以是 js 对象。
callback:当请求成功后的回调函数,可以在函数中编写我们的逻辑代码。
type:预期的返回数据的类型,取值可以是 xml, html, js, json, text等。
4、代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<form autocomplete="off">
姓名:<input type="text" id="username">
<span id="uSpan"></span>
<br>
密码:<input type="password" id="password">
<br>
<input type="submit" value="注册">
</form>
</body><script src="js/jquery-3.3.1.min.js"></script>
<script>
//1.为用户名绑定失去焦点事件
$("#username").blur(function () {
let username = $("#username").val();
//2.jQuery的POST方式实现AJAX
$.post(
//请求的资源路径
"userServlet",
//请求参数
"username=" + username,
//回调函数
function (data) {
//将响应的数据显示到span标签
$("#uSpan").html(data);
},
//响应数据形式
"text"
);
});
</script>
</html>
5、JQuery的通用方式实现AJAX
1、核心语法:$.ajax({name:value,name:value,…});
1.url:请求的资源路径。
2.async:是否异步请求,true-是,false-否 (默认是 true)。
3.data:发送到服务器的数据,可以是键值对形式,也可以是 js 对象形式。
4.type:请求方式,POST 或 GET (默认是 GET)。
5.dataType:预期的返回数据的类型,取值可以是 xml, html, js, json, text等。
6.success:请求成功时调用的回调函数。
7.error:请求失败时调用的回调函数。
6、代码实现
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <html> <head> <title>Title</title> <%--引入js--%><script src="js/jquery-3.3.1.js"></script> </head> <body><input type="button" value="发送异步请求" οnclick="fun();"> <br> <span id="span1"></span> <br> <span id="span2"></span></body> <script>$("#span1").html(new Date().getTime());//给按钮绑定单击事件,发起ajax异步请求, 后台返回数,将后台返回的数据写到span2中function fun() {//ajax请求: 1.路径 2.数据 3.请求方式 4.返回的数据类型 5.回调函数$.ajax({//请求资源路径url:"/bb",//是否异步async:true,//请求参数 key=value的形式,多个键值对之间使用&隔开data:"username=tom&age=20",//请求方式type:"post",//数据形式dataType:"text",//请求成功后调用的回调函数 data就是后台返回的数据success:function (data) {//请求成功后执行 将响应的数据显示到span标签$("#span2").html(data);},error:function (data) {//请求失败之后执行$("#span2").html("请求失败");}});} </script> </html>
7、小结
1、AJAX(Asynchronous JavaScript And XML):异步的 JavaScript 和 XML
2、 通过浏览器与服务器进行少量数据交换,就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下,对网页的部 分内容进行局部更新。
3、同步和异步
1、同步:服务器端在处理过程中,无法进行其他操作。
2、异步:服务器端在处理过程中,可以进行其他操作。
4、GET 方式实现:$.get();
5、POST 方式实现:$.post();
1、url:请求的资源路径。
2、data:发送给服务器端的请求参数,格式可以是key=value,也可以是 js 对象。
3、Callback:当请求成功后的回调函数,可以在函数中编写我们的逻辑代码。
4、type:预期的返回数据的类型,取值可以是 xml, html, js, json, text等。
6、通用方式实现:$.ajax();
1.url:请求的资源路径。
2.async:是否异步请求,true-是,false-否 (默认是 true)。
3.data:发送到服务器的数据,可以是键值对形式,也可以是 js 对象形式。
4.type:请求方式,POST 或 GET (默认是 GET)。
5.dataType:预期的返回数据的类型,取值可以是 xml, html, js, json, text等。
6.success:请求成功时调用的回调函数。
7.error:请求失败时调用的回调函数。
二、JSON的处理
1、json回顾
1.JSON(JavaScript Object Notation):是一种轻量级的数据交换格式。
2.它是基于 ECMAScript 规范的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。
3.简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写,同时也易于计算机解析和生成,并有效的 提升网络传输效率。
2、创建格式
基本规则
据在名称/值对中:json数据是由键值对构成的
键用引号(单双都行)引起来,也可以不使用引号
值得取值类型:
数字(整数或浮点数)
字符串(在双引号中)
逻辑值(true 或 false)
数组(在方括号中) {"persons":[{},{}]}
对象(在花括号中) {"address":{"province":"陕西"....}}
null
数据由逗号分隔:多个键值对由逗号分隔
花括号保存对象:使用{}定义json 格式
方括号保存数组:[]
//1.定义基本格式
var person = {"name": "张三", age: 23, 'gender': true};//2.嵌套格式 {}———> []
var persons = {
"persons": [
{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 24, "gender": true},
{"name": "王五", "age": 25, "gender": false}
]
};//3.嵌套格式 []———> {}
var ps = [{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 24, "gender": true},
{"name": "王五", "age": 25, "gender": false}];
2、JSON转换工具的介绍
我们除了可以在 JavaScript 中来使用 JSON 以外,在 JAVA 中同样也可以使用 JSON。
JSON 的转换工具是通过 JAVA 封装好的一些 JAR 工具包。
可以将 JAVA 对象或集合转换成 JSON 格式的字符串,也可以将 JSON 格式的字符串转成 JAVA 对象。
-
Jackson:开源免费的 JSON 转换工具,SpringMVC 转换默认使用 Jackson。
- 导入 jar 包。
-
创建核心对象。
-
调用方法完成转换。
-
- 导入 jar 包。
三、JSON转换练习
1、对象json,json转对象
package com;import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.jupiter.api.Test;
import pojo.Student;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Collections;
import java.util.HashMap;
/*** @author 86136*/
public class Test01 {//对象->JSON 在JSON格式中. {}就代表一个对象, []代表数组/集合@Testpublic void test1() throws IOException {//1.创建jackson和新对象ObjectMapper mapper = new ObjectMapper();//2.创建Student对象Student student = new Student(1, "苏沐橙", "成都");//3.将Student对象=>JSON格式String s = mapper.writeValueAsString(student);//{"id":1,"name":"苏沐橙","address":"成都"}System.out.println(s);//4.JSON=>Student对象Student stu = mapper.readValue(s, Student.class);//Student{id=1, name='苏沐橙', address='成都'}System.out.println(stu);}//list集合->JSON@Testpublic void test02() throws IOException {ObjectMapper mapper = new ObjectMapper();ArrayList<Object> list = new ArrayList<>();Collections.addAll(list,new Student(1,"苏沐橙","成都"),new Student(2,"瑶瑶","武汉"),new Student(2,"陈雨舒","北京"));String s = mapper.writeValueAsString(list);System.out.println(s);//JSON->listArrayList arrayList = mapper.readValue(s, ArrayList.class);System.out.println(arrayList);}//map->json@Testpublic void test03() throws JsonProcessingException {ObjectMapper mapper = new ObjectMapper();HashMap<String, Object> map = new HashMap<>();map.put("name","瑶瑶");map.put("address", "成都");String s = mapper.writeValueAsString(map);System.out.println(s);}}
四、综合案例
代码:
package web;import com.fasterxml.jackson.databind.ObjectMapper;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;
import java.util.HashMap;/*** @author 86136*/
@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//浏览器中文乱码resp.setContentType("application/json;charset=utf-8");//1、获取用户名String username = req.getParameter("username");//2、调用service层判断用户名是否存在//设置响应的数据格式为jsonHashMap<String, Object> map = new HashMap<>();if ("苏沐橙".equals(username)){//存在map.put("userExsit",true);map.put("msg","此用户名已有,请更换一个");}else {//不存在map.put("userExsit",false);map.put("msg","用户名可用");}//将map转为json,并且传递给客户端//将map转为jsonObjectMapper mapper = new ObjectMapper();//并且传递给客户端mapper.writeValue(resp.getWriter(),map);}}
jsp代码:
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html><head><title>用户注册</title></head><body><form><input type="text" id="username" name="username" placeholder="请输入用户名"><span id="s_username"></span><br><input type="password" name="password" placeholder="请输入密码"><br><input type="submit" value="注册"><br></form></body> <script src="js/jquery-3.3.1.js"></script> <script>//页面加载完成后$(function () {//给username绑定blur事件$("#username").blur(function () {//获取username文本输入框的值var username = $(this).val();//发送ajax请求$.get("findUserServlet",{username:username},function (data) {//判断userExsit键的值是否是true//alert(data);var span = $("#s_username");if (data.userExsit){//用户名存在span.css("color","red");span.html(data.msg);}else {//用户名不存在span.css("color","green");span.html(data.msg)}});});}); </script> </html>