AJAX介绍&使用&案例

最新推荐文章于 2024-07-18 10:15:56 发布
最新推荐文章于 2024-07-18 10:15:56 发布
阅读量889 收藏 21
点赞数 23
分类专栏： JavaWeb 文章标签： ajax okhttp 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rch041126/article/details/136961944
版权

文章目录

一、AJAX概念

在这里插入图片描述
异步和同步
在这里插入图片描述

二、AJAX快速入门

在这里插入图片描述

1、编写AjaxServlet，并使用response输出字符（后台代码）

package com.itheima.web.servlet;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 响应数据
        response.getWriter().write("hello ajax~");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

2、创建XMLHttpRequest对象：用于和服务器交换数据 & 3、向服务器发送请求 & 4、获取服务器响应数据

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<script>
    //1. 创建核心对象
    var xhttp;
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2. 发送请求
    xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet");
    xhttp.send();

    //3. 获取响应
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
               alert(this.responseText);
        }
    };


</script>

</body>
</html>

三、案例-验证用户是否存在

在这里插入图片描述

1、SelectUserServlet

package com.itheima.web.servlet;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet("/selectUserServlet")
public class SelectUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //1. 接收用户名
        String username = request.getParameter("username");

        //2. 调用service查询User对象

        boolean flag = true;

        //3. 响应标记
        response.getWriter().write("" + flag);


    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

2、register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="login.html">登录</a>
    </div>
    <form id="reg-form" action="#" method="get">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名已存在</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>


            <tr>
                <td>验证码</td>
                <td class="inputs">
                    <input name="checkCode" type="text" id="checkCode">
                    <img src="imgs/a.jpg">
                    <a href="#" id="changeImg">看不清？</a>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>

<script>

    //1. 给用户名输入框绑定 失去焦点事件
    document.getElementById("username").onblur = function () {
        //2. 发送ajax请求
        // 获取用户名的值
        var username = this.value;

        //2.1. 创建核心对象
        var xhttp;
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.2. 发送请求
        xhttp.open("GET", "http://localhost:8080/ajax-demo/selectUserServlet?username="+username);
        xhttp.send();

        //2.3. 获取响应
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                //alert(this.responseText);
                //判断
                if(this.responseText == "true"){
                    //用户名存在，显示提示信息
                    document.getElementById("username_err").style.display = '';
                }else {
                    //用户名不存在 ，清除提示信息
                    document.getElementById("username_err").style.display = 'none';
                }
            }
        };

    }




</script>
</body>
</html>

四、Axios异步框架

在这里插入图片描述
http://www.axios-http.cn

1、Axios快速入门

在这里插入图片描述

（1）、get

package com.itheima.web.servlet;

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("/axiosServlet")
public class AxiosServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("get...");

        //1. 接收请求参数
        String username = request.getParameter("username");
        System.out.println(username);

        //2. 响应数据
        response.getWriter().write("hello Axios~");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("post...");
        this.doGet(request, response);
    }
}

axios({
        method:"get",
        url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
    }).then(function (resp) {
        alert(resp.data);
    })

（2）、post

    axios({
        method:"post",
        url:"http://localhost:8080/ajax-demo/axiosServlet",
        data:"username=zhangsan"
    }).then(function (resp) {
        alert(resp.data);
    })

2、Axios请求方式别名（阅读性不好）

在这里插入图片描述

//get
    axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function (resp) {
        alert(resp.data);
    })
    
//post
    var jsObject = {name:"zhangsan"};

    axios({
        method:"post",
        url:"http://localhost:8080/ajax-demo/axiosServlet",
        data:jsObject
    }).then(function (resp) {
        alert(resp.data);
    })

五、JSON

JSON概念

在这里插入图片描述

1、JSON基础语法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>
    //1. 定义JSON字符串
    var json = {"name": "zhangsan", 
        "age": 23, 
        "addr": ["北京", "上海", "西安"]
    };
    //获取值
    alert(json.name);
</script>

</body>
</html>

2、JSON数据和Java对象转换

在这里插入图片描述
在这里插入图片描述

（1）、导入坐标

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.62</version>
        </dependency>

（2）、转换

User

package com.itheima.json;

public class User {

    private Integer id;
    private String username;
    private String password;


    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;
    }

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


package com.itheima.json;

import com.alibaba.fastjson.JSON;

public class FastJsonDemo {

