Ajax 学习笔记
Ajax
1.什么是ajax
Asynchronous Javascript And XML 异步的JavaScript 和 xml。
AJAX 是一种从网页访问 Web 服务器的异步无刷新技术。
为了解决传统的 web 应用当中 "请求" - "等待" - "响应" 的整个过程的弊端
而出现的一种创新的技术。
异步：同步是必须等待请求返回结果之后，才能继续其他操作。异步是可以在等待的时间里去继续其他操作，当响应就绪后对响应进行处理。
无刷新：按需加载。（当点击查看更多的时候，就会结合DOM向服务器请求将数据追加进去，并没有刷新页面）
无刷新场景：如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。
它的本质其实就是使用浏览器的内置对象向服务器发送一个请求，服务器返回不同类型的数据给前端。
使用这些数据对页面部分内容进行更新，整个过程页面没有任何刷新。
ajax通过后台服务器进行少量的数据交换，可以对网页进行异步处理。
传统的网页【不使用ajax】需要更新页面的时候，必须重新加载整个网页。
而ajax不需要，因为它可以异步请求。
2.ajax内置对象
XmlHttpRequest
该对象提供了对 HTTP 协议的完全访问，可以使用它
向后台服务器发送基于http协议的请求，接收服务器的响应
做数据交换使用。
3.AJAX原理与实现
步骤：
1.创建 XmlHttpRequest 对象。
2.设置请求参数以及访问的方式。
3.设置请求消息头，用于在发送post请求时传递参数。
4.绑定回调函数。服务器在响应时会触发该函数。
5.判断浏览器与服务器通讯是否已经结束，并且是否响应成功
1.创建 XmlHttpRequest 对象。
这个对象用于和服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。如果要将请求发送给服务器，需要利用对象的open()和send()方法。
var request;
if(window.XMLHttpRequest){
// 现代的（IE7+、Firefox、Chrome、Safari 以及 Opera）浏览器 -- 新建XMLHttpRequest对象
request = new XMLHttpRequest();
}else{
// 新旧版本混写：通过检测window对象是否有XMLHttpRequest属性来确定浏览器是否支持标准的XMLHttpRequest
request = new ActiveXObject('Microsoft.XMLHTTP');
}
2.设置请求参数以及访问的方式
1、 request. open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求:
第一个参数指定是GET还是POST，第二个参数是文件在服务器上的位置，第三个参数指定是否使用异步，默认是true异步，所以不用写。
2、url – 服务器上文件的地址，该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。
request.open('get', 'single'); //single是我写的servlet
3.设置请求消息头，用于在发送post请求时传递参数。
// post 方式发送数据 需要设置请求头
xhr.open(“post”, “test.php”, true)
xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”)
4.绑定回调函数。服务器在响应时会触发该函数。
5.判断浏览器与服务器通讯是否已经结束，并且是否响应成功
例子：
jsonServlet。java
package com.powernode.servlet;
import com.powernode.entity.User;
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;
@WebServlet(urlPatterns = {"/single"})
public class JsonServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html; charset=UTF-8");//响应防止乱码
User user =new User("少辉","男",18); //给实体类输入姓名，性别，年龄
ObjectMapper mapper = new ObjectMapper();//创建解析Java对象的工具对象
String json = mapper.writeValueAsString(user);//解析Java对象，将Java对象解析成JSON字符串
System.out.println(json);//可以写这个查看一下解析后的json字符串
response.getWriter().print(json);//将被解析成JSON字符串的对象响应到前端
}
}
html页面
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<h1>
JSON01
h1>
<script>
window.onclick = function (){
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else {
request = new ActiveXObject('Microsoft.XMLHTTP')
}
request.open('get','single',true);
request.onreadystatechange = function (){
if(request.status == 200 && request.readyState == 4)
{
let obj = JSON.parse((request.responseText));
console.log((obj.name));
}
}
}
4.ajax返回的状态
-
redayState属性
返回浏览器与服务器通讯状态。 返回值是一个 number 类型的值，不同的值有以下区别： 0：未初始化，但是对象已经建立。 1：初始化，对象已经建立，但是尚未调用send方法 2：发送数据，send方法已经被调用，请求已经发送。 3：数据传输中，浏览器已经接收了部分数据。 4：响应结束，浏览器接收服务器返回的所有数据。 -
status
服务器响应的状态码 200：服务器响应成功。 404：未找到页面
5.JSON
1.什么是JSON
JSON JavaScirpt Obejct Notation 脚本对象标记
JS标记对象，是一种轻量级的数据交换格式。目前也别广泛使用。
因为它的本质是一个符合格式的字符串。
JSON被用于前端与后端之间交互的工具。
2.JSON的语法
单个对象语法：
var obj = `{"name":"zs","age":10}`;
集合对象语法：
var objs = `[
{"name":"董大炮1","sex":"男","age":26},
{"name":"董大炮2","sex":"男","age":26},
{"name":"董大炮3","sex":"男","age":26}
]`;
3.jackson
Jackson 是当前全球使用率最高的，用来序列化和反序列化json的Java开源框架。
它可以将Java对象转为JSON字符串.
目前国内使用的比较多的是FastJson，该框架由阿里巴巴开源。
但是Spring官网默认支持的JSON解析工具是jackson
4.将Java对象转换成JSON字符串
Servlet页面
package com.powernode.servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.powernode.entity.User;
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.ArrayList;
import java.util.List;
@WebServlet("/list")
public class ListToJsonServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
User u1 = new User("董大炮1", "男", 18);
User u2 = new User("董大炮2", "男", 19);
User u3 = new User("董大炮3", "男", 20);
User u4 = new User("董大炮4", "男", 21);
User u5 = new User("董大炮5", "男", 22);
User u6 = new User("董大炮6", "男", 23);
User u7 = new User("董大炮7", "男", 24);
User u8 = new User("董大炮8", "男", 25);
List<User> users = new ArrayList<>();
users.add(u1);
users.add(u2);
users.add(u3);
users.add(u4);
users.add(u5);
users.add(u6);
users.add(u7);
users.add(u8);
/*
创建解析Java对象的工具对象
*/
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(users);
System.out.println(json);
/*
将被解析成JSON字符串的对象响应到前端
*/
response.getWriter().print(json);
}
}
html 页面
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
window.onload = function () {
//1.创建 XmlHttpRequest 对象。
var xhr = new XMLHttpRequest();
//2.设置请求参数以及访问的方式。
xhr.open('get', 'list');
//3.绑定回调函数。服务器在响应时会触发该函数。
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var objs = JSON.parse(xhr.responseText);
var docs = ``;
objs.forEach((user, index) => {
docs +=
`
${user.name}
${user.sex}
${user.age}
|
`;
});
<!-- 找到tbody id="t1节点 -->
document.getElementById('t1').innerHTML = docs;
}
}
xhr.send();
/*
给未来元素添加点击事件
event:它是一个当前事件对象。
给ID = t1 节点添加 监听事件
*/
document.getElementById('t1').addEventListener('click', function (event) {
/*
获取用户具体点击的哪个按键
获取当前点击按钮节点对象。
*/
var target = event.target;
var type = target.getAttribute("btn-type");
if(type == "delete"){
console.log("用户点击了删除按钮....")
}else{
console.log("用户点击了更新按钮....")
/*
根据自定义属性，获取指定节点的数据
*/
var data = target.getAttribute("data-uls-tag");
console.log(data);
}
})
}
script>
head>
<body>
<table cellpadding="0" cellspacing="0" width="60%" border="1">
<thead>
<th>姓名th>
<th>性別th>
<th>年齡th>
<th>操作th>
thead>
<tbody align="center" id="t1">
tbody>
table>
body>
html>
鼠标点击 更新和删除 ，操作台输出相应Username 的值 。
