当前位置: 首页 > article >正文

Ajax 2024/3/31

Ajax

异步的Javascript和XML

作用:

数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。

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

原生Ajax

1.准备数据地址

2.创建XMLHttpRequest对象:用于和服务器交换数据

3.向服务器发送请求

4.获取服务器响应数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<input type="button" value="获取数据" onclick="getData()">
		
		<div id="div1"></div>
		
	</body>
	
	<script>
		// 1.创建XMLHttpRequest
		var xmlHttpRequest=new XMLHttpRequest();
		
		//2.发送异步请求
		xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
		xmlHttpRequest.send();
		
		//3.获取服务响应数据
		xmlHttpRequest.onreadystatechange=function(){
			if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
				document.getElementById('div1').innerHTML=xmlHttpRequest.responseText;
			}
		}
	</script>
</html>

Axios

对原生的Ajax进行了封装,简化书写,快速开发。

Axios入门

1.引入Axios的js文件

2.使用Axios发送请求,并获取响应结果

    axios({
	    method:"get",
    	url:"xxx"
    }).then((result)=>{
	    console.log(result.data);
    });
		axios({
			method:"post",
			url:"xxx",
			data:"id=1"
		}).then((result)=>{
			console.log(result.data);
		});

前后端分离开发

api接口文档

帮助实现前后端分离

YApi 接口文档管理平台

1.添加项目

2.添加分类

3.添加接口

 mock服务

为前端生成测试数据

前端工程化

是指在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。

vue-cli

是Vue官方提供的一个脚手架,用于快速生成一个Vue的项目模板。

功能:

统一的目录结构

本地调试

热部署

单元测试

集成打包上线

依赖环境:NodeJS 

Vue组件库Element

Vue路由

打包部署


http://www.kler.cn/a/290972.html

相关文章:

  • 【Lua热更新】上篇
  • WordPress 去除?v= 动态后缀
  • React:闭包陷阱产生和解决
  • Pygubu-Designer 使用指南
  • WebPlotDigitizer 使用指南
  • leecode416.分割等和子集
  • 零售自动化新趋势:AI 智能名片与 S2B2C 商城系统助力零售业变革
  • git常用之已存在的目录转换为一个 GIT 项目并托管到github仓库
  • 每天五分钟深度学习:广播机制(以python语言为例)
  • 【大数据】生活中三大数据的概念及其关系
  • 新品上市丨科学级新款制冷相机sM4040A/sM4040B
  • 【ShuQiHere】深入理解递归:从基础概念到实际应用
  • ffmpeg音视频开发从入门到精通——ffmpeg日志及目录操作
  • Java开发笔记--通用消息组件设计(移动短信、华为短信、163邮件)
  • chapter03 流程语句 知识点Note
  • JS基础-ClassList -移动端插件的引入-touch事件-sessionStorage 和 localStorage
  • STM32—I2C的基本时序,MU6050的ID读取
  • 云计算和传统IT相比,有哪些优势?
  • map和set的区别和底层实现是什么?map取值的 find,[],at方法的区别
  • GitLab 是什么?GitLab使用常见问题解答
  • 论文浅尝 | TaxoLLaMA: 用基于WordNet的模型来解决多个词汇语义任务(ACL2024)
  • 微信小程序npm扩展能力探究
  • Linux性能监控神器:深入nmon详解与使用
  • 经验笔记:Maven 与 Gradle —— Java 构建工具对比
  • 每日一练4:牛牛的快递(含链接)
  • @DateTimeFormat和@JsonFormat的区别和使用场景