    public static void main(String[] args) {
        //1. 将Java对象转为JSON字符串
        User user = new User();
        user.setId(1);
        user.setUsername("zhangsan");
        user.setPassword("123");

        String jsonString = JSON.toJSONString(user);
        System.out.println(jsonString);//{"id":1,"password":"123","username":"zhangsan"}


        //2. 将JSON字符串转为Java对象

        User u = JSON.parseObject("{\"id\":1,\"password\":\"123\",\"username\":\"zhangsan\"}", User.class);
        System.out.println(u);


    }
}

3、案例

在这里插入图片描述

（1）、查询所有

在这里插入图片描述

1、Web层
package com.itheima.web;

import com.alibaba.fastjson.JSON;
import com.itheima.pojo.Brand;
import com.itheima.service.BrandService;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.List;

@WebServlet("/selectAllServlet")
public class SelectAllServlet extends HttpServlet {
    private BrandService brandService = new BrandService();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 调用Service查询
        List<Brand> brands = brandService.selectAll();

        //2. 将集合转换为JSON数据   序列化
        String jsonString = JSON.toJSONString(brands);

        //3. 响应数据
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}
2、brand.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="addBrand.html"><input type="button" value="新增"></a><br>
<hr>
<table id="brandTable" border="1" cellspacing="0" width="100%">
    <tr>
        <th>序号</th>
        <th>品牌名称</th>
        <th>企业名称</th>
        <th>排序</th>
        <th>品牌介绍</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>三只松鼠</td>
        <td>三只松鼠</td>
        <td>100</td>
        <td>三只松鼠，好吃不上火</td>
        <td>启用</td>
        <td><a href="#">修改</a> <a href="#">删除</a></td>
    </tr>

    <tr align="center">
        <td>2</td>
        <td>优衣库</td>
        <td>优衣库</td>
        <td>10</td>
        <td>优衣库，服适人生</td>
        <td>禁用</td>

        <td><a href="#">修改</a> <a href="#">删除</a></td>
    </tr>

    <tr align="center">
        <td>3</td>
        <td>小米</td>
        <td>小米科技有限公司</td>
        <td>1000</td>
        <td>为发烧而生</td>
        <td>启用</td>

        <td><a href="#">修改</a> <a href="#">删除</a></td>
    </tr>
</table>

<script src="js/axios-0.18.0.js"></script>

<script>
    //1. 当页面加载完成后，发送ajax请求
    window.onload = function () {
        //2. 发送ajax请求
        axios({
            method:"get",
            url:"http://localhost:8080/brand-demo/selectAllServlet"
        }).then(function (resp) {
            //获取数据
            let brands = resp.data;
            let tableData = " <tr>\n" +
                "        <th>序号</th>\n" +
                "        <th>品牌名称</th>\n" +
                "        <th>企业名称</th>\n" +
                "        <th>排序</th>\n" +
                "        <th>品牌介绍</th>\n" +
                "        <th>状态</th>\n" +
                "        <th>操作</th>\n" +
                "    </tr>";

            for (let i = 0; i < brands.length ; i++) {
                let brand = brands[i];

                tableData += "\n" +
                    "    <tr align=\"center\">\n" +
                    "        <td>"+(i+1)+"</td>\n" +
                    "        <td>"+brand.brandName+"</td>\n" +
                    "        <td>"+brand.companyName+"</td>\n" +
                    "        <td>"+brand.ordered+"</td>\n" +
                    "        <td>"+brand.description+"</td>\n" +
                    "        <td>"+brand.status+"</td>\n" +
                    "\n" +
                    "        <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +
                    "    </tr>";
            }

            // 设置表格数据
            document.getElementById("brandTable").innerHTML = tableData;
        })
    }



</script>


</body>
</html>

（2）、新增品牌

在这里插入图片描述

1、Web层
package com.itheima.web;

import com.alibaba.fastjson.JSON;
import com.itheima.pojo.Brand;
import com.itheima.service.BrandService;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.BufferedReader;
import java.io.IOException;

@WebServlet("/addServlet")
public class AddServlet extends HttpServlet {

    private BrandService brandService = new BrandService();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //1. 接收数据,request.getParameter 不能接收json的数据
       /* String brandName = request.getParameter("brandName");
        System.out.println(brandName);*/

        // 获取请求体数据
        BufferedReader br = request.getReader();
        String params = br.readLine();

        // 将JSON字符串转为Java对象
        Brand brand = JSON.parseObject(params, Brand.class);


        //2. 调用service 添加
        brandService.add(brand);

