ajax

最新推荐文章于 2024-10-19 19:30:00 发布
最新推荐文章于 2024-10-19 19:30:00 发布
阅读量413 收藏
点赞数
分类专栏： javaweb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kaijiayongshi001/article/details/121149907
版权

Ajax 异步 Jquery JSON 数据交互
关键词由CSDN通过智能技术生成

同步和异步

举个例子：普通B/S模式(同步) AJAX技术(异步) * 同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事 * 异步: 请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕 同步是指：发送方发出数据后，等接收方发回响应以后才发下一个 数据包的通讯方式。 异步是指：发送方发出数据后，不等接收方发回响应，接着发送下 个数据包的通讯方式

​ 易懂的理解:​ 异步传输: 你传输吧，我去做我的事了，传输完了告诉我一声 同步传输: 你现在传输，我要亲眼看你传输完成，才去做别的事

1. 什么是ajax?

==允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.==

2.Ajax的工作原理

AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。

3. ajax得实现方式基于 Jquery来实现

Jquery对js得一种封装 使我们操作dom元素更加简单。

（1）$.get(url,data,callback,type);

1. url: 请求服务器的地址。
2. data: 请求时携带的参数 格式是key/value  {key:value,key:value}
3. callback: 服务器响应成功后调用的函数。 function(msg){}   msg:服务器响应的内容。
4. type: 服务器响应的数据格式.  text 文本类型  json对象类型  xml这个不大用。

（2）$.post(url,data,callback,type); 和get方式一样

（3）$.ajax({
       url: 请求路径,
       data: 携带的数据
       type: 请求方式
       success: 服务器响应成功后触发的函数，
       dataType: 服务器响应的数据类型
 });

4. json对象

JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。 JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。 规则如下: 1）映射用冒号（“：”）表示。名称:值 2）并列的数据之间用逗号（“，”）分隔。名称1:值1,名称2:值2 3） 映射的集合（对象）用大括号（“{}”）表示。{名称1:值1,名称2:值2} 4） 并列数据的集合（数组）用方括号(“[]”)表示。 [ {名称1:值,名称2:值2}, {名称1:值,名称2:值2} ] 5 元素值可具有的类型：string, number, object, array, true, false, null

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/30
  Time: 14:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <%--①引入jquery得插件--%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.5.1.js"></script>
  </head>
  <body>
      <button onclick="ck()">点击我</button>
  </body>

