学习 笔记 前端 JavaWeb开发 Ajax技术详解

目录

一、Ajax简介

二、Ajax的使用

2. 1 Ajax 的运行原理

2.2 Ajax 的使用步骤(了解)

三、Ajax请求

3.1 Get/Post请求

四、同步异步及Ajax响应（了解）

4.1 同步或异步

4.2 Ajax服务器响应

五、JSON

六、Jackson的使用

6.1 序列化

6.2 反序列化

6.3 Jackson注解

七、在Jquery中使用Ajax

7.1 $.ajax()在异步请求中提交数据

7.1.1 提交普通格式数据

7.1.2 提交 JSON 格式数据

7.2  $.ajax()处理响应中的 JSON 格式数据

八、Ajax实现增删改查

8.1 创建JavaBean User类

8.2  创建index.jsp页面

8.3 创建userservlet

一、Ajax简介

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建 交互式、快速动态应用的网页开发技术，无需重新加载整个网页的情况下，能够更新页面局 部数据的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使页面实现异步更新。这意味着可以在不重新加载整个页面的情况下，对页面的某部分进行更新。 

二、Ajax的使用

2. 1 Ajax 的运行原理

XMLHttpRequest 对象

XMLHttpRequest 是浏览器接口对象，该对象的 API 可被 JavaScript、VBScript 以及其它web 浏览器内嵌的脚本语言调用，通过 HTTP 协议在浏览器和 web 服务器之间收发 XML 或其它数据。XMLHttpRequest 可以与服务器实现异步交互，而无需让整个页面刷新，因此成为 Ajax 编程的核心对象。

2.2 Ajax 的使用步骤(了解)

创建 XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

给定请求方式以及请求地址

xhr.open("get","http://www.example.com");

发送请求

xhr.send()

获取服务器端给客户端的响应数据

xhr.onreadystatechange = function(){

//0:请求未初始化

//1:服务器连接已建立

//2:请求已接收

//3:请求处理中

//4:请求已完成，且响应已就绪

if(xhr.readyState == 4 && xhr.status == 200){

document.getElementById("span").innerHTML=xhr.responseText;

alert(xhr.responseText);

}

}

三、Ajax请求

请求的步骤：

在上面的示例中，XMLHttpRequest对象起着重要作用

用户从 UI 发送请求，JavaScript 中调用 XMLHttpRequest对象。HTTP请求由XMLHttpRequest 对象发送到服务器。服务器使用 JSP，PHP，Servlet，ASP.net 等与数据库交互。检索数据。服务器将 XML 数据或 JSON数据发送到 XMLHttpRequest 回调函数。HTML和 CSS 数据显示在浏览器上。

方法描述open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POSTurl：文件在服务器上的位置async：true（异步）或 false（同步）send(string)将请求发送到服务器。string：仅用于 POST 请求

3.1 Get/Post请求

get 和 post请求是http协议中的两种请求方式。

get请求一般用来请求获取数据，post请求一般作为发送数据到后台，传递数据，创建数据；get请求也可以传参到后台，但是传递的参数则显示在地址栏，安全性低，且参数的长度也有限制（2048字符），post请求则是将传递的参数放在request body中，不会在地址栏显示，安全性比get请求高，参数没有长度限制；get请求刷新浏览器或者回退没有影响，post请求则会重新请求一遍；get请求可以被缓存，也会保留在浏览器的历史记录中，post请求不会被缓存，也不会保留在浏览器的历史记录中；get请求通常是通过url地址请求，post常见的则是form表单请求

Get请求示例

xhr.open("GET", "http://localhost:8080/get.txt?t=" + Math.random(), true);

xhr.open("GET", "http://localhost:8080/get.txt?fname=zhang&lname=san", true);

Post请求示例

xhr.open("POST", "http://localhost:8080/post.txt", true);

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xhr.send("fname=zhang&lname=san");

四、同步异步及Ajax响应（了解）

4.1 同步或异步

Async=true

当使用 async=true时，请规定在响应处于onreadystatechange事件中的就绪状态时执行的函数

xhr.onreadystatechange = function(){

if (xhr.readyState === 4 && xhr.status === 200) {

document.getElementById("view").innerHTML = xhr.responseText;

}

}

xmlhttp.open("GET","get.txt",true);

