Ajax入门

最新推荐文章于 2024-08-03 23:12:36 发布
最新推荐文章于 2024-08-03 23:12:36 发布
阅读量1.9k 收藏 15
点赞数 17
文章标签： ajax 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_64011014/article/details/139530687
版权

一、ajax介绍

        1、ajax(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。

        2、本身不是一种新技术，而是多个技术综合。用于快速创建动态网页的技术。

        3、一般的网页如果需要更新内容，必需重新加载个页面。

        4、而AJAX 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页 面的情况下，对网页的部分内容进行局部更新。

2、JQuery的GET方式实现AJAX

        1、核心语法：$.get(data],[callback],[type] )

                1.url:请求的资源路径。

                2.data:发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。

                3.callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。

                4.type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

        2、代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <form autocomplete="off">
        姓名：<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密码：<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    </form>
</body>

<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.为用户名绑定失去焦点事件
    $("#username").blur(function () {
        let username = $("#username").val();
        //2.jQuery的GET方式实现AJAX
        $.get(
            //请求的资源路径
            "userServlet",
            //请求参数
            "username=" + username,
            //回调函数
            function (data) {
                //将响应的数据显示到span标签
                $("#uSpan").html(data);
            },
            //响应数据形式
            "text"
        );
    });
</script>
</html>

        3、JQuery的POST方式实现AJAX

                1、核心语法：$.post(url,[data],[callback],[type]);

                        url:请求的资源路径。

                        data:发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。

                        callback:当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。

                        type:预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

        4、代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <form autocomplete="off">
        姓名：<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密码：<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    </form>
</body>

<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.为用户名绑定失去焦点事件
    $("#username").blur(function () {
        let username = $("#username").val();
        //2.jQuery的POST方式实现AJAX
        $.post(
            //请求的资源路径
            "userServlet",
            //请求参数
            "username=" + username,
            //回调函数
            function (data) {
                //将响应的数据显示到span标签
                $("#uSpan").html(data);
            },
            //响应数据形式
            "text"
        );
    });
</script>
</html>

        5、JQuery的通用方式实现AJAX

                1、核心语法：$.ajax({name:value,name:value,…});

                        1.url：请求的资源路径。

                        2.async：是否异步请求，true-是，false-否 (默认是 true)。

                        3.data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。

                        4.type：请求方式，POST 或 GET (默认是 GET)。

                        5.dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

                        6.success：请求成功时调用的回调函数。

                        7.error：请求失败时调用的回调函数。

        6、代码实现

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Title</title>
<%--引入js--%>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>

<input type="button" value="发送异步请求" οnclick="fun();">
<br>
<span id="span1"></span>
<br>
<span id="span2"></span>

</body>
<script>
    $("#span1").html(new Date().getTime());
    //给按钮绑定单击事件,发起ajax异步请求, 后台返回数,将后台返回的数据写到span2中
    function fun() {
        //ajax请求: 1.路径  2.数据  3.请求方式  4.返回的数据类型  5.回调函数
        $.ajax({
            //请求资源路径
            url:"/bb",
            //是否异步
            async:true,
            //请求参数 key=value的形式,多个键值对之间使用&隔开
            data:"username=tom&age=20",
            //请求方式
            type:"post",
            //数据形式
            dataType:"text",
            //请求成功后调用的回调函数 data就是后台返回的数据
            success:function (data) {
                //请求成功后执行 将响应的数据显示到span标签
                $("#span2").html(data);
            },
            error:function (data) {
                //请求失败之后执行
                $("#span2").html("请求失败");
            }
        });
    }
</script>
</html>

        7、小结

                1、AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML

               2、 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部 分内容进行局部更新。

               3、同步和异步

                        1、同步：服务器端在处理过程中，无法进行其他操作。

                        2、异步：服务器端在处理过程中，可以进行其他操作。

                4、GET 方式实现：$.get();

                5、POST 方式实现：$.post();

                        1、url：请求的资源路径。

                        2、data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。

                        3、Callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。

                        4、type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

                6、通用方式实现：$.ajax();

                        1.url：请求的资源路径。

                        2.async：是否异步请求，true-是，false-否 (默认是 true)。

                        3.data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。

                        4.type：请求方式，POST 或 GET (默认是 GET)。

                        5.dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

                        6.success：请求成功时调用的回调函数。

                        7.error：请求失败时调用的回调函数。

二、JSON的处理

        1、json回顾

                1.JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。

                2.它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。

                3.简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和生成，并有效的 提升网络传输效率。

        2、创建格式

                基本规则

                据在名称/值对中：json数据是由键值对构成的

                键用引号(单双都行)引起来，也可以不使用引号

                值得取值类型：

                        数字（整数或浮点数）

                        字符串（在双引号中）

                        逻辑值（true 或 false）

                        数组（在方括号中） {"persons":[{},{}]}

                        对象（在花括号中） {"address":{"province"："陕西"....}}

                        null

                数据由逗号分隔：多个键值对由逗号分隔

                花括号保存对象：使用{}定义json 格式

                方括号保存数组：[]

 //1.定义基本格式
