Ajax （1）

已于 2024-03-10 08:19:20 修改
阅读量1k 收藏 7
点赞数 7
文章标签： ajax 前端 javascript
于 2024-03-07 14:14:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74227060/article/details/136471477
版权
本文介绍了Ajax技术，如何在浏览器与服务器间实现动态数据交互，使用axios库进行HTTP请求，包括GET、POST、参数传递、错误处理和登录界面示例。同时涵盖了HTTP协议、URL结构和响应状态码等内容。
摘要由CSDN通过智能技术生成

什么是Ajax：

浏览器与服务器进行数据通讯的技术，动态数据交互

axios库地址：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

如何使用呢？ 我们现有个感性的认识

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    axios({
      url: 'http://hmajax.itheima.net/api/province'
    }).then(result => {
      console.log(result)
      console.log(result.data.list)
    })
  </script>

获取如下：

展示到页面：

<body>
  <p></p>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    axios({
      url: 'http://hmajax.itheima.net/api/province'
    }).then(result => {
      const p=document.querySelector('p')
      p.innerHTML=result.data.list.join('<br>')
    })
  </script>
</body>

认识URL

URL是统一资源定位符，俗称网址，访问网络资源

组成： 协议、域名、资源路径

http协议：超文本传输协议，规定服务器和浏览器之间传输数据的格式

域名：标记服务器在互联网中的方位

资源路径：标记资源在服务器下具体位置

URL查询参数

浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据

语法：

http://xxx.com/xxx/xxx?参数名1=值1&参数名2=值2

axios-查询参数

语法： 使用axios提供的params选项（拿数据时的查询参数）

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    axios({
      url: 'http://hmajax.itheima.net/api/city',
      params: {
        pname: '河北省'
      }
    }).then(result => {
      console.log(result)
    })
  </script>

axios原码在运行时把参数名自动拼接到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, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

  <title>~</title>

  <link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico">
  <link rel="stylesheet" href="css/初始化表.css">
  <link rel="stylesheet" href="bootstrap\css\bootstrap.min.css">
  <meta name="keywords" content="..." />

  <style>
    /*写代码时始终要考虑权重问题！*/
    @font-face {
      font-family: 'icomoon';
      src: url('fonts/icomoon.eot?au9n7q');
      src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?au9n7q') format('truetype'),
        url('fonts/icomoon.woff?au9n7q') format('woff'),
        url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: block;
    }

    .center-block {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 500px;
    }
  </style>
</head>

<body>
  <div class="center-block">
    <form class="form-horizontal">
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Province</label>
        <div class="col-sm-10">
          <input type="text" class="form-control input1" id="inputEmail3" placeholder="Province">
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">City</label>
        <div class="col-sm-10">
          <input type="text" class="form-control input2" id="inputPassword3" placeholder="City">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button class="btn btn-default" type="button">查询</button>
        </div>
      </div>
    </form>
    <p>地区列表：</p>
    <ul class="list-group">
    </ul>
    </table>
  </div>



  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    const input1 = document.querySelector('.input1')
    const input2 = document.querySelector('.input2')
    const btn = document.querySelector('.btn')

    btn.addEventListener('click', () => {
      let pname = input1.value
      let cname = input2.value
      axios({
        url: 'http://hmajax.itheima.net/api/area',
        params: {
          pname: pname,
          cname: cname
        }
      }).then(result => {
        let list = result.data.list
        let str = list.map(item => `<li class="list-group-item">${item}</li>`
        ).join('')
        console.log(str)
        document.querySelector('.list-group').innerHTML = str
      })
    })

  </script>
</body>

</html>

常用请求方法

资源的操作：

get：get请求可以得到我们想要的具体的数据，then方法指定成功时候的回调（params）

post：操作post请求增加一条或者多条数据，可以采用JSON的形式传输数据

put：我们采put请求修改数据，可以具体修改某一条数据

delete：删除数据

method：请求方法，get可以省略

data：提交数据

<script>
    
      axios({
        url: 'http://hmajax.itheima.net/api/register',
        method:'post',
        data: {
          username: 'qwertyu123',
          password: '123456'
        }
      }).then(result => {
        console.log(result)
      })

  </script>

axios错误处理

语法：

在then后通过 . （点）语法调用catch方法，传入回调函数并定义形参