xmlhttp.send();

Async = false

我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

xmlhttp.open("GET","get.txt",false);

xmlhttp.send();

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

4.2 Ajax服务器响应

状态行 xhr.status状态码，如200，304，404等；

响应主体 xhr.responseText与xhr.responseXML都表示响应主体。

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的responseText或responseXML属性。

属性描述responseText获得字符串形式的响应数据。responseXML获得 XML 形式的响应数据。

var xhr = new XMLHttpRequest();

xhr.open("GET", "http://localhost:8080/xmlTest.xml", true);

xhr.send();

xhr.onreadystatechange = function(){

if (xhr.readyState === 4 && xhr.status === 200) {

//解析返回的xml文件

xmlDoc = xhr.responseXML;

txt = "";

x = xmlDoc.getElementsByTagName("ARTIST");

for (i=0;i

txt = txt + x[i].childNodes[0].nodeValue + "
";

}

document.getElementById("view").innerHTML = txt;

}

}

五、JSON

JSON简介

JSON(JavaScript Object Notation) 是一种基于字符串的轻量级的数据交换格式。易于阅 读和编写，同时也易于机器解析和生成。JSON 是 JavaScript 数据类型的子集。

为什么要使用 JSON

在 JSON 未出现之前在 Ajax 中对于数据传递方式，会使用 XML 作为主要数据格式来传输数据。直到 JSON 出现后逐渐放弃使用 XML 作为数据传输格式。JSON 比 XML 更小、更快、更易解析。

JSON 格式的特征

[{"userid":1,"username":"admin"},{"userid":2,"username":"zhangsan"}]

JSON的语法规则

JSON 是按照特定的语法规则所生成的字符串结构。

大括号表示 JSON 的字符串对象。{ } 属性和值用冒号分割。{"属性":"value"} 属性和属性之间用逗号分割。{"属性":"value","属性":"value",...} 中括号表示数组。[{"属性":"value"...},{"属性":"value"...}]

JSON 字符串对象：

{"userid":1,"username":"admin","sex":"male"}

数组：

[{"userid":1,"username":"admin"},{"userid":2,"username":"zhangsan"}]

JOSN的数据类型

string：字符串，必须要用双引号引起来。 number：数值，与 JavaScript 的 number 一致， object：JavaScript 的对象形式，{ key:value }表示方式，可嵌套。 array：数组，JavaScript 的 Array 表示方式[ value ]，可嵌套。 true/false：布尔类型，JavaScript 的 boolean 类型。 null：空值，JavaScript 的 null。

六、Jackson的使用

在 JDK 中并没有内置操作 JSON 格式数据的 API，因此使用处理 JSON 格式的数据需要借 助第三方类库。几个常用的 JSON 解析类库： Gson: 谷歌开发的 JSON 库，功能十分全面。 FastJson: 阿里巴巴开发的 JSON 库，性能十分优秀。 Jackson: 社区十分活跃且更新速度很快。被称为“最好的 Json 解析器”

Jackson 简介 Jackson 是一种解析 JSON 格式数据的 API，也是最流行，速度最快的 JSON API，最新版本是2.13.3，有3个jar包需要下载： jackson-core-2.13.3.jar（核心jar包） jackson-annotations-2.13.3.jar（提供Json注解支持） jackson-databind-2.13.3.jar（数据绑定，依赖于前两个包） 在项目中引入Jackson

6.1 序列化

使用Jackson把java对象转换成Json数据。

创建Element.java

public class Element {

//年龄

private Integer age;

//呢称

private String ename;

public Integer getAge() {

return age;

}

public void setAge(Integer age) {

this.age = age;

}

public String getEname() {

return ename;

}

public void setEname(String ename) {

this.ename = ename;

}

}

把Java对象转成Json

Element element = new Element();

element.setAge(23);

element.setEName("itbaizhan");

ObjectMapper objectMapper = new ObjectMapper();

String elementStr = objectMapper.writeValueAsString(element);

System.out.println(elementStr);

输出结果如下

{"age":23,"elName":"itbaizhan"}

6.2 反序列化

将json格式的数据转换为Java对象

先创建TestBean .java

