您现在的位置是：主页 > news > 源码资源下载站/网站建设公司大型

源码资源下载站/网站建设公司大型

admin2025/6/25 21:52:32【news】

简介源码资源下载站,网站建设公司大型,室内装修设计图用什么软件,国内做网站用的程序前端发送异步的三种方式使用阿里api在线测试工具在线工具网址: http://rap2.taobao.org/account/login 使用很简单,不会的参考百度我设置的api测试接口我的测试网址:(get请求) http://rap2api.taobao.org/app/mock/261964/findall 三种方式 axios 说明: 为了方便测试…

源码资源下载站,网站建设公司大型,室内装修设计图用什么软件,国内做网站用的程序前端发送异步的三种方式使用阿里api在线测试工具在线工具网址: http://rap2.taobao.org/account/login 使用很简单,不会的参考百度我设置的api测试接口我的测试网址:(get请求) http://rap2api.taobao.org/app/mock/261964/findall 三种方式 axios 说明: 为了方便测试…

前端发送异步的三种方式

使用阿里api在线测试工具

在线工具网址:

http://rap2.taobao.org/account/login

使用很简单,不会的参考百度

我设置的api测试接口

我的测试网址:(get请求)

http://rap2api.taobao.org/app/mock/261964/findall

三种方式

axios

说明:

为了方便测试,我js库使用的是cdn方式引入

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<linkhref="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"rel="stylesheet">
<scriptsrc="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!-- 引入外部的css文件 -->
<link rel="stylesheet" type="text/css" href="css/emplist.css"><!-- 引入vue.js --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 引入axios.js -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script></head>
<body><div id="app">
<!-- 把empList数组里面的数据显示，使用v-for -->
<hr>
<table class="table table-condensed">
<tr v-for="emp in empList">
<td>{{emp.id}}</td>
<td>{{emp.name}}</td>
<td>{{emp.job}} </td>
<td>{{emp.salary}}</td>
</tr>
</table>
<div v-for="emp in empList">
{{emp.id}}  =========> {{emp.name}}  --->{{emp.job}}  ---->{{emp.salary}}
</div></div><script>/*** axios发送ajax请求的步骤* 1.引入vue.js和axios.js这两个文件* 2.发送ajax请求*/new Vue({el:'#app',//固定结构data:{ //在data定义变量和初始值//定义变量,值空数组empList:[]},created(){//页面渲染之前执行//调用定义的方法this.getempList()},methods:{//编写具体的方法//创建方法,查询所有用户数据getempList(){//使用axios发送ajax请求//axion.提交方式("请求接口路径").then(箭头函数).catch(箭头函数)axios.get("http://rap2api.taobao.org/app/mock/261964/findall").then(response=>{//console.log(response);this.empList = response.dataconsole.log(this.empList)}).catch(error=>{console.log("axios发送ajax请求失败");})}}})</script>
</body>
</html>

jQuery

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<head><style> /* 这里可以书写css样式 */table{ border:2px solid red;/* 设置表格的边框和单元格的边框合并 */border-collapse: collapse;/* 设置当前元素的左右外边距自适应，即设置当前元素水平方向居中 */margin-left:auto;margin-right:auto;/* 设置背景颜色 */background: lightgrey;}td,th{border:2px solid red;/* 设置单元格的边框和内容之间的距离 */padding:5px;}h1{/* 让当前元素的内容居中显示 */text-align: center;}</style><!-- 引入jQuery使用cdn的方式引入jQuery -->
<script  src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<body><button id="btn1">测试按钮</button><button id="btn2">测试jQuery的ajax请求</button><hr><table><tr><td>序号</td><td>id</td><td>姓名</td><td>工作</td><td>薪资</td></tr></table><script>$("#btn1").click(function(){alert("测试是否引入jQuery,并测试单击事件是否成功");});$("#btn2").click(function(){$.getJSON("http://rap2api.taobao.org/app/mock/261964/findall",function(res){console.log(res);//使用class选择器$(".tr2").empty();for (var i = 0; i < res.length; i++) {var xh = $("<td></td>").append(i);var id = $("<td></td>").append(res[i].id);var name = $("<td></td>").append(res[i].name);var job = $("<td></td>").append(res[i].job);var salary = $("<td></td>").append(res[i].salary);var tr = $("<tr class='tr2'></tr>").append(xh).append(id).append(name).append(job).append(salary).appendTo("table")}});});</script></body>
</html>

原生ajax

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style> /* 这里可以书写css样式 */table{ border:2px solid red;/* 设置表格的边框和单元格的边框合并 */border-collapse: collapse;/* 设置当前元素的左右外边距自适应，即设置当前元素水平方向居中 */margin-left:auto;margin-right:auto;/* 设置背景颜色 */background: lightgrey;}td,th{border:2px solid red;/* 设置单元格的边框和内容之间的距离 */padding:5px;}h1{/* 让当前元素的内容居中显示 */text-align: center;}</style>
</head>
<body><h1>Goods Ajax Pages</h1><div style="text-align: center;color: #000;"><button id="btn1">点击发送原生的ajax</button></div><table><thead><tr><th>id</th><th>name</th><th>job</th><th>salary</th></tr></thead><tbody id="tbodyId"><tr><td colspan="4">Data loading ...</td></tr></tbody></table><script type="text/javascript">var btn = document.getElementById("btn1");btn.onclick=function(){alert("单击事件是否绑定成功!!!");ajaxGet();}function ajaxGet(){//页面加载完成向服务端再次发起请求,获取服务端数据,然后更新页面//1.构建XHR对象并注册监听var xhr=new XMLHttpRequest();//注册监听函数(监听与服务端通讯过程)xhr.onreadystatechange=function(){//callback//readyState==4表示通讯结束//status==20 表示服务端响应OKif(xhr.readyState==4&&xhr.status==200){//responseText表示服务端响应的结果//console.log(xhr.responseText);//json格式字符串//将服务端响应的json格式字符串,转换为json格式的JS对象var result=JSON.parse(xhr.responseText);doHandleResponseResult(result);}}//2.建立连接var url="http://rap2api.taobao.org/app/mock/261964/findall"xhr.open("GET",url,true);//true代表异步//3.发送请求xhr.send(null);//get请求send方法内部不传参数}//处理响应结果function doHandleResponseResult(result){console.log(result);//1.获得tbody对象,清空原有内容var tBody=document.getElementById("tbodyId");tBody.innerHTML="";//2.迭代result记录,并将记录呈现在tbody位置for(var i=0;i<result.length;i++){//2.1构建tr对象var tr=document.createElement("tr");//2.2构建td对象,并追加到tr中var td=document.createElement("td");td.innerText=result[i].id;tr.appendChild(td);td=document.createElement("td");td.innerText=result[i].name;tr.appendChild(td);td=document.createElement("td");td.innerText=result[i].job;tr.appendChild(td);td=document.createElement("td");td.innerText=result[i].salary;tr.appendChild(td);//2.3将tr对象追加到tbody中tBody.appendChild(tr);}}//   ajaxGet();</script>
</body>
</html>

总结

对于原生的ajax我们也是需要了解其原理的,面试有时候会问

分享一个面试题:

原生Ajax五个基本步骤

详细版本

1、创建ajax对象
var xhr = new XMLHttpRequest();
2、用ajax对象的open方法设置连接服务器的参数
xhr.open( method,url,async);
method:请求类型，post或get
url：请求文件的具体地址
async:：是否异步（true为异步，false为同步）
3、设置发送数据的头部，一般用来说明数据格式，如：
xhr.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
注： multipart/form-data（一般在发送文件时使用，以二进制形式发送）和application/json（发送json格式数据）
4、发送请求，xhr.send(数据)
方法参数中get方法时添null或不添，推荐用post方法
5、判断通讯状态或接收返回数据，这个是写在第三个步骤回调函数里边的

精简版本

创建 XMLHttpRequest 对象；
注册回调函数；
设置连接信息；
发送数据，与服务器开始交互；
接受服务器返回数据。

般用来说明数据格式，如：
xhr.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
注： multipart/form-data（一般在发送文件时使用，以二进制形式发送）和application/json（发送json格式数据）

4、发送请求，xhr.send(数据)
方法参数中get方法时添null或不添，推荐用post方法
5、判断通讯状态或接收返回数据，这个是写在第三个步骤回调函数里边的