异步交互技术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模板网!

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

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

相关文章

  • 通过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日
    浏览(57)
  • JavaWeb中异步交互的关键——Ajax

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

    2024年02月03日
    浏览(43)
  • 探索异步交互: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日
    浏览(29)
  • Ajax学习笔记

    目录 ​​​​​​​ 是什么 工作原理基于的关键技术 XMLHttpRequest对象 异步通信 数据格式 XMLHTTPRequest对象 功能 回调函数 onreadystatechange onload onerror ontimeout 函数 属性 写法 基本格式 完整格式 Ajax可以发起的不同请求 GET请求 POST请求 DELETE请求 PUT请求 jQuery封装后的写法 Ajax全称

    2024年04月27日
    浏览(28)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包