public class TestBean {

//id

private String id;

//姓名

private String name;

//嵌套对象

private List elements;

public String getId() {

return id;

}

public void setId(String id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public Elements getElements() {

return elements;

}

public void setElements(Elements elements) {

this.elements = elements;

}

}

String str = "{\"id\":1,\"name\":\"zhangsan\",\"elements\":[{\"age\":22,\"elName\":\"xiaozhang\"},{\"age\":26,\"elName\":\"xiaosan\"}]}";

ObjectMapper objectMapper = new ObjectMapper();

TestBean testBean = objectMapper.readValue(str, TestBean.class);//str表示将哪个字符串转换为Java对象，TestBean.class表示将字符串转换为TestBean对象

System.out.println(testBean.toString());

输出结果如下：

TestBean{id=1, name=haha, elements=[Element(age=22, elName=xiaozhang), Element(age=26, elName=xiaosan}]}

6.3 Jackson注解

常用注解

将这个注解加载类上，不存在的字段将被忽略。

@JsonIgnoreProperties(ignoreUnknown = true)

指定忽略字段

@JsonIgnoreProperties({ “password”, “secretKey” })

标在注解上，将忽略此字段

@JsonIgnore

标在时间字段上使用指定规则格式化（默认转化成时间戳）

@JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd")

是否参与序列化

@JsonInclude(参数)

JsonInclude.Include.NON_EMPTY：属性为空或者null都不参与序列化

JsonInclude.Include.NON_NULL：属性为null不参与序列化

标在字段上，指定序列化后的字段名

@JsonProperty("firstName")

自定义某些类型字段的序列化与反序列化规则

@JsonDeserialize(using= T extends JsonDeserializer.class)

@JsonSerialize(using= T extends JsonSerializer.class)

七、在Jquery中使用Ajax

在 JQuery 中提供了对 Ajax 的封装，让我们在使用 Ajax 技术时变得更加容易。在 JQuery 中提供了很多的基于 Ajax 发送异步请求的方法，如：$.ajax()、$.get()、$.post()、$.getJSON()。

7.1 $.ajax()在异步请求中提交数据

在$.ajax()方法中通过 data 属性来存放提交的数据，支持 JSON 格式的数据

7.1.1 提交普通格式数据

在 data 属性中我们可以通过两种方式来指定需要提交的数据。一种是通过 name=value&name=value 的结构。另一种是通过 JavaScript 对象来指定提交数据。无论使用哪种方式在Servlet中都是通过request.getParameter方法根据name获取value的。

通过 JavaScript 对象指定提交数据

data:{

  userid:100,

  username:"zhangsan"

}

7.1.2 提交 JSON 格式数据

在$.ajax()中提交 JSON 格式的数据需要使用 post 方式提交，通过 JSON.stringify()函数将 JavaScript 对象转换成 JSON 格式的字符串。在 Servlet 中通过字符输入获取提交的 JSON 格式的数据。

data:JSON.stringify({name:value,name:value......})

在 Servlet 中通过 req.getReader().readLine()来获取提交的数据。

7.2  $.ajax()处理响应中的 JSON 格式数据

$.ajax()方法会根据 dataType 属性中的值自动对响应的数据做类型处理。如果响应的是 一个 JSON 格式的数据，那么 dataType 的值为“JSON”,在回调函数中我们得到的直接就是 JSON 字符串转换完的 JavaScript 对象。不需要在使用 JSON.parse()做格式的转换处理。

八、Ajax实现增删改查

8.1 创建JavaBean User类

package com.ajax.pojo;

public class User {

private Integer id;

private String username;

private String password;

private Double salary;

private String birthday;

public User() {

}

public User(Integer id, String username, String password, Double salary, String birthday) {

this.id = id;

this.username = username;

this.password = password;

this.salary = salary;

this.birthday = birthday;

}

public Integer getId() {

return id;

}

public void setId(Integer id) {

this.id = id;

}

public String getUsername() {

return username;

}

public void setUsername(String username) {

this.username = username;

}

public String getPassword() {

return password;

}

public void setPassword(String password) {

this.password = password;

}

public Double getSalary() {

return salary;

}

public void setSalary(Double salary) {

this.salary = salary;

}

public String getBirthday() {

return birthday;

}

public void setBirthday(String birthday) {

this.birthday = birthday;

}

@Override

public String toString() {

return "User{" +

"id=" + id +

", username='" + username + '\'' +

", password='" + password + '\'' +

", salary=" + salary +

", birthday='" + birthday + '\'' +

'}';

}

}

8.2  创建index.jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

8.3 创建userservlet

package com.ajax.servlet;

import com.ajax.pojo.User;

import com.alibaba.fastjson.JSON;

import javax.servlet.ServletContext;

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.io.PrintWriter;

import java.util.ArrayList;

import java.util.Comparator;

@WebServlet("/user.do")

public class UserServlet extends HttpServlet {

/*初始化用户数据*/

@Override

public void init() throws ServletException {

ArrayList usersList = new ArrayList<>();

User zs = new User(1, "zhangsan", "123", 2000d, "2001-12-04");

User ls = new User(2, "lisi", "12344", 3000d, "2001-12-07");

User ww = new User(3, "wangwu", "123423", 2040d, "2001-12-04");

User zl = new User(4, "zhaoliu", "123423", 2600d, "2001-12-05");

User tq = new User(5, "tianqi", "124453", 2070d, "2001-12-04");

usersList.add(zs);

usersList.add(ls);

usersList.add(ww);

usersList.add(zl);

usersList.add(tq);

this.getServletContext().setAttribute("userList", usersList);

}

@Override

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

//获取请求的参数

String flag = req.getParameter("flag");

if ("getData".equals(flag)){

getData(req, resp);

}else if ("add".equals(flag)){

//添加

addUser(req, resp);

}else if ("update".equals(flag)){

//更新

update(req, resp);

}else {

//删除

delete(req, resp);

}

}

@Override

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

doPost(req, resp);

}