        //3. 响应成功标识
        response.getWriter().write("success");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}
2、addBrand.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加品牌</title>
</head>
<body>
<h3>添加品牌</h3>
<form action="" method="post">
    品牌名称：<input id="brandName" name="brandName"><br>
    企业名称：<input id="companyName" name="companyName"><br>
    排序：<input id="ordered" name="ordered"><br>
    描述信息：<textarea rows="5" cols="20" id="description" name="description"></textarea><br>
    状态：
    <input type="radio" name="status" value="0">禁用
    <input type="radio" name="status" value="1">启用<br>

    <input type="button" id="btn"  value="提交">
</form>

<script src="js/axios-0.18.0.js"></script>

<script>
    //1. 给按钮绑定单击事件
    document.getElementById("btn").onclick = function () {
        // 将表单数据转为json
        var formData = {
            brandName:"",
            companyName:"",
            ordered:"",
            description:"",
            status:"",
        };
        // 获取表单数据
        let brandName = document.getElementById("brandName").value;
        // 设置数据
        formData.brandName = brandName;

        // 获取表单数据
        let companyName = document.getElementById("companyName").value;
        // 设置数据
        formData.companyName = companyName;

        // 获取表单数据
        let ordered = document.getElementById("ordered").value;
        // 设置数据
        formData.ordered = ordered;

        // 获取表单数据
        let description = document.getElementById("description").value;
        // 设置数据
        formData.description = description;

        let status = document.getElementsByName("status");
        for (let i = 0; i < status.length; i++) {
            if(status[i].checked){
                //
                formData.status = status[i].value ;
            }
        }

        console.log(formData);
        //2. 发送ajax请求
        axios({
            method:"post",
            url:"http://localhost:8080/brand-demo/addServlet",
            data:formData
        }).then(function (resp) {
            // 判断响应数据是否为 success
            if(resp.data == "success"){
                location.href = "http://localhost:8080/brand-demo/brand.html";
            }
        })
    }



</script>
</body>
</html>

、