<script>
     //表示一个json对象 {k:v,k:v} 简单
     // var p={"n":"刘一凡","a":17};
     // alert(p.n+"----->"+p.a);
     //集合json对象
     // var students=[
     //   {"name":"刘健","age":20},
     //   {"name":"王飞","age":18},
     //   {"name":"王一同","age":38}
     // ];
     // alert(students[0].name);

     // var p={
     //   "programmers":
     //           [
     //             {"firstName": "Brett", "email": "brett@newInstance.com" },
     //             {"firstName": "Jason", "email": "jason@servlets.com" }
     //           ]
     //
     // }
     //
     // alert(p.programmers[0].email);

     var people ={
       "programmers": [
         { "firstName": "Brett", "email": "brett@newInstance.com" },
         { "firstName": "Jason",  "email": "jason@servlets.com" },
         { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
       ],
       "authors": [
         { "firstName": "Isaac",  "genre": "science fiction" },
         { "firstName": "Tad", "genre": "fantasy" },
         { "firstName": "Frank",  "genre": "christian fiction" }
       ],
       "musicians": [
         { "firstName": "Eric",  "instrument": "guitar" },
         { "firstName": "Sergei", "instrument": "piano" }
       ]};
     window.alert(people.programmers[1].firstName);
     window.alert(people.musicians[1].instrument);

     function ck(){
          /*$.get("${pageContext.request.contextPath}/ajax01",function(result){ //
               //拿到结果使用
               alert(result);
          });*/
       /*$.post("${pageContext.request.contextPath}/ajax01",{"uname":"范龙飞","age":18},function(result){ //
         //拿到结果使用
         alert(result);
       });*/
       $.ajax({
           url: "${pageContext.request.contextPath}/ajax01",
           data: "uname=刘哥&age=19",
           type: "POST",
           success: function (result) {
                alert(result)
           }
       })
     }
</script>
</html>

 服务端响应的数据格式为json

 

 点击某个按钮使表格数据回显

 

ajax+dao+servlet+layui

 创建一个web工程并把所有jar放入web-inf/lib下

 

把layui得插件下载

  在网页中引入layui相关的css和js

编写自己的网页

 

编写servlet

编写dao

package com.ykq.dao;

import com.ykq.entity.User;

import java.util.ArrayList;
import java.util.List;

public class UserDao extends BaseDao{
    //查询所有记录
    public List<User> queryAll() {
         List<User> list=new ArrayList<>();
         try {
             getConnection();
             String sql = "select * from tb_user";
             ps = connection.prepareStatement(sql);
             resultSet = ps.executeQuery();
             while (resultSet.next()) {
                 User user = new User();
                 user.setUserId(resultSet.getInt("userId"));
                 user.setSex(resultSet.getInt("sex"));
                 user.setUsername(resultSet.getString("username"));
                 user.setRealname(resultSet.getString("realname"));
                 user.setPassword(resultSet.getString("password"));
                 list.add(user);
             }
         }catch (Exception e){
             e.printStackTrace();
         }finally {
             closeAll();
         }

         return list;
    }
    //查询该表得总条数
    public Integer count() {
        try {
            getConnection();
            String sql = "select count(*) as c from tb_user";
            ps = connection.prepareStatement(sql);
            resultSet = ps.executeQuery();
            while (resultSet.next()) {
                return resultSet.getInt("c");
            }
        }catch (Exception e){
            e.printStackTrace();
        }finally {
            closeAll();
        }
        return 0;
    }

}

 编写user实体和tableLayui实体

package com.ykq.entity;

public class User {
    private Integer userId;
    private String username;
    private String password;
    private String realname;
    private Integer sex;

    @Override
    public String toString() {
        return "User{" +
                "userId=" + userId +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", realname='" + realname + '\'' +
                ", sex=" + sex +
                '}';
    }

    public User() {
    }

    public User(Integer userId, String username, String password, String realname, Integer sex) {
        this.userId = userId;
        this.username = username;
        this.password = password;
        this.realname = realname;
        this.sex = sex;
    }

    public User(String username, String password, String realname, Integer sex) {
        this.username = username;
        this.password = password;
        this.realname = realname;
        this.sex = sex;
    }

    public Integer getSex() {
        return sex;
    }

    public void setSex(Integer sex) {
        this.sex = sex;
    }

    public Integer getUserId() {
        return userId;
    }

    public void setUserId(Integer userId) {
        this.userId = userId;
    }

    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 String getRealname() {
        return realname;
    }

    public void setRealname(String realname) {
        this.realname = realname;
    }
}

 

package com.ykq.util;

public class TableLayui {
    private Integer code=0; //状态码
    private String msg=""; //信息
    private Integer count; //总条数
    private Object data; //表格数据

    public TableLayui() {
    }

    public TableLayui(Integer code, String msg, Integer count, Object data) {
        this.code = code;
        this.msg = msg;
        this.count = count;
        this.data = data;
    }

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public Integer getCount() {
        return count;
    }

    public void setCount(Integer count) {
        this.count = count;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }
}

 

添加分页:

(1)网页

（2）servlet

（3）dao代码

 

 

 

暴龙战士001
关注
专栏目录
谷歌浏览器插件—— Ajax Interceptor
03-16
**Ajax Interceptor：深入理解与应用** Ajax Interceptor 是一款专为谷歌浏览器（Chrome）设计的插件，它允许开发者在Ajax请求发送后和响应返回前进行干预，从而实现对AJAX请求数据的修改。这款插件对于前端开发、...
Ajax
C_hydar的博客
02-11 5627
Ajax Ajax 是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。 Ajax = 异步 JavaScript + XML。 Ajax 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 Ajax 用于创造动态性更强的应用程序 Ajax 可用来与数据库进行动态通...
看这一篇就够了！-Ajax详解
Oriental_的博客
03-15 17万+
今天来聊一聊前后端交互的重要工具Ajax 结合上次跟大家分享的前后端交互基础，如果还没有看过的童鞋，以下是传送门 前后端交互详解 AJAX - 到底什么是Ajax? ajax 全名 async javascript and XML 是前后台交互的能⼒ 也就是我们`客户端给服务端发送消息的⼯具，以及接受响应的⼯具 是⼀个 默认异步执⾏机制的功能AJAX分为同步（async = false...
Ajax详解
这河里吗l的博客
06-20 2662
Ajax 的全称是 Asynchronous Javascript And XML（异步 JavaScript 和 XML）。通俗的理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax。Ajax可以实现网页与服务器之间的数据交互AJAX不是编程语言，是一种无需重新载入整个页面，能够更新部分网页的技术。
Ajax请求的五个步骤
热门推荐
chaopingyao的博客
06-02 17万+
Ajax请求的五个步骤 一、定义 1、什么是Ajax Ajax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。 2、同步与异步的区别 同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。 异步提交：当用户发送请
AJAX 详解
06-19 2万+
Ajax基础知识，及常见问题详解
AJAX简介
xpmhhh的博客
03-20 6911
AJAX: 全称Asynchronous JavaScript And XML，即异步JS和XML。 通过AJAX可以在浏览器中向服务器发送异步请求。 最大的优势：无刷新的获取数据。 Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 XML: 可扩展标记语言，被设计用来传输和存储数据。 与HTML的区别：HTML中都是预定义的标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。 以前Ajax是用XML格式的字符串进行数据交换，现在已经被JSON取代了。
Ajax请求
weixin_45030426的博客
03-25 1万+
ajax请求简介： ajax是利用前端的技术，向服务器发送一个异步请求 原有的请求在请求后需要刷新整张页面，
AJAX
风间琉璃の博客
08-04 4072
AJAX AJAX 不是一种新的编程语言而是一种使用现有标准的新方法，与服务器交换数据并更新部分网页的新技术（不用重新加载整个界面）。 AJAX = 异步JavaScript和xml。 1.创建AJAX对象 XMLHttpRequest 对象用于在后台与服务器交换数据 var xhr = new XMLHttpRequest(); 老版本的ie var xhr = new ActiveXObj...
Ajax 封装
weixin_47505105的博客
03-09 5089
介绍了原生ajax存在的问题，以及一步步完善对ajax进行封装
Ajax从入门到精通.pdf
05-09
Ajax从入门到精通.pdf 本书籍旨在深入浅出地介绍 Ajax 技术，从基础知识到高级应用，全面覆盖 Ajax 的核心概念、技术原理、实现方法和实践应用。书籍的主要内容包括： 1. Ajax 概述：本书首先介绍了 Ajax 的概念、...
chrome扩展插件获取ajax请求记录
04-06
在IT领域，尤其是在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，因为用户不再...
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
ajaxProxy:ajaxProxy 是一个ajax请求发送代理，支持链序请求和阻塞请求
06-03
ajaxProxy ajaxProxy is an ajax request sending proxy, which supports chain order request and blocking request ajaxProxy是一个异步请求的代码发送器，提供一种可读性更好的接口来实现异步请求的流程控制，...
Ajax处理错误信息（处理响应报文）
m0_75166176的博客
10-16 333
【代码】Ajax处理错误信息（报告错误原因）
【jQuery】jQuery 处理 Ajax 以及解决跨域问题的方式
m0_66584716的博客
10-17 1070
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术 原生创建 Ajax 的步骤：1. 创建 Ajax 对象；2. 连接到服务器；3. 发送请求；4. 接收返回值。
第四章 使用jQuery处理Ajax
weixin_62008675的博客
10-16 845
超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。产生跨域的原因：由浏览器的同源策略造成的（同域名，同端口，同协议）通过 HTTP POST 请求从服务器上请求数据。从服务器加载数据，并把返回的数据放入被选元素中。跨域，指的是浏览器不能执行其他网站的脚本。open(方法，文件名，同步异步)三个不同的域名，但是主域名是相同的。$().load()方法。
AJAX——POST 设置请求体参数
最新发布
Fan_web的博客
10-19 147
本文主要介绍了AJAX中关于POST如何设置请求体参数的内容，​下一篇继续分享AJAX中POST 设置请求头信息的学习。 ​
Ajax到JQuery Ajax学习指南
"这篇教程主要关注的是从基本的Ajax技术过渡到使用JQuery的Ajax功能的学习。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器交换数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值