//获取用户数据

public void getData(HttpServletRequest request,HttpServletResponse response) throws IOException {

ArrayList userList = (ArrayList) this.getServletContext().getAttribute("userList");

//将数据转换为JSON字符串输出到页面上

String s = JSON.toJSONString(userList);

response.setContentType("application/json");

//输出流

PrintWriter writer = response.getWriter();

writer.println(s);

writer.flush();

writer.close();

}

//添加

public void addUser(HttpServletRequest request, HttpServletResponse response) throws IOException {

User user = this.createUser(request, response);

ServletContext servletContext = this.getServletContext();

ArrayList userList = (ArrayList) servletContext.getAttribute("userList");

userList.add(user);

response.setContentType("text/plain;charset=utf-8");

PrintWriter writer = response.getWriter();

writer.println("添加成功");

writer.flush();

writer.close();

}

public User createUser(HttpServletRequest request, HttpServletResponse response){

String id = request.getParameter("id");

String username = request.getParameter("username");

String password = request.getParameter("password");

String salary = request.getParameter("salary");

String birthday = request.getParameter("birthday");

User user = new User();

user.setId(Integer.parseInt(id));

user.setUsername(username);

user.setPassword(password);

user.setSalary(Double.parseDouble(salary));

user.setBirthday(birthday);

return user;

}

//更新用户

public void update(HttpServletRequest request, HttpServletResponse response) throws IOException {

User user = this.createUser(request, response); //更新后的user对象

ServletContext servletContext = this.getServletContext();

ArrayList userList = (ArrayList) servletContext.getAttribute("userList");

for (User user1 : userList) {

if (user1.getId() == user.getId()) {

userList.remove(user1);

break;

}

}

//添加新的user到集合

userList.add(user);

//按照id重新排序

userList.sort(new Comparator() {

@Override

public int compare(User o1, User o2) {

return o1.getId() - o2.getId();

}

});

//输出到页面

response.setContentType("text/plain;charset=utf-8");

PrintWriter writer = response.getWriter();

writer.println("更新成功");

writer.flush();

writer.close();

}

//删除

public void delete(HttpServletRequest request, HttpServletResponse response) throws IOException {

String id = request.getParameter("id");

ServletContext servletContext = this.getServletContext();

ArrayList userList = (ArrayList) servletContext.getAttribute("userList");

for (User user : userList) {

if (user.getId() == Integer.parseInt(id)){

userList.remove(user);

break;

}

}

response.setContentType("text/plain;charset=utf-8");

PrintWriter writer = response.getWriter();

writer.println("删除成功");

writer.flush();

writer.close();

}

}

参考链接

 您阅读本篇文章共花了：