AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Ajax技术【Ajax 实战】(二)-全面详解（学习总结---从入门到深化）(下)

2024-01-15 45
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Ajax技术【Ajax 实战】(二)-全面详解（学习总结---从入门到深化）

Ajax技术【Ajax 实战】(二)-全面详解（学习总结---从入门到深化）(上)：https://developer.aliyun.com/article/1419258


创建UserServlet

@WebServlet("/user.do")
public class UserServlet extends HttpServlet
{
 @Override
    public void init() throws ServletException {
   }
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
   }
     @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
   }
}


配置web.xml

<servlet>
     <servlet-name>UserServlet</servlet-name>
     <servlet-class>
        com.itbaizhan.ajax.servlet.UserServlet
     </servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>UserServlet</servlet-name>
    <url-pattern>/</url-pattern>
</servlet-mapping>


查询用户列表


页面相关

$(function () {
     //初始化用户数据
     getData();
 });
// 获取页面初始化数据
function getData(){
    $.getJSON("user.do", {flag:"getData"},function (result) {
        listUser(result);
   });
}
// 遍历数据生成数据
function listUser(obj){
    var str ="";
    $.each(obj,function(){
        str+= "<tr align='center'>" +
            "<td id='"+this.id+"'>"+this.id +"</td>"+
            "<td>"+this.username+"</td>" +
            "<td>"+this.password+"</td>" +
            "<td>"+this.salary+"</td>" +
            "<td>"+this.birthday+"</td>" +
            "<td><a href='#' onclick='preUpdateUser("+this.id+")'>更新
</a>&nbsp;&nbsp;<a href='#' onclick='deleteUser("+this.id+")'>删除 </a>
</td></tr>"
   });
    $("#tBody").prepend(str);
}


servlet相关

