AJAX
一 ajax
1. 理解
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
2. 作用
异步请求服务器 不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容提高效率。
同步：发送一次请求，如果响应才能发送下次请求，如果没有响应，一直等待其他的请求发送不了
异步：发送一次请求，不需要等待 可以发送下一次请求
3. 使用
① 创建核心对象
② 设置请求配置信息(请求方式、请求地址等)
③ 设置监听(响应成功的情况下)
④ 局部更新页面(dom操作)
// 3.1 创建核心对象
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// 3.2 设置请求信息
xmlhttp.open("GET", "checkName?username="+username, true);
xmlhttp.send();
// 3.3 设置监听 成功
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
// 3.4 局部更新页面 dom操作
document.getElementById("sp").innerHTML = xmlhttp.responseText;
}
}
4. jQuery的ajax
方式1：$.ajax()
$.ajax({
url: "checkName", // 请求地址
data: {"username":username }, // 请求携带参数
type: "POST", // 请求方式
async: "true", // 是否异步
dataType: "text", // 获取数据的类型
success: function(rel){ // 请求成功响应就绪
// dom操作更新页面数据
$("#sp").html(rel);
}
})
方式2：$.get()/$.post()
/* $.get("checkName?username="+username, function(rel){
// dom操作更新页面
$("#sp").html(rel);
}, "text")*/
$.post("checkName",{"username":username}, function(rel){
// dom操作更新页面
$("#sp").html(rel);
}, "text")
5. 返回值类型
xml 以前使用 解析麻烦 json替代了
html html标签和内容 返回页面数据
script js脚本
json 处理大量数据使用的数据类型
text 文本 少量数据使用该类型
二、XML
1. 理解
XML 指可扩展标记语言（eXtensible Markup Language）。
XML 被设计用来传输和存储数据。现在一般做配置文件
XML 很重要，也很容易学习。
2. 作用：
设计用来传输和存储数据，现在一般做配置文件 如：web.xml
3. 约束：由于xml数据标签没有定义 为了指定标准 提供了约束方式
简单约束 : DTD（文档类型定义）的作用是定义 XML 文档的合法构建模块。
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE note[
<!ELEMENT note (p+, to? ,xx*)>
<!ELEMENT p (#PCDATA)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT xx (#PCDATA)>
]>
<note>
<p>safas</p>
<p>ccc</p>
<to>asfsd</to>
<xx>100</xx>
<xx>sdff</xx>
</note>
复杂约束：Schema
XML Schema 是基于 XML 的 DTD 替代者。
XML Schema 可描述 XML 文档的结构。
XML Schema 语言也可作为 XSD（XML Schema Definition）来引用。
三、JSON
1. 理解
JSON: JavaScript Object Notation(JavaScript 对象表示法)
JSON 是存储和交换文本信息的语法，类似 XML。
JSON 比 XML 更小、更快，更易解析。
2. 作用
网路传输数据的格式
3. json数据 特点：键值对的形式
[{"id":1001, "name": "小航航", "qianGirl":[{"name":"翠花"}, {"name":"柳岩"}]},
{"id":1002, "name":"小宫宫", "qianGirl":[{"name":"小翠"},{"name":"小苍苍"}]},
{"id":1003, "name":"小明明", "qianGirl":[{"name":"小云云"},{"name": "小远远"}]}]
四、搜索补全
baidu.jsp中
<%--
Created by IntelliJ IDEA.
User: junguang
Date: 2021/12/14
Time: 15:09
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>百度搜索</title>
<style>
*{
padding: 0px;
margin: 0px;
}
#dd input{
width: 500px;
height: 40px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-color: #c3c3c3;
padding-left: 20px;
border-right: none;
margin-top: 0px;
margin-left: 450px;
float: left;
}
#dd a{
text-decoration: none;
display: inline-block;
width: 80px;
height: 40px;
background-color: blue;
color: white;
line-height: 40px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
float: left;
}
#show{
width: 500px;
border: 1px solid #c3c3c3;
float: left;
margin-left: 450px;
border-radius: 10px;
display: none;
}
#show div{
text-align: left;
padding-left: 20px;
}
</style>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function(){
// 1. input绑定 键盘抬起事件
$("#dd input").keyup(function(){
// 清除show中的内容
$("#show").empty();
$("#show").css("display","none");
// 2. 获取搜索框内容
var v = $(this).val().trim();
if(v==null || ""==v){
return;
}
// 3. 发送ajax请求 关联数据
$.post("baidu", {"search":v}, function(rel){
// dom根据局部页面 show div中
for(var i=0; i< rel.length; i++){
console.log(rel[i].username);
// 将获取的数据 装入show
$("#show").css("display","block");
$("#show").append("<div>"+rel[i].username+"</div>");
}
}, "json")
});
})
</script>
</head>
<body>
<center>
<img src="img/baidu.png" width="200" height="95">
<div id="dd">
<input type="text" name="search" /><a href="#">百度一下</a>
</div>
<div id="show">
</div>
</center>
</body>
</html>
BaiduServlet
package com.ujiuye.web.servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.ujiuye.bean.User;
import com.ujiuye.service.UserService;
import com.ujiuye.service.impl.UserServiceImpl;
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.List;
@WebServlet(name = "BaiduServlet", urlPatterns = "/baidu")
public class BaiduServlet 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 {
// 1. 获取请求参数
String search = request.getParameter("search");
// 2. 处理业务 根据搜索关联数据
UserService service = new UserServiceImpl();
List<User> list = service.findBySearch(search);
// 转换json格式数据 （gson 功能比较全 fastjson 性能高） jackson
// 2.1 获取核心对象
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(list);
// 3. 响应
response.getWriter().print(json);
}
}