异步交互技术Ajax

这篇具有很好参考价值的文章主要介绍了异步交互技术Ajax。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Ajax

  • 概念:Asynchronous JavaScr And XML 异步的JavaScript和XML
  • 作用:
    • 数据交换:通过Ajax可以给服务器发送请求,并获取服务响应的数据
    • 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想,用户是否可用的校验等

同步与异步

  • 同步请求过程
    • 异步交互技术Ajax,Java Web学习跟踪笔记,ajax,okhttp,前端

    • 浏览器页面在发送请求给服务器,在服务器处理请求的过程中,浏览器页面不能做其他的操作。只能等到服务器响应结束后才能,浏览器页面才能继续做其他的操作。
  • 异步请求过程
    • 异步交互技术Ajax,Java Web学习跟踪笔记,ajax,okhttp,前端

    • 浏览器页面发送请求给服务器,在服务器处理请求的过程中,浏览器页面还可以做其他的操作。

原生Ajax(基本不用)

  • 准备数据地址(本地数据或者链接数据)
  • 创建XMLHttpRequest对象:用于和服务器交换数据
  • 向服务器发送请求
  • 获取服务器响应数据 

具体代码如下:(我访问的是本地数据,可能会出现无法获取的问题,请参照文章解决)

写文章-CSDN创作中心

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ajax 获取本地文件数据</title>
  </head>
  <body>
    <button onclick="getData()">获取数据</button>
    <div id="result"></div>

    <script>
      function getData() {
        // 1.创建XMLHttpRequest对象
        var xmlhttp = new XMLHttpRequest();

        // 3.获取响应数据
        xmlhttp.onreadystatechange = function () {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var jsonData = JSON.parse(xmlhttp.responseText);

            // 处理 JSON 数据
            var result = "";
            for (var i = 0; i < jsonData.length; i++) {
              var name = jsonData[i].name;
              var age = jsonData[i].age;
              var city = jsonData[i].city;

              // 构建结果字符串
              result +=
                "Name: " +
                name +
                "<br>Age: " +
                age +
                "<br>City: " +
                city +
                "<br><br>";
            }

            // 更新页面内容
            document.getElementById("result").innerHTML = result;
          }
        };

        // 2.发送异步请求
        xmlhttp.open("GET", "ajax.json", true);
        xmlhttp.send();
      }
    </script>
  </body>
</html>

运行后点击按钮 

 异步交互技术Ajax,Java Web学习跟踪笔记,ajax,okhttp,前端

Axios

  • 介绍:Axios对原生的Ajax进行了封装,简化了书写,快速开发。
  • 官网:​​​​Axios 
  • Axios的使用
    • 1.引入Axios的js文件
    • 使用Axios发送请求,并获取响应结果
      • get请求
      • post请求
  • 请求方式的别名
    • axios.get(url,[,config]):发送get请求、[,config]表示其他的配置信息,[]中的内容可选
    • axios.delete(url,[,config]):发送post请求,
    • axios.post(url,[data[,config]]):
    • axios.put(url,[,data[,config]]):

具体代码如下:(ps:由于提供的url地址已经失效,在点击按钮无法实行最终效果,仅供参考)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ajax-Axios</title>
    <!-- 引入Axios的js文件 -->
    <script src="js/axios-0.18.0.js"></script>
  </head>
  <body>
    <input type="button" value="获取数据GET" onclick="get()" />

    <input type="button" value="删除数据POST" onclick="post()" />
  </body>
  <script>
    function get() {
      //通过axios发送异步请求-get
      // axios({
      //     method: "get",
      //     url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
      // }).then(result => {
      //     console.log(result.data);
      // }) .then为成功回调,即请求成功后进行的操作

      axios
        .get("http://yapi.smart-xwork.cn/mock/169327/emp/list")
        .then((result) => {
          console.log(result.data);
        });
    }

    function post() {
      //通过axios发送异步请求-post
      // axios({
      //     method: "post",
      //     url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
      //     data: "id=1"
      // }).then(result => {
      //     console.log(result.data);
      // })

      axios
        .post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById", "id=1")
        .then((result) => {
          console.log(result.data);
        });
    }
  </script>
</html>

Axios案例()

 提供的链接也失效了,展示意义不大,后面再来完善文章文章来源地址https://www.toymoban.com/news/detail-527152.html