@Override
public void init() throws ServletException {
    ArrayList<User> list = new ArrayList<>();
    User user1 = new User(1,"zhangsan","123",2000d,"1997-09-01");
    User user2 = new User(2,"lisi","123",3000d,"1998-08-23");
    User user3 = new User(3,"zhaoliu","123",2500d,"1996-05-16");
    User user4 = new User(4,"wangwu","123",2080d,"1995-10-12");
    User user5 = new User(5,"zhengsan","123",3200d,"1999-12-20");
    User user6 = new User(6,"liugang","123",4200d,"1994-04-10");
    list.add(user1);
    list.add(user2);
    list.add(user3);
    list.add(user4);
    list.add(user5);
    list.add(user6);
    ServletContext servletContext = this.getServletContext();
    servletContext.setAttribute("list",list);
}
// 获取页面初始化数据
private void getData(HttpServletRequest req, HttpServletResponse resp) throws IOException
{
    List<User> list = (List<User>)
      this.getServletContext().getAttribute("list");
      String s = JSON.toJSONString(list);
      resp.setContentType("application/json");
      PrintWriter pw = resp.getWriter();
      pw.print(s);
      pw.flush();
      pw.close();
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws
ServletException, IOException {
    String flag = req.getParameter("flag");
    if("getData".equals(flag)){
        this.getData(req,resp);
   }
}


添加用户


页面相关

//添加按钮绑定点击事件
$("#add").click(function(){
    addOrUpdateUser("addUser");
});
// 用户添加或者用户更新
function addOrUpdateUser(flag){
    // 从页面中获取数据
    var userid = $("#id").val();
    var username = $("#username").val();
    var password = $("#password").val();
    var salary = $("#salary").val();
    var birthday = $("#birthday").val();
    var data = {
        userid:userid,
        username:username,
        password:password,
        salary:salary,
        birthday:birthday,
        flag:flag
   }
    $.get("user.do",data,function(result){
        alert(result);
        location.reload();
   });
}


servlet相关

/**
     * 处理添加用户请求
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
private void addUser(HttpServletRequest req, HttpServletResponse resp) throws IOException
{
    User user = this.createUser(req);
    ServletContext servletContext = this.getServletContext();
    List<User> list = (List<User>)servletContext.getAttribute("list");
    list.add(user);
    resp.setContentType("text/plain;charset=utf-8");
    PrintWriter pw = resp.getWriter();
    pw.print("添加成功");
    pw.flush();
    pw.close();
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws
ServletException, IOException {
    String flag = req.getParameter("flag");
    if("getData".equals(flag)){
        this.getData(req,resp);
   }else if("addUser".equals(flag)){
        this.addUser(req,resp);
   }
}
// 获取请求数据
private User createUser(HttpServletRequest
req){
    String userid = req.getParameter("userid");
    String username = req.getParameter("username");
    String password = req.getParameter("password");
    String salary = req.getParameter("salary");
    String birthday = req.getParameter("birthday");
    User user = new User();
    user.setId(Integer.parseInt(userid));
    user.setUsername(username);
    user.setPassword(password);
    user.setSalary(Double.valueOf(salary));
    user.setBirthday(birthday);
    return user;
}


更新用户


页面相关

// 更新之前的数据选择
function preUpdateUser(userid){
    var arr = new Array();  
$("#"+userid).closest("tr").children().each(
function(index,ele){
        if(index <=4){
            arr[index]= ele.innerText
       }
   });
    $("#id").val(arr[0]);
    $("#id").attr("readonly",true);
    $("#username").val(arr[1]);
    $("#password").val(arr[2]);
    $("#salary").val(arr[3]);
    $("#birthday").val(arr[4]);
}
//更新按钮绑定点击事件
$("#update").click(function(){
 addOrUpdateUser("updateUser");
});
// 用户添加或者用户更新
function addOrUpdateUser(flag){
    // 从页面中获取数据
    var userid = $("#id").val();
    var username = $("#username").val();
    var password = $("#password").val();
    var salary = $("#salary").val();
    var birthday = $("#birthday").val();
    var data = {
        userid:userid,
        username:username,
        password:password,
        salary:salary,
        birthday:birthday,
        flag:flag
   }
    $.get("user.do",data,function(result){
       alert(result);
       location.reload();
   });
}


servlet相关

/**
     * 处理更新用户请求
     * @param req
     * @param resp
     * @throws IOException
     */
private void updateUser(HttpServletRequest req,
                        HttpServletResponse resp) throws IOException{
    User user = this.createUser(req);
    ServletContext servletContext = this.getServletContext();
    List<User> userList = (List<User>) servletContext.getAttribute("list");
    //list转map
    Map<Integer, User> userMap = userList.stream().collect(Collectors.toMap(User::getId, Function.identity()));
    //根据id获取user
    User user1 = userMap.get(user.getId());
    //删除指定的user
    userList.remove(user1);
    //添加新的user
    userList.add(user);
    //按id排序
    userList.sort(new Comparator<User>() {
        @Override
        public int compare(User o1, User o2)
         {
            return o1.getId() - o2.getId();
       }
   });
    //输出至页面
    resp.setContentType("text/plain;charset=utf-8");
    PrintWriter pw = resp.getWriter();
    pw.print("更新成功");
    pw.flush();
    pw.close();
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws
ServletException, IOException {
    String flag = req.getParameter("flag");
    if("getData".equals(flag)){
        this.getData(req,resp);
   }else if("addUser".equals(flag)){
        this.addUser(req,resp);
   }else if("updateUser".equals(flag)){
        this.updateUser(req,resp);
   }
}


删除用户


页面相关

// 删除用户
function deleteUser(userid){
    $("#"+userid).closest("tr").remove();
 $.post("user.do", {userid:userid,flag:"delete"},function(result){
        alert(result)
   })
}


servlet相关

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws
ServletException, IOException {
    String flag = req.getParameter("flag");
    if("getData".equals(flag)){
        this.getData(req,resp);
   }else if("addUser".equals(flag)){
        this.addUser(req,resp);
   }else if("updateUser".equals(flag)){
        this.updateUser(req,resp);
   }else if("delete".equals(flag)){
        this.deleteUser(req,resp);
   }
}
/**
     * 处理删除用户请求
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
private void deleteUser(HttpServletRequest req,
                        HttpServletResponse resp) throws ServletException, IOException{
    ServletContext servletContext = this.getServletContext();
    List<User> userList = (List<User>)servletContext.getAttribute("list");
    String userid = req.getParameter("userid");
    //list转map
    Map<Integer, User> userMap = userList.stream().collect(Collectors.toMap(User::getId, Function.identity()));
    //根据id获取user
    if(StringUtils.isNotEmpty(userid)){
        User user1 = userMap.get(Integer.parseInt(userid));
        //删除指定的user
        userList.remove(user1);
        resp.setContentType("text/plain;charset=utf-8");
        PrintWriter pw = resp.getWriter();
        pw.print("删除成功");
        pw.flush();
        pw.close();
   }else{
        resp.setContentType("text/plain;charset=utf-8");
        PrintWriter pw = resp.getWriter();
        pw.print("删除失败");
        pw.flush();
        pw.close();
   }
}


运行效果


复习：


Java对象的序列化和反序列化


序列化和反序列化是什么


当两个进程远程通信时，彼此可以发送各种类型的数据。 无论是何 种类型的数据，都会以二进制序列的形式在网络上传送。比如，我 们可以通过http协议发送字符串信息；我们也可以在网络上直接发 送Java对象。发送方需要把这个Java对象转换为字节序列，才能在 网络上传送；接收方则需要把字节序列再恢复为Java对象才能正常 读取。 把Java对象转换为字节序列的过程称为对象的序列化。把字节序列 恢复为Java对象的过程称为对象的反序列化。


序列化涉及的类和接口


ObjectOutputStream代表对象输出流，它的writeObject(Object obj)方法可对参数指定的obj对象进行序列化，把得到的字节序列写 到一个目标输出流中。


ObjectInputStream代表对象输入流，它的readObject()方法从一个 源输入流中读取字节序列，再把它们反序列化为一个对象，并将其 返回。 只有实现了Serializable接口的类的对象才能被序列化。 Serializable接口是一个空接口，只起到标记作用。


将对象序列化到文件


ObjectOutputStream可以将一个内存中的Java对象通过序列化的方 式写入到磁盘的文件中。被序列化的对象必须要实现Serializable序 列化接口，否则会抛出异常。


创建对象

public class Users implements Serializable {
    private int userid;
    private String username;
    private String userage;
    public Users(int userid, String username, String userage) {
        this.userid = userid;
        this.username = username;
        this.userage = userage;
    }
    public Users() { }
    public int getUserid() {
        return userid;
   }
    public void setUserid(int userid) {
        this.userid = userid;
   }
    public String getUsername() {
        return username;
   }
    public void setUsername(String username)
   {
        this.username = username;
   }
    public String getUserage() {
        return userage;
   }
    public void setUserage(String userage) {
        this.userage = userage;
   }
    @Override
    public String toString() {
 return "Users{" +
                "userid=" + userid +
                ", username='" + username + '\'' +
                ", userage='" + userage + '\'' +
                '}';
   }


序列化对象

public class TestObjectOutputStream {
    public static void main(String[] args) {
        //创建对象输出字节流与文件输出字节流对象
        try(ObjectOutputStream oos = new ObjectOutputStream(new FileOutputStream("d:/data3"))){
            //创建Users对象
            Users users = new Users(1,"Oldlu","18");
            //将对象序列化到文件中
            oos.writeObject(users);
            //刷新
            oos.flush();
       }catch(IOException e){
            e.printStackTrace();
       }
   }
}


将对象反序列化到内存中


public class TestObjectInputStream {
    public static void main(String[] args) {
        //创建对象输入字节流与文件字节输入流对象
        try(ObjectInputStream ois = new ObjectInputStream(new FileInputStream("d:/data3"))) 
       {
            //将对象反序列化到内存中
            Users users = (Users) ois.readObject();
            System.out.println(users);
       }catch(Exception e){
            e.printStackTrace();
       }
   }
}


File类在IO中的作用



当以文件作为数据源或目标时，除了可以使用字符串作为文件以及 位置的指定以外，我们也可以使用File类指定。

public class TestFile {
    public static void main(String[] args) {
        //创建字符缓冲流与文件字符输入流对象
        try(BufferedReader br =  new BufferedReader(new FileReader(new File("d:/sxt.txt")));
            //创建字符输出流对象
            PrintWriter pw = new PrintWriter(new File("d:/sxt8.txt"))){
            //操作流
            String temp = "";
            int i=1;
            while((temp = br.readLine()) != null){
                pw.println(i+","+temp);
                i++;
}
            pw.flush();
       }catch(IOException e){
            e.printStackTrace();
       }
   }
}


装饰器模式构建IO流体系


装饰器模式简介


装饰器模式是GOF23种设计模式中较为常用的一种模式。它可以实 现对原有类的包装和装饰，使新的类具有更强的功能。


装饰器模式

class Iphone {
 private String name;
 public Iphone(String name) {
     this.name = name;
}
 public void show() {
    System.out.println("我是" + name + ",可以在屏幕上显示");
  }
}
class TouyingPhone {
    public Iphone phone;
    public TouyingPhone(Iphone p) {
        this.phone = p;
 }
 // 功能更强的方法
 public void show() {
     phone.show();
     System.out.println("还可以投影，在墙壁上显示");
 }
}
public class TestDecoration {
 public static void main(String[] args) {
     Iphone phone = new Iphone("iphone30");
     phone.show();
     System.out.println("===============装饰后");
     TouyingPhone typhone = newTouyingPhone(phone);
     typhone.show();
 }
}


IO流体系中的装饰器模式


IO流体系中大量使用了装饰器模式，让流具有更强的功能、更强的 灵活性。比如：

FileInputStream  fis = new FileInputStream(src);
BufferedInputStream  bis = new BufferedInputStream(fis);


显然BufferedInputStream装饰了原有的FileInputStream，让普通 的FileInputStream也具备了缓存功能，提高了效率。

文章标签：
前端开发
Java
缓存
设计模式
关键词：
ajax实战
ajax技术
ajax学习
ajax入门
ajax实战学习
童小纯
目录
相关文章
东方睿赢
|
11天前
|
前端开发 API 开发者
Python Web开发者必看！AJAX、Fetch API实战技巧，让前后端交互如丝般顺滑！
在Web开发中，前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例，详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理，全面展示了这两种技术的应用技巧，帮助Python Web开发者提升项目质量和开发效率。
东方睿赢
26 1
Ly001122
|
11天前
|
JSON 前端开发 JavaScript
java-ajax技术详解！！！
本文介绍了Ajax技术及其工作原理，包括其核心XMLHttpRequest对象的属性和方法。Ajax通过异步通信技术，实现在不重新加载整个页面的情况下更新部分网页内容。文章还详细描述了使用原生JavaScript实现Ajax的基本步骤，以及利用jQuery简化Ajax操作的方法。最后，介绍了JSON作为轻量级数据交换格式在Ajax应用中的使用，包括Java中JSON与对象的相互转换。
Ly001122
25 1
尹正杰
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例，展示了如何通过这些库发送GET和POST请求，并处理响应和错误。
尹正杰
54 10
React技术栈-react使用的Ajax请求库实战案例
土木林森
|
3月前
|
前端开发 Java UED
告别页面刷新时代：Struts 2 Ajax技术揭秘，轻松实现动态加载，Web应用焕然一新！
【8月更文挑战第31天】在Web应用开发中，用户体验至关重要。为减少页面刷新带来的不适，Ajax技术应运而生。Struts 2作为流行的Java EE框架，通过内置的Ajax支持简化了无刷新页面动态加载的实现。本文通过对比传统请求响应模式，展示了Struts 2如何轻松实现Ajax功能，提升了用户体验和开发效率，并灵活地实现了数据交换。然而，使用Ajax时还需注意SEO和跨域请求等局限性。
土木林森
40 0
1288912195458132
|
3月前
|
JSON 前端开发 JavaScript
Django入门到放弃之ajax
Django入门到放弃之ajax
1288912195458132
91 0
东方睿赢
|
4月前
|
前端开发 API 开发者
Python Web开发者必看！AJAX、Fetch API实战技巧，让前后端交互如丝般顺滑！
【7月更文挑战第13天】在Web开发中，AJAX和Fetch API是实现页面无刷新数据交换的关键。在Flask博客系统中，通过创建获取评论的GET路由，我们可以展示使用AJAX和Fetch API的前端实现。AJAX通过XMLHttpRequest发送请求，处理响应并在成功时更新DOM。Fetch API则使用Promise简化异步操作，代码更现代。这两个工具都能实现不刷新页面查看评论，Fetch API的语法更简洁，错误处理更直观。掌握这些技巧能提升Python Web项目的用户体验和开发效率。
东方睿赢
61 7
啊猪是的读来过倒
|
5月前
|
前端开发 Python
Django框架中Ajax GET与POST请求的实战应用
Django框架中Ajax GET与POST请求的实战应用
啊猪是的读来过倒
59 1
今天是几号
|
5月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
今天是几号
51 5
游客zn7mvnkypuy76
|
5月前
|
数据采集 Web App开发 前端开发
技术心得记录：如何用JAVA爬取AJAX加载后的页面（转载）
技术心得记录：如何用JAVA爬取AJAX加载后的页面（转载）
游客zn7mvnkypuy76
32 0
宁波阿成.
|
6月前
|
XML JSON 前端开发
Ajax – JSON入门指南
Ajax – JSON入门指南
宁波阿成.
56 1

热门文章

最新文章

  • 1
    ajax省市县三级联动
  • 2
    15.4. Ajax + JSON
  • 3
    jquery ajax return值 没有返回 的解决方法
  • 4
    最简单的Ajax
  • 5
    ASP.NET与JQUERY的AJAX文件上传 视频课件+源码Demo
  • 6
    ajax教程
  • 7
    Ext.Ajax.request和formPanel.getForm().submit两种提交方法的异同
  • 8
    bboss mvc处理ajax get方法中文乱码方式纪实
  • 9
    Firefox AJAX请求readyState = 0，status = 0问题
  • 10
    由基础触类旁通--Ajax调用WebService的简单例子
  • 1
    深度剖析：AJAX、Fetch API如何成为Python后端开发者的最佳拍档！
    90
  • 2
    从零到精通，AJAX与Fetch API让你的Python Web前后端交互无所不能！
    39
  • 3
    颠覆传统！AJAX、Fetch API与Python后端，开启Web开发新篇章！
    37
  • 4
    告别‘老司机’时代，AJAX与Fetch API让你的前端与Python后端无缝对接！
    59
  • 5
    Python Web开发者必看！AJAX、Fetch API实战技巧，让前后端交互如丝般顺滑！
    61
  • 6
    惊艳全场的秘诀！AJAX、Fetch API与Python后端，打造令人惊叹的Web应用！
    69
  • 7
    JavaScript进阶 - AJAX请求与Fetch API
    101
  • 8
    js【详解】ajax （含XMLHttpRequest、 同源策略、跨域、JSONP）
    51
  • 9
    爬虫进阶：Selenium与Ajax的无缝集成
    150
  • 10
    JavaScript进阶 - AJAX请求与Fetch API
    140

    • 相关课程

    更多
  • Ajax 前端开发入门与实战
  • Ajax入门
  • 零基础学前端HTML+CSS
  • JavaScript入门与实战
  • PHP进阶教程 - 由浅入深掌握面向对象开发 - 第二阶段
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • 2021前端热门技术解读
  • 现代Javascript高级教程
  • 《前端代码是怎样智能生成的》
    • 下一篇
    阿里云OSS设置跨域访问