ajax 学习笔记：【狂神说Java】一小时掌握Ajax_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili
1.Ajax简介
AJAX=Asynchronoous JavaScript and XML (异步的JavaScript和xml )
Ajax 是一种无需的重新的加载网页的情况下，能够更新部门网页的技术。
Ajax是一种用于创建更好更快以及交互性更强的web应用程序技术。
传统的网页（不使用ajax技术的网页）先要提交和更新一个表单，都需要重新加载整个网页。
使用ajax技术的网页，通过在后台服务器进行了少量的数据交换，就能实现异步局部更新。
使用前端来伪造一个ajax，iframe 标签
ajax-frame.html 使用 iframe 测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax模仿测试</title>
</head>
<body>
<script type="text/javascript">
//加载当前的时间
window.onload = function () {
document.getElementById('currentTime').innerText = new Date.getTime();
};
//加载页面内容
function LoadPage(){
let targetUrl = document.getElementById("url").value;
console.log(targetUrl);
document.getElementById("iframePosition").src=targetUrl;
}
</script>
<div>
<p>请输入要加载的地址：<span id="currentTime"></span></p>
<p>
<input id="url" type="text" value="https://www.baidu.com/"/>
<input type="button" value="提交" onclick="LoadPage()">
</p>
</div>
<div>
<h3>加载页面位置：</h3>
<iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
</div>
</body>
</html>
使用ajax的模拟测试：注册百度账号
2.使用jQuery提供的AJAX 方法
2.1 纯js 和使用jQuery提供的比较
Ajax的核心【本质】是XMLHttpRequest对象（XHR)，XHR为向服务器发送请求和解析服务响应提供了接口，能够异步的方式从服务器获取数据。
通过jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中。
jQuery.ajax(...)
部分参数：
url：请求地址
type：请求方式，GET、POST（1.9.0之后用method）
headers：请求头
data：要发送的数据
contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
async：是否异步
timeout：设置请求超时时间（毫秒）
beforeSend：发送请求前执行的函数(全局)
complete：完成之后执行的回调函数(全局)
success：成功之后执行的回调函数(全局)
error：失败之后执行的回调函数(全局)
accepts：通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型
dataType：将服务器端返回的数据转换成指定类型
"xml": 将服务器端返回的内容转换成xml格式
"text": 将服务器端返回的内容转换成普通文本格式
"html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
"script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
"json": 将服务器端返回的内容转换成相应的JavaScript对象
"jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数
2.2 简单测试HttpServletResponse处理
第一步：配置 application.yml
server:
port: 8080
servlet:
context-path: /ajax
spring:
mvc:
view:
prefix: classpath:/templates/
suffix: .html
thymeleaf:
prefix: classpath:/templates/
suffix: .html
补充：
配置一个跳转到视图的controller：IndexController
@Controller
public class indexController {
@RequestMapping("index")
public String index() {
return "index";
}
}
第二部：编写一个AjaxController类
@Controller
public class AjaxController {
@RequestMapping(value = "ajax1", produces = "application/json;charset=utf-8")
public void ajax1(String name, HttpServletResponse response) throws IOException {
if ("admin".equals(name)) {
response.getWriter().println("true");
} else {
response.getWriter().println("false");
}
}
}
第三步：编写前端的HTML页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<head>
<title>ajax测试</title>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
function a1() {
$.ajax({
url: "/ajax1",
data: {
"name": $("#txtName").val()
},
success: function (data, status) {
console.log(data);
console.log(status);
}
});
};
</script>
</head>
<body>
<div>
<!--onBlur: 失去焦点触发事件-->
用户名: <input type="text" id="txtName" onblur="a1()">
</div>
</body>
</body>
</html>
第四步：启动springboot,打开控制台：鼠标离开了输出框，就看到一个ajax请求
2.3 实体类User
第一步：在IndexController中配置跳转到html
@RequestMapping("hello")
public String hello() {
return "hello";
}
第二步：在AjaxController 写获取集合对象，展示在前端
@RequestMapping(value = "ajax2")
@ResponseBody
public List<User> ajax2() {
List<User> list = new ArrayList<>();
//创建一个list集合
list.add(new User("Lxx", "女", 20));
list.add(new User("JJ", "女", 20));
list.add(new User("Ryan", "男", 20));
return list;
}
第三步：写前端页面**：注意字符串的拼接**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax请求2</title>
<script src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$.post({
url: "/ajax2",
success: function (data) {
console.log(data);
var html = "";
for (var i = 0; i < data.length; i++) {
html += "<tr>" +
"<td>" + data[i].name + "</td>" +
"<td>" + data[i].sex + "</td>" +
"<td>" + data[i].age + "</td>" +
"</tr>"
}
$("#content").html(html);
}
});
});
});
</script>
</head>
<body>
<div>
<input type="button" id="btn" value="获取数据">
<table align="center" width="50%" border="1 solid red">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tbody id="content">
</tbody>
</table>
</div>
</body>
</html>
第四步:启动springboot项目来访问
2.4注册效果
注册的时候如果用户名存在，提示一“ 此用户名太受欢迎了，请换个名字注册”
第一步：
@RequestMapping("reg")
public String reg() {
return "reg";
}
第二步：
@RequestMapping(value = "ajax3")
@ResponseBody
public String ajax3(String name,String pwd) {
String msg="";
//模拟数据库的数据
if(name!=null){
if("Ryan".equals(name)){
msg="此用户名太受欢迎了，请换个名字注册";
}else{
msg="Ok";
}
}
return msg;
}
第三部：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<script src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
function a() {
$.ajax({
url: "/ajax3",
data: {
"name": $("#name").val(),
"pwd": $("#pwd").val()
},
success: function (data) {
if (data.toString() == '此用户名太受欢迎了，请换个名字注册') {
$("#userInfo").css("color", "red");
} else {
$("#userInfo").css("color", "green");
}
$("#userInfo").html(data)
}
})
;
};
</script>
</head>
<body>
<h2>注册</h2>
<div>
<input type="text" name="=name" id="name" onblur="a()"> <span id="userInfo"></span></br></br>
<input type="text" name="=pwd" id="pwd"></br></br>
<input type="button" value="注册">
</div>
</body>
</html>
第四步：上图
…
获取百度接口案例：
@RequestMapping("baidu")
public String bd() {
return "baidu";
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JSONP百度搜索</title>
<style>
#q{
width: 500px;
height: 30px;
border:1px solid #ddd;
line-height: 30px;
display: block;
margin: 0 auto;
padding: 0 10px;
font-size: 14px;
}
#ul{
width: 520px;
list-style: none;
margin: 0 auto;
padding: 0;
border:1px solid #ddd;
margin-top: -1px;
display: none;
}
#ul li{
line-height: 30px;
padding: 0 10px;
}
#ul li:hover{
background-color: #f60;
color: #fff;
}
</style>
<script>
// 2.步骤二
// 定义demo函数 (分析接口、数据)
function demo(data){
var Ul = document.getElementById('ul');
var html = '';
// 如果搜索数据存在 把内容添加进去
if (data.s.length) {
// 隐藏掉的ul显示出来
Ul.style.display = 'block';
// 搜索到的数据循环追加到li里
for(var i = 0;i<data.s.length;i++){
html += '<li>'+data.s[i]+'</li>';
}
// 循环的li写入ul
Ul.innerHTML = html;
}
}
// 1.步骤一
window.onload = function(){
// 获取输入框和ul
var Q = document.getElementById('q');
var Ul = document.getElementById('ul');
// 事件鼠标抬起时候
Q.onkeyup = function(){
// 如果输入框不等于空
if (this.value != '') {
// ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆JSONPz重点☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
// 创建标签
var script = document.createElement('script');
//给定要跨域的地址 赋值给src
//这里是要请求的跨域的地址 我写的是百度搜索的跨域地址
script.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.value+'&cb=demo';
// 将组合好的带src的script标签追加到body里
document.body.appendChild(script);
}
}
}
</script>
</head>
<body>
<input type="text" id="q" />
<ul id="ul">
</ul>
</body>
</html>