到了这里,关于异步交互技术Ajax的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaWeb中异步交互的关键——Ajax

    AJAX (Asynchronous JavaScript And XML):异步的 JavaScript 和 XML。 我们先来说概念中的 JavaScript 和 XML , JavaScript 表明该技术和前端相关; XML 是指以此进行数据交换。 AJAX 作用有以下两方面: 与服务器进行数据交换 :通过AJAX可以给服务器发送请求,服务器将数据直接响应回给浏览器

    2024年02月03日
    浏览(43)
  • 通过ajax异步交互实现echarts绘图

    目录 前言 1.引入库 2.flask链接MYSQL读取数据 3.HTML页面echarts绘图 4.结果实现 总结: ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。 ECharts 遵循 Apache-2.0 开源协议,免费商用。 ECharts 兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等

    2023年04月14日
    浏览(58)
  • 探索异步交互:JavaScript AJAX 的全面指南

    ​🌈个人主页:前端青山 🔥系列专栏:JavaScript篇 🔖 人终将被年少不可得之物困其一生 依旧 青山 ,本期给大家带来JavaScript篇专栏内容:JavaScript-AjAx 目录 AJAX AJAX 的优势 AJAX 的使用 创建一个 ajax 对象 配置链接信息 发送请求 一个基本的 ajax 请求 ajax 状态码 readyStateChange resp

    2024年02月03日
    浏览(50)
  • BCSP-玄子Java开发之Java Web编程CH011_Ajax交互扩展

    $.ajax( )$.get() $.post() $.getJSON() .load() …… 常用参数 参数 类型 说明 url String 必选,发送请求的地址 data PlainObject 或 String 发送到服务器的数据 success Function(PlainObject result, String textStatus, jqXHR jqxhr) 请求成功后调用的函数参数result:可选,服务器返回的数据 dataType String 预期服务器

    2024年02月11日
    浏览(51)
  • 探索 AJAX 技术:实现动态数据交互的前端利器

    简介: AJAX(Asynchronous JavaScript and XML)技术在 Web 前端开发中扮演着重要的角色,它通过异步通信和动态内容更新,为用户带来更好的交互体验。本篇笔记将详细探索 AJAX 技术,并通过生动的代码演示来展示其在实现动态数据交互方面的优势。 1. 异步通信 异步通信是一种在

    2024年02月14日
    浏览(43)
  • 【Java】数据交换 Json 和 异步请求 Ajax

     🎄欢迎来到@边境矢梦°的csdn博文,本文主要讲解Java 中 数据交换和异步请求 JsonAjax 的相关知识🎄 🌈我是边境矢梦°,一个正在为秋招和算法竞赛做准备的学生🌈 🎆喜欢的朋友可以关注一下 🫰🫰🫰 ,下次更新不迷路🎆 Ps: 月亮越亮说明知识点越重要 (重要性或者难度

    2024年02月13日
    浏览(47)
  • Java网络开发(Asynchronous异步)—— 从 Jsp 到 Ajax 的 axios 到 vue & 同步请求 到 异步请求

    如果想做bilibili那样的边看视频边评论怎么搞?; 之前用jsp的方式,是无法实现这个需求的,因为每次评论后提交了评论,会把整个页面全部刷新,导致视频也回到未播放的初始状态,如下所示: 代码为: 这是因为,在每次浏览器请求后,只能等待服务器的响应,即这种方

    2024年02月09日
    浏览(59)
  • AJAX学习笔记6 JQuery对AJAX进行封装

    AJAX学习笔记5同步与异步理解_biubiubiu0706的博客-CSDN博客 AJAX请求相关的代码都是类似的,有很多重复的代码,这些重复的代码能不能不写,能不能封装一个工具类。要发送ajax请求的话,就直接调用这个工具类中的相关函数即可。  用JS发送AJAX请求回顾 响应结果一般是个字符串

    2024年02月09日
    浏览(37)
  • Java课题笔记~ Ajax

    1.1 概述 AJAX (Asynchronous JavaScript And XML):异步的 JavaScript 和 XML。 我们先来说概念中的 JavaScript 和 XML , JavaScript 表明该技术和前端相关; XML 是指以此进行数据交换。 1.1.1 作用 AJAX 作用有以下两方面: 与服务器进行数据交换 :通过AJAX可以给服务器发送请求,服务器将数据直

    2024年02月12日
    浏览(31)
  • AJAX学习笔记3练习

    AJAX学习笔记2发送Post请求_biubiubiu0706的博客-CSDN博客 1.验证用户名是否可用 需求,用户输入用户名,失去焦点--onblur失去焦点事件,发送AJAX POST请求,验证用户名是否可用 新建表 前端页面 WEB-INF下新建lib包引入依赖,要用JDBC 后端代码 还可以在input获得焦点时候对span里面的数据清空

    2024年02月09日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包