前端发送异步的三种方式
使用阿里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 -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/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.data
console.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 表示服务端响应OK
if(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、判断通讯状态或接收返回数据，这个是写在第三个步骤回调函数里边的
精简版本
创建 XMLHttpRequest 对象；
注册回调函数；
设置连接信息；
发送数据，与服务器开始交互；
接受服务器返回数据。