Ajax和axios基础

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

AJAX

Asynchronous JavaScript And XML

异步的JavaScript和XML

Ajax和axios基础,ajax,okhttp,前端

作用

数据交换:

通过Ajax可以给服务器发送请求,服务器将数据直接响应回给浏览器.

异步交互:

可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术.

同步和异步

同步发送请求:

Ajax和axios基础,ajax,okhttp,前端

浏览器发送请求给服务器,服务器处理请求的过程中,页面不能做其他操作,直到服务器响应结束.

异步发送请求:

Ajax和axios基础,ajax,okhttp,前端

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

原生异步请求代码
1,创建XMLHttpRequest
var xmlHttpRequest = new XMLHttpRequest();
2,发送异步请求
xmlHttpRequest.open('Get','url');
xmlHttpRequest.send();
3,获取服务响应数据
xmlHttpRequest.onreadystatechange = function(){}

Axios

AJAX框架,对原生AJAX进行了封装

1,引入axios文件
<script src="axios文件路径">
2,发起axios请求
//axios的get请求
axios({
    method:"get",
    url:""
}).then((result)) => {
    console.log(result.data);
}
//axios的post请求
axios({
    method:"post",
    url:""
    data:"键=值"
}).then((result)) => {
    console.log(result.data);
}

method属性:设置请求方式

url属性:书写请求的资源路径,get请求需要把参数拼在url之后

data属性:post请求时作为请求体发送数据

then()传递一个匿名函数,在成功响应后调用,回复的result代表对响应数据封装的对象,通过result.data可以获取实际数据文章来源地址https://www.toymoban.com/news/detail-861045.html

axios的简化
get
axios.get("url").then((result) => {
	console.log(result.data);
});
post
axios.post("url","键=值").then((result) => {
	console.log(result.data);
});

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

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

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

相关文章

  • 前端同步异步讲解--Ajax(axios进阶)的相关操作

    之前我们讲到了数据在前后端传输是依赖xml文件,但是由于时代变迁,他也已经比逐步淘汰,json对象就逐步开始作为数据传输通道的桥梁,忘记的话可以去回顾文章对应的json对象 最全的前端知识之css与jsp介绍-CSDN博客 文章浏览阅读1k次,点赞31次,收藏21次。ok了,宝子们,

    2024年02月21日
    浏览(64)
  • 前端终止请求的三种方式(ajax、axios)

    一、原生ajax终止请求 1、abort() ​ XMLHttpRequest.abort() 方法用于终止 XMLHttpRequest 对象的请求,该方法没有参数,也没有返回值。当调用该方法时,如果对应 XMLHttpRequest 对象的请求已经被发送并且正在处理中,则会中止该请求;如果请求已经完成(即已经接收到完整的响应),则

    2024年02月09日
    浏览(46)
  • 前端请求数据方法 —— Ajax、Fetch、Axios、Get、Post

    Ajax :( “Asynchronous JavaScript and XML”(异步JavaScript和XML)的缩写)是一组Web开发技术,Ajax不是一种技术,而是一个编程概念。AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词,也就是说,只要用脚本发起通信,就可以叫做 AJAX 通信。 技术实现 用于演示的HTML(或 XHTML)和

    2024年01月22日
    浏览(56)
  • 前端框架前置学习(3) AJAX原理 XMLHttpRequest,Promise,简易axios函数封装

    1.获取图片文件对象  // 文件选择元素-change改变事件 document.querySelector(\\\'.upload\\\').addEventListener(\\\'change\\\', e = {       // 1. 获取图片文件       console.log(e.target.files[0]) 2.使用FormData携带文件  // 2. 使用 FormData 携带图片文件       const fd = new FormData()       fd.append(\\\'img\\\', e.target.files[0

    2024年02月03日
    浏览(52)
  • 【学一点儿前端】ajax、axios和fetch的概念、区别和易混淆点

    ajax是js异步技术的术语,早期相关的api是xhr,它是一个术语。 fetch是es6新增的用于网络请求标准api,它是一个api。 axios是用于网络请求的第三方库,它是一个库。 它的全称是:Asynchronous JavaScript And XML,翻译过来就是“异步的 Javascript 和 XML”。 很多小伙伴可能会误以为 Ajax

    2024年02月07日
    浏览(48)
  • 前端异步请求并解决跨域问题(Ajax+axios框架)、后端响应多个数据(JSON)

    目录 一、前后端同步异步请求 1.同步请求: 2.异步请求: 3.跨域问题(前端问题) 4.axios框架(封装后) 二、后端向前端响应多个数据-JSON 1.同步请求:         发送一个请求,回应请求,回应的内容会覆盖浏览器中的内容,这样会 打断 前端其他的正常操作。 2.异步请求:

    2024年02月07日
    浏览(68)
  • ajax+axios——统一设置请求头参数——添加请求头入参——基础积累

    最近在写后台管理系统(我怎么一直都只写管理系统啊啊啊啊啊啊啊),遇到一个需求,就是要在原有系统的基础上,添加一个仓库的切换,并且需要把选中仓库对应的id以请求头参数的形式传递到每一个接口当中。。。 如上图所示:需要在接口请求头中添加一个 Storeid 参数

    2024年01月25日
    浏览(47)
  • 【Ajax】如何通过axios发起Ajax请求

    ✍️ 作者简介: 前端新手学习中。 💂 作者主页: 作者主页查看更多前端教学 🎓 专栏分享:css重难点教学   Node.js教学 从头开始学习   ajax学习 Axios是专注于网络数据请求的库,相比于原生的XMLHttpRequest对象,axios简单易用。相比于Jquery,axios更加轻量化,只专注于网络数据请

    2024年02月02日
    浏览(54)
  • 【AJAX框架】AJAX入门与axios的使用

    在现代Web开发中,异步JavaScript和XML(AJAX)已经成为不可或缺的技术之一。AJAX使得网页能够在不刷新整个页面的情况下与服务器进行数据交互,为用户提供更加流畅和动态的体验。本文将介绍AJAX的基本概念,并深入探讨如何使用axios这一强大的JavaScript库进行AJAX请求。 AJAX的核

    2024年01月24日
    浏览(46)
  • 【Ajax】笔记-Axios与函数发送AJAX请求

    1、Axios是一个基于Promise的HTTP库,而Ajax是对原生XHR的封装; 2、Ajax技术实现了局部数据的刷新,而Axios实现了对ajax的封装。 ajax: 本身是针对MVC的编程,不符合现在前端MVVM的浪潮 基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案 JQuery整个项目太大,单纯使用

    2024年02月16日
    浏览(43)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包