var person = {"name": "张三", age: 23, 'gender': true};

//2.嵌套格式   {}———> []
var persons = {
    "persons": [
        {"name": "张三", "age": 23, "gender": true},
        {"name": "李四", "age": 24, "gender": true},
        {"name": "王五", "age": 25, "gender": false}
    ]
};

//3.嵌套格式   []———> {}
var ps = [{"name": "张三", "age": 23, "gender": true},
          {"name": "李四", "age": 24, "gender": true},
          {"name": "王五", "age": 25, "gender": false}];

         2、JSON转换工具的介绍

                我们除了可以在 JavaScript 中来使用 JSON 以外，在 JAVA 中同样也可以使用 JSON。

                JSON 的转换工具是通过 JAVA 封装好的一些 JAR 工具包。

                可以将 JAVA 对象或集合转换成 JSON 格式的字符串，也可以将 JSON 格式的字符串转成 JAVA 对象。

  • Jackson：开源免费的 JSON 转换工具，SpringMVC 转换默认使用 Jackson。

    • 导入 jar 包。

      1. 创建核心对象。

      2. 调用方法完成转换。

三、JSON转换练习

        1、对象json，json转对象

package com;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.jupiter.api.Test;
import pojo.Student;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Collections;
import java.util.HashMap;
/**
 * @author 86136
 */
public class Test01 {
    //对象->JSON  在JSON格式中. {}就代表一个对象, []代表数组/集合
    @Test
    public void test1() throws IOException {
        //1.创建jackson和新对象
        ObjectMapper mapper = new ObjectMapper();
        //2.创建Student对象
        Student student = new Student(1, "苏沐橙", "成都");
        //3.将Student对象=>JSON格式
        String s = mapper.writeValueAsString(student);
        //{"id":1,"name":"苏沐橙","address":"成都"}
        System.out.println(s);
        //4.JSON=>Student对象
        Student stu = mapper.readValue(s, Student.class);
        //Student{id=1, name='苏沐橙', address='成都'}
        System.out.println(stu);
    }
    //list集合->JSON
    @Test
    public void test02() throws IOException {
        ObjectMapper mapper = new ObjectMapper();
        ArrayList<Object> list = new ArrayList<>();
        Collections.addAll(list,
                new Student(1,"苏沐橙","成都"),
                new Student(2,"瑶瑶","武汉"),
                new Student(2,"陈雨舒","北京"));
        String s = mapper.writeValueAsString(list);
        System.out.println(s);

        //JSON->list
        ArrayList arrayList = mapper.readValue(s, ArrayList.class);
        System.out.println(arrayList);
    }

    //map->json
    @Test
    public void test03() throws JsonProcessingException {
        ObjectMapper mapper = new ObjectMapper();
        HashMap<String, Object> map = new HashMap<>();
        map.put("name","瑶瑶");
        map.put("address", "成都");
        String s = mapper.writeValueAsString(map);
        System.out.println(s);
    }

}

四、综合案例

        代码：

package web;

import com.fasterxml.jackson.databind.ObjectMapper;

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.util.HashMap;

/**
 * @author 86136
 */
@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //浏览器中文乱码
        resp.setContentType("application/json;charset=utf-8");
        //1、获取用户名
        String username = req.getParameter("username");
        //2、调用service层判断用户名是否存在
        //设置响应的数据格式为json
        HashMap<String, Object> map = new HashMap<>();
        if ("苏沐橙".equals(username)){
            //存在
            map.put("userExsit",true);
            map.put("msg","此用户名已有,请更换一个");
        }else {
            //不存在
            map.put("userExsit",false);
            map.put("msg","用户名可用");
        }
        //将map转为json，并且传递给客户端
        //将map转为json
        ObjectMapper mapper = new ObjectMapper();
        //并且传递给客户端
        mapper.writeValue(resp.getWriter(),map);
    }

}

        jsp代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>用户注册</title>
  </head>
  <body>
  <form>
    <input type="text" id="username" name="username" placeholder="请输入用户名">
    <span id="s_username"></span>
    <br>
    <input type="password" name="password" placeholder="请输入密码"><br>
    <input type="submit" value="注册"><br>
  </form>
  </body>
<script src="js/jquery-3.3.1.js"></script>
<script>
 //页面加载完成后
 $(function () {
   //给username绑定blur事件
   $("#username").blur(function () {
     //获取username文本输入框的值
     var username = $(this).val();
     //发送ajax请求
     $.get("findUserServlet",{username:username},function (data) {
       //判断userExsit键的值是否是true
       //alert(data);
       var span = $("#s_username");
       if (data.userExsit){
         //用户名存在
         span.css("color","red");
         span.html(data.msg);
       }else {
         //用户名不存在
         span.css("color","green");
         span.html(data.msg)
       }
     });
   });
 });
