Web学习笔记9-【Ajax：异步的 JavaScript 和 XML（局部刷新）、介绍、优点，基于 jQuery 的 AJAX示例，AJAX 原理，基于 jQuery 的 AJAX 语法，JSON】

爱吃凉拌辣芒果

已于 2022-07-25 11:10:57 修改

阅读量664

点赞数

分类专栏： Web 文章标签： web

于 2022-03-19 17:13:59 首次发布

本文链接：https://blog.csdn.net/weixin_46549923/article/details/123590869

版权

Web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Web学习笔记9

二十二、Ajax：异步的 JavaScript 和 XML（局部刷新）
二十三、JSON
- 1. 介绍
- 2. 示例
总结：

二十二、Ajax：异步的 JavaScript 和 XML（局部刷新）

1. Ajax介绍

AJAX 不是新的编程，指的是⼀种交互⽅式，异步加载，客户端和服务器的数据交互更新在局部⻚⾯的技术，不需要刷新整个⻚⾯（局部刷新）。

2. Ajax的优点

（1）局部刷新，效率更⾼
（2）⽤户体验更好

3. 基于 jQuery 的 AJAX示例

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>Title</title>
 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
 <script type="text/javascript">
 $(function(){
 var btn = $("#btn");
 btn.click(function(){
 $.ajax({
 url:'/test',
 type:'post',
 data:'id=1',
 dataType:'text',
 success:function(data){
 var text = $("#text");
 text.before("<span>"+data+"</span><br/>");
 }
 });
 });
 })
 </script>
</head>
<body>
 <input id="text" type="text"/><br/>
 <input id="btn" type="button" value="提交"/>
</body>
</html>

不能⽤表单提交请求，改⽤ jQuery ⽅式动态绑定事件来提交。
Servlet 不能跳转到 JSP，只能将数据返回。

4. 传统的 WEB 数据交互 VS AJAX 数据交互

5. AJAX 原理

在这里插入图片描述

6. 基于 jQuery 的 AJAX 语法

$.ajax({属性})
常⽤的属性参数：
url：请求的后端服务地址
type：请求⽅式，默认 get
data：请求参数
dataType：服务器返回的数据类型，text/json
success：请求成功的回调函数
error：请求失败的回调函数
complete：请求完成的回调函数（⽆论成功或者失败，都会调⽤）

二十三、JSON

1. 介绍

JavaScript Object Notation，⼀种轻量级数据交互格式，完成 js 与 Java 等后端开发语⾔对象数据之间的转换。客户端和服务器之间传递对象数据，需要⽤ JSON 格式。

2. 示例

package com.southwind.entity;
public class User {
 private Integer id;
 private String name;
 private Double score;
 public Integer getId() {
 return id;
 }
 public void setId(Integer id) {
 this.id = id;
 }
 public String getName() {
 return name;
 }
 public void setName(String name) {
 this.name = name;
 }
 public Double getScore() {
 return score;
 }
 public void setScore(Double score) {
 this.score = score;
 }
 public User(Integer id, String name, Double score) {
 this.id = id;
 this.name = name;
 this.score = score;
 }
}
User user = new User(1,"张三",96.5);

var user = {
 id:1,
 name:"张三",
 score:96.5
}

package com.southwind.servlet;
import com.southwind.entity.User;
import net.sf.json.JSONObject;
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("/test")
public class TestServlet extends HttpServlet {
 @Override
 protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
 User user = new User(1,"张三",96.5);
 //将 Java 对象转为 JSON 格式
 resp.setCharacterEncoding("UTF-8");
 JSONObject jsonObject = JSONObject.fromObject(user);
 resp.getWriter().write(jsonObject.toString());
 }
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>Title</title>
 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
 <script type="text/javascript">
 $(function(){
 var btn = $("#btn");
 btn.click(function(){
 $.ajax({
 url:'/test',
 type:'post',
 dataType:'json',
 success:function(data){
 $("#id").val(data.id);
 $("#name").val(data.name);
 $("#score").val(data.score);
 }
 });
 });
package com.southwind.servlet;
import com.southwind.entity.User;
import net.sf.json.JSONObject;
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("/test")
public class TestServlet extends HttpServlet {
 @Override
 protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
 User user = new User(1,"张三",96.5);
 //将 Java 对象转为 JSON 格式
 resp.setCharacterEncoding("UTF-8");
 JSONObject jsonObject = JSONObject.fromObject(user);
 resp.getWriter().write(jsonObject.toString());
 }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>Title</title>
 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
 <script type="text/javascript">
 $(function(){
 var btn = $("#btn");
 btn.click(function(){
 $.ajax({
 url:'/test',
 type:'post',
 dataType:'json',
 success:function(data){
 $("#id").val(data.id);
 $("#name").val(data.name);
 $("#score").val(data.score);
 }
 });
 });
})
 </script>
</head>
<body>
 编号：<input id="id" type="text"/><br/>
 姓名：<input id="name" type="text"/><br/>
 成绩：<input id="score" type="text"/><br/>
 <input id="btn" type="button" value="提交"/>
</body>
</html>

总结：

因为在html文件中无法直接写入java程序，所以使用JSP。JSP 主要负责与用户交互，将最终的界⾯呈现给⽤户。JSP 其本质上就是⼀个 Servlet。可以理解：JSP = HTML+JS+CSS+Java 的混合文件。JSP写入java程序有三种形式，分别是定义方法，逻辑代码，对象输出。数据在不同的jsp页面之间传递，借助常用的内置对象request、response、session、application。但是这四个的作用域大小是不一样的。为了方便数据在不同页面间的读取，可以使用EL表达式，${XXX}，但是这个有个前提就是必须得先使用内置对象调用方法 setAttribute来保存数据。但是El表达式对于多个数据的读出很麻烦，举例说，读取一个集合，EL表达式并没有现成的for循环语句可以调用，所以必须得在JSP中穿插java程序。为了避免这样的麻烦，我们可以使用JSTL标准标签库。它可以用于编写各种动态功能。于是可以将JSTL标签与EL表达式结合起来使用。此外，JSTL标签还有格式化的常用标签，对日期数字进行操作；还有函数常用的标签

笔记部分来自韩顺平老师

爱吃凉拌辣芒果

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web学习笔记9-【Ajax：异步的 JavaScript 和 XML（局部刷新）、介绍、优点，基于 jQuery 的 AJAX示例，AJAX 原理，基于 jQuery 的 AJAX 语法，JSON】

Ajax：异步的 JavaScript 和 XML（局部刷新）、介绍、优点，基于 jQuery 的 AJAX示例，AJAX 原理，基于 jQuery 的 AJAX 语法，JSON
复制链接

扫一扫