仁人众
关注
  • 23
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax常用案例,AJAX实例
weixin_34649252的博客
08-05 2022
AJAX实例用户页面发起一个请求， 使用servlet输出数据到jsp练习使用HttpServletResposne输出。pint使用servlet输出一个字符串响应ajax请求根据省份id查询省份名称需求：用户在文本框架输入省份的编号id，在其他文本框显示省份名称● 项目环境准备：数据库：springdb数据表：● 省份信息表：CREATE TABLE `province` (`id` int(...
AJAX_入门&经典案例
xglfire的博客
06-28 4926
AJAX_入门&经典案例 AJAX 快速入门 AJAX 介绍 AJAX(Asynchronous JavaScript And XML)：异步的JavaScript 和 XML。 本身不是一种新技术，而是多个技术综合。用于快速创建动态网页的技术。 一般的网页如果需要更新内容，必需重新加载个页面。 而 AJAX 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页 面的情况下，对网页的部分内容进行局部更新。 异步 同步 原生 JavaScript 实现
Ajax&Json（包含案例）
...
08-07 2256
ASynchronous JavaScript And XML 异步的JavaScript 和 XML异步和同步：客户端和服务器端相互通信的基础上​​ Ajax是一种在的情况下，能够更新部分网页的技术。 [1] 通过在后台与服务器进行少量数据交换，Ajax可以。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，提升用户的体验。 ​ 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。 2.JQeury实现方式 1.$.ajax() 语法：$.ajax({键值对});
$.ajax案例详细参数介绍
热门推荐
Ghjkku的博客
09-20 7万+
【代码】$.ajax案例详细参数介绍。
Ajax 使用案例
qq_25775675的博客
11-26 741
Ajax 使用案例
Vue——Ajax介绍以及案例和Axios使用
测试
03-22 3182
在客户端向服务器发送请求之后，直到服务器处理后逻辑产生响应之后客户端才能执行其他操作。比如在搜索框内输入一个网站的网址访问后，只有整个html页面加载出来了，但是点击任何一个地方都没法跳转，只有整个页面完全加载完成，在服务器端响应完成之后，在网页上的操作才会有反应。
$.ajax()方法使用案例
侯春强的博客
10-17 6111
$.ajax()方法使用案例 需要引入jquery文件，本案例使用的是 jquery-2.0.0.js 1、ajax.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> $(function() { $("#submit").click(fu
Ajax案例实战分析
weixin_45688123的博客
07-25 807
Ajax，全称为AsynchronousJavaScriptandXML，是利用JavaScript在保证页面链接不改变的情况下，滑动某一区域会不断地出现新的数据，是与服务器交换数据并更新部分网页的技术。通过对爬取NBA微博数据案例来体会Ajax分析和爬取的基本流程，由于Ajax接口大部分都是以JSON的格式返回数据，在一定程度上减少了对数据提取的工作量。......
AJAX&JSON
限定私语的博客
06-05 2316
AJAX 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML 异步和同步：客户端和服务器端相互通信的基础上 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况
Ajax的基本使用
weixin_67235801的博客
05-04 7185
Ajax的基本使用，无刷新登录，使用Ajax实现搜索自动提示
AJAX&JQuery详细用法说明
09-18
采用案例驱动法，通过实际项目练习，帮助学习者理解和掌握AJAX及JQuery的使用，包括异步校验、数据获取和处理、动态页面更新等技能。 通过以上内容，学习者不仅可以理解AJAX的基本原理，还能熟练运用JQuery简化...
Ajax提交post请求案例分析
12-10
前言：博主之前有篇文章是快速入门Ajax ，主要是利用Ajax做简单的get请求，今天给大家分享一篇利用Ajax提交post请求，以及使用post时需要注意的地方，还是以案例的方式告诉大家。 案例： 注册表单 文件结构图： 06-...
Ajax使用项目案例
07-13
在案例中的`AjaxShow`可能就是一个展示如何创建和使用XMLHttpRequest的实例。 1. **发送请求**：在JavaScript中，我们通常会使用XMLHttpRequest对象的`open()`方法来初始化一个请求，然后使用`send()`方法发送请求...
ajax的使用及案例
06-05
jQuery库简化了Ajax的使用，提供了`.ajax()`, `.get()`, `.post()`, `.getJSON()`等方法。例如： ```javascript $.ajax({ url: 'your-url', type: 'GET', dataType: 'json', success: function(data) { // ...
Ajax使用JSON数据格式案例
10-25
Ajax 使用 JSON 数据格式是一种常见的在客户端与服务器之间进行异步数据交换的技术。JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，因其简洁、易于理解和处理的特点，成为 AJAX 应用中的首选...
webSocker消息推送，ajax轮询
weixin_43617604的博客
07-18 242
但是，传统的AJAX并不直接支持实时消息推送，因为它基于请求-响应模式。为了模拟消息推送，你可以使用轮询（polling）或长轮询（long-polling）技术。但是，传统的AJAX并不直接支持实时消息推送，因为它基于请求-响应模式。为了模拟消息推送，你可以使用轮询（polling）或长轮询（long-polling）技术。一旦建立了WebSocket连接，服务器和客户端就可以随时向对方发送消息，而不需要像AJAX那样频繁地发起请求。轮询是定期向服务器发送请求，以检查是否有新的消息。
初学SpringMVC之 Ajax 篇
m0_58838332的博客
07-13 599
Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页，能够更新部分网页的技术。XMLHttpRequest（简称 xhr），是浏览器提供的 JS 对象，通过它可以请求到服务器上的数据资源。Ajax 不是编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序技术。使用 Ajax 技术的网页，通过在后台服务器进行少量的数据交换，就可以实现。xhr 允许进行异步请求，它可以在后台执行，而不会阻止页面的其他操作。（上述仅实现类似异步的模样，局部改变）
AJAX基本用法
最新发布
2303_80137294的博客
07-18 784
JavaScript中的Promise是一种处理异步操作的编程模式，它提供了更加优雅的方式来组织和管理异步代码，相较于传统的回调函数，Promise能够避免回调地狱（Callback Hell），使得代码更加清晰和易于维护。在JavaScript中，当多个异步操作依赖于彼此的结果时，如果使用传统的回调函数处理，代码会迅速变得嵌套复杂，难以阅读和维护，这种现象被称为“回调地狱”（Callback Hell）。)后面，多个参数之间用&符号分隔。语法，它基于Promise，提供了更加简洁的异步编程方式。
【精简版】jQuery 中的 Ajax 详解
weixin_46485638的博客
07-15 845
精简的 jQuery 中的 Ajax 详解。
JavaScript Ajax使用案例
03-30
以下是一个简单的JavaScript Ajax使用案例，用于获取服务器上的数据并将其显示在页面上： HTML 代码： ```html <!DOCTYPE html> <title>Ajax Example <script src="https://ajax.googleapis....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值