</script>
</html>

渣男あ
关注
  • 17
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
AJAX入门
05-24
**AJAX 入门** AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术使得网页更具交互性和响应性，改善了用户体验。AJAX 不是单一的新技术，而是多种...
Ajax入门教程
qq_22075913的博客
03-31 5211
Ajax 学习目标 了解Ajax的概念和作用 了解同步和异步的区别 能够使用jQuery的$.get()和$.post()发送Ajax请求 能够使用jQuery的$.ajax()方法发送Ajax请求 能够定义和解析json 能够使用Jackson转换json格式 能够使用fastjson转换json格式 第一章-JS的AJAX 知识点- AJAX的概述 1.目标 能够理解异步的概念 2.路径 什么是Ajax 什么是异步 为什么要学习Ajax 3.讲解 3
Ajax 入门
hexiechuangxin的博客
02-13 1639
Ajax 入门
ajax入门
dzz_bc的博客
05-24 519
AJAX    A  synchronous  J A vaScript and  X  ML 异步刷新传统方式如果校验用户名的话，需要提交验证，用户名存储在数据库中，只有提交才可与服务器交互。ajax是局部刷新的功能，下边的例子，就是可以直接和servlet交互，从而达到校验的目的。get方式jsp页面&lt;%@ page language="java" contentType="text/h...
java Ajax入门
qq_54088719的博客
12-01 7322
java Ajax入门 文章目录java Ajax入门前言一、同步和异步二、Ajax的使用JavaScript方法JQuery方法总结 前言 接下来整理一下Ajax相关的内容，AJAX（asynchronous js and xml），即异步的JavaScript和xml，它的主要作用就是让页面不必等待服务器返回整个页面信息，而可以通过异步的方式给服务器发送数据和获取数据，对页面进行局部刷新，是一种提高用户体验的技术。 一、同步和异步 同步和异步的主要区别如下； （1）同步：一个响应结束后才能发送下
Ajax入门案例
潘小蓝的博客
08-27 432
文章目录1、Ajax 简单介绍:2、原生Ajax:2.1 Ajax 简介:2.2 Ajax优点和缺点:2.3 请求报文和响应报文:2.4 原生方式实现Ajax异步:2.5 Jquery 方式实现 Ajax 异步: 1、Ajax 简单介绍: Ajax 是什么呢?为什么现在很多浏览器网站都在使用 Ajax 发送请求实现和后台的交互呢?带着些许的疑问,我们先来了解一下 Ajax 在网页上都有哪些应用。 应用一:搜索框提示: 可以看到,当我们在百度搜索“小潘”关键字的时候,会自动 产生一个 下拉提示的内容菜单
ajax新手教程,Ajax入门学习教程（一）
weixin_36265507的博客
08-05 425
1　什么是AJAXAJAX(Asynchronous JavaScript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML(当然，传输的数据不只是XML)。AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。与服务器...
python教程之ajax入门
09-07
### Python教程之AJAX入门知识点详解 #### 一、AJAX基础学习 1. **概念理解**： - **AJAX（Asynchronous JavaScript and XML）**：一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 - 主要通过在...
ajax图书管理项目
E___V___E的博客
08-03 339
不离开当前页面，显示单独内容，让用户操作功能：不离开当前页面，显示单独内容，供用户操作步骤：1.引入bootstrap.css和bootstrap.js 2.准备弹框标签，确认结构3.通过自定义属性，控制弹框的显示和隐藏。
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1518
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
html+css+js实现一个简单的电商商城首页
爱敲代码的卡拉米的博客
08-02 157
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等!绿泡泡：XiaoMei_NN。
探索WebKit之巅：开启现代网页应用的高效与兼容之旅
weixin_67239318的博客
08-03 378
随着现代网页应用的快速发展，WebKit作为先进的浏览器引擎，其在高效性和兼容性上的表现显得尤为重要。本文深入探讨了WebKit的架构和渲染机制，揭示了其在支持Web标准和提升浏览体验方面的关键技术。通过分析WebKit如何处理DOM操作、JavaScript执行与图形渲染等挑战，我们了解到优化WebKit性能不仅关乎算法和硬件的优化，还涉及网络协议和安全框架的理解。此外，本文讨论如何通过WebKit应对多设备和分辨率下的兼容性问题。掌握这些关键因素，对于开发者来说，是打造高效、兼容的现代网页应用的基础。
文章相关接口
最新发布
qq_74474809的博客
08-03 150
跟着黑马程序员学习SpringBoot3+Vue3
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 938
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
AJAX入门：新手快车道
"Ajax入门——电子书" Ajax，全称Asynchronous JavaScript and XML，是一种用于创建交互式网页应用的技术，它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。Ajax的核心在于利用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

渣男あ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值