<script>
    
      axios({
        url: 'http://hmajax.itheima.net/api/register',
        method:'post',
        data: {
          username: 'qwertyu123',
          password: '123456'
        }
      }).then(result => {
        console.log(result)
      }).catch(error=>{
        alert(error.response.data.message)
      })
  </script>

浏览器是如何把内容发送给服务器的？

这与请求报文有关

HTTP协议-请求报文

http格式规定了浏览器发送及浏览器返回内容的格式

请求报文：浏览器按照http协议要求的格式，发送给服务器的内容

请求报文的组成：

请求行：请求方法（如post），URL，协议

请求头：以键值对的格式携带的附加信息，如：Content-Type

空格：分隔请求头，空行之后是发送给服务器的资源

请求体：发送到资源

在浏览器中可以看到这些内容

响应报文

响应报文：服务器按照http协议要求的格式，返回给浏览器的内容

响应报文的组成：

响应行（状态行）：协议，http响应状态码，状态信息

响应头：以键值对的格式携带的附加信息，如：Content-Type

空格：分隔响应头，空行之后是服务器返回的资源

响应体：返回的资源

http响应状态码

用来表明请求是否成功完成

2xx :请求成功

4xx:客户端错误

404：服务器找不到资源

接口

在使用AJAX与后端通讯，使用的URL，请求方法，以及参数

登录界面案例：

 <style>
    /*写代码时始终要考虑权重问题！*/
    @font-face {
      font-family: 'icomoon';
      src: url('fonts/icomoon.eot?au9n7q');
      src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?au9n7q') format('truetype'),
        url('fonts/icomoon.woff?au9n7q') format('woff'),
        url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: block;
    }

    .form-control {
      width: 400px;
    }

    .btn-block {
      width: 100px;
    }

    .alert {
      width: 400px;
      height: 50px;
      opacity: 0;
    }
  </style>
</head>

<body>
  <div class="container">

    <form class="form-signin">
      <h2 class="form-signin-heading">Please sign in</h2>
      <div class="alert " role="alert">...</div>
      <label for="input" class="sr-only">Username</label>
      <input type="text" id="input" class="form-control username" placeholder="Username" required autofocus>
      <label for="inputPassword" class="sr-only">Password</label>
      <input type="password" id="inputPassword" class="form-control password" placeholder="Password" required>
      <div class="checkbox">
        <label>
          <input type="checkbox" value="remember-me"> Remember me
        </label>
      </div>
      <button class="btn btn-lg btn-primary btn-block" type="button">Sign in</button>
    </form>

  </div>


  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>

    const btn = document.querySelector('.btn')
    const username = document.querySelector('.username')
    const password = document.querySelector('.password')
    const Alert = document.querySelector('.alert')

    function MyAlert() {
      Alert.style.opacity = 1
      if (username.value.length < 8 || password.value.length < 6) {
        Alert.classList.remove('alert-success')
        Alert.classList.add('alert-danger')
        Alert.innerHTML = '错误！'

      }
      else {
        Alert.classList.remove('alert-danger')
        Alert.classList.add('alert-success')

        Alert.innerHTML = '登录成功'
      }
      return false
    }


    btn.addEventListener('click', function () {
      let flag = MyAlert()
      setTimeout(() => {
        Alert.style.opacity = 0
      }, 2000)
      if (!flag)
      {
        return
      }
        axios({
          url: 'http://hmajax.itheima.net/api/login',
          method: 'post',
          data: {
            username: username.value,
            password: password.value
          }
        }).then(result => {
          console.log(result)
        }).catch(error => {
        })
    })

  </script>

</body>

form-serialize.js

可以快速获取表单元素，通过解构对象获得用户信息

象更
关注
ajax
huangyh技术栈
09-28 3万+
1.1 什么是ajax: Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML)，是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（无刷新...
ajax1.dll 开发实例 .net
05-26
**标题：“ajax1.dll 开发实例 .NET”** 在.NET框架下，开发人员经常使用Ajax技术来增强Web应用程序的交互性和用户体验。这里的“ajax1.dll”可能是一个专门为.NET平台设计的Ajax库，它包含了用于创建异步...
Ajax详解
这河里吗l的博客
06-20 3875
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
C_hydar的博客
02-11 5659
Ajax Ajax 是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。 Ajax = 异步 JavaScript + XML。 Ajax 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 Ajax 用于创造动态性更强的应用程序 Ajax 可用来与数据库进行动态通...
Ajax跨域问题
helpluozhao123的博客
11-03 3527
ajax 是不能跨域。那么怎么解决前端发送请求的跨域问题呢。超详细，1、设置响应头、2、通过jsonp 3、通过调用jQuery封装的jsonp 4、httpclient 5、nginx
java Ajax入门
qq_54088719的博客
12-01 7444
java Ajax入门 文章目录java Ajax入门前言一、同步和异步二、Ajax的使用JavaScript方法JQuery方法总结 前言 接下来整理一下Ajax相关的内容，AJAX（asynchronous js and xml），即异步的JavaScript和xml，它的主要作用就是让页面不必等待服务器返回整个页面信息，而可以通过异步的方式给服务器发送数据和获取数据，对页面进行局部刷新，是一种提高用户体验的技术。 一、同步和异步 同步和异步的主要区别如下； （1）同步：一个响应结束后才能发送下
Ajax请求
weixin_45030426的博客
03-25 1万+
ajax请求简介： ajax是利用前端的技术，向服务器发送一个异步请求 原有的请求在请求后需要刷新整张页面，
AJAX简介
xpmhhh的博客
03-20 6925
AJAX: 全称Asynchronous JavaScript And XML，即异步JS和XML。 通过AJAX可以在浏览器中向服务器发送异步请求。 最大的优势：无刷新的获取数据。 Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 XML: 可扩展标记语言，被设计用来传输和存储数据。 与HTML的区别：HTML中都是预定义的标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。 以前Ajax是用XML格式的字符串进行数据交换，现在已经被JSON取代了。
ajax 原生js操作ajax
fagdg的博客
07-25 1万+
1.不需要插件支持（一般浏览器且默认开启JavaScript即可）；2.用户体验极佳（不刷新页面即可获取可更新的数据）；3.提升Web程序的性能（在传递数据方面做到按需放松，不必整体提交）；4.减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）；...
Ajax1_Ajax基础.ppt
10-15
类似于javascript的Ajax，能使网页更加精彩地显现在用户视野里
Ajax从入门到精通.pdf
05-09
1. Ajax 概述：本书首先介绍了 Ajax 的概念、定义、历史背景和发展前景，帮助读者快速了解 Ajax 的基本概念和技术架构。 2. Ajax 的核心技术：Book 介绍了 Ajax 的核心技术，包括 HTML、JavaScript、DHTML 和 DOM，...
AJAX 全面教程：从基础到高级
最新发布
孤客科技
11-07 669
AJAX（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术。它允许网页在不重新加载整个页面的情况下，与服务器进行异步通信。AJAX 的核心在于 JavaScript 和 XMLHttpRequest 对象的使用，虽然现在 JSON 逐渐取代了 XML，但 AJAX 的概念依然适用。AJAX 是现代网页开发中不可或缺的技术，通过异步请求提升用户体验和网页性能。
【Ajax】跨域
weixin_45980065的博客
11-06 715
CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。//这里因为是满足同源策略的, 所以 url 可以简写。//3. 将 script 插入到文档中。//1. 创建 script 标签。//2. 设置标签的 src 属性。//获取 result 元素。//修改 p 标签的提示文本。//获取 input 元素。违背同源策略就是跨域。
【Vue 全家桶】4、Vue中的ajax（http请求方法）
椰子的职场成长记录
11-05 448
【代码】【Vue 全家桶】4、Vue中的ajax（http请求方法）
Ajax学习
supercool7的博客
11-04 342
5、启动tomcat测试！打开浏览器的控制台，当我们鼠标离开输入框的时候，可以看到发出了一个ajax的请求！是后台返回给我们的结果。AJAX：Asynchronous JavaScript and XML（异步的JavaScript和XML）1、配置web.xml和springmvc的配置文件。2、编写一个AjaxController。3、测试（及得处理json乱码问题）的情况下，能够更新部分网页的技术。4、编写index.jsp。3、 导入jquery。
Ajax基础教程：Web2.0与XmlHttpRequest实战
"Ajax1基础原理" Ajax1是Web开发中的一个重要概念，它代表Asynchronous JavaScript and XML（异步JavaScript和XML）。这个技术允许开发者在不刷新整个网页的情况下，通过后台与服务器交换数据并更新部分网页内容。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

象更

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

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

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

打赏作者

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

抵扣说明：

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

余额充值