ajax与 axios的基础讲解（附代码及接口）
Posted 小hu同学
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax与 axios的基础讲解（附代码及接口）相关的知识，希望对你有一定的参考价值。
看这篇文章前，你的小脑袋瓜子 想一想
ajax和axios他们有什么区别？他们能做什么？要带着问题来看，这样会事半功倍
一、Ajax
注意事项：本Ajax中的代码片段 发起的请求 都是自己本地文件夹中的app.js接口，我会在Ajax 章节的最后附上源文件。
Ajax 全称（Asynchronous javascript and XML）是用于在发送请求的时候 无刷新发送请求，也就是说 用JavaScript执行异步的请求
如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因，就会得到一个404页面。
这就是Web的运作原理：一次HTTP请求对应一个页面。
如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。
1.1 ajax入门
<script type="text/javascript">
//1、创建Ajax对象
var xhr = new XMLHttpRequest()
//2、告诉Ajax对象要向哪里发送请求，以什么方式发送请求
//01、请求方式 02请求地址
// 向接口使用get请求方式 请求地址为localhost:4000/frist
//这里的get 是有接口后端 定义的
xhr.open('get','http://localhost:4000/frist');
//3、发送请求
xhr.send();
//4、获取服务器端响应到客户端的数据
xhr.onload = function()
//打印服务器端返回来的数据 就是Hello ajax
console.log(xhr.responseText)
</script>
接口
// 对应01html文件
//接收到客户端的请求
app.get('/frist',(req,res) =>
// 并返回一个Hello ajax
res.send('Hello ajax');
)
可以看到 我这个是启动了服务器 http://localhost:4000/01.入门.html 访问的这个文件，切记！！！ 不能直接打开HTML文件
1.2 处理服务器端返回的JSON数据
<script type="text/javascript">
//1、创建Ajax对象
var xhr = new XMLHttpRequest()
//2、告诉Ajax对象要向哪里发送请求，以什么方式发送请求
//01、请求方式 02请求地址
xhr.open('get','http://localhost:4000/responseDate');
//3、发送请求
xhr.send();
//4、获取服务器端响应到客户端的数据
xhr.onload = function()
//将json字符串转换为JSON对象
var responseText = JSON.parse(xhr.responseText)
console.log(responseText)
//将获取到数据 进行标签的拼接
<!-----------一般不会使用这种拼接 仅供演示看---------------->
var str = '<h2>'+responseText.name+'</h2>'
// 获取DOM元素 将拼接的str 显示到页面上
document.body.innerHTML = str;
</script>
接口：
app.get('/responseDate',(req,res) =>
res.send("name":"xiaohu同学");
)
1.3 传递get 请求参数
<p>
<input type="text" id="username">
</p>
<p>
<input type="text" id="age">
</p>
<p>
<input type="button" value="提交" id="btn">
</p>
<script type="text/javascript">
//获取按钮元素
var btn = document.getElementById('btn');
//获取姓名文本框
var username = document.getElementById('username');
//获取年龄文本框
var age = document.getElementById('age');
//为按钮添加点击事件
//点击后 发生Ajax 请求
btn.onclick = function()
//创建ajax对象
var xhr = new XMLHttpRequest();
//获取用户在文本框中输入的值
var nameValue = username.value;
var ageValue = age.value;
//拼接请求参数
var params = 'username='+nameValue +'&age='+ageValue;
//配置ajax对象
xhr.open('get','http://localhost:4000/get?'+params);
//发送请求
xhr.send();
//获取服务器端响应的数据
xhr.onload = function ()
console.log(xhr.responseText)
</script>
接口：
app.get('/get',(req,res) =>
//使用req.query来接收客户端传递到服务器端的get请求参数
//并使用req.send来响应给客户端
res.send(req.query);
)
1.4 传递post请求参数
<p>
<input type="text" id="username">
</p>
<p>
<input type="text" id="age">
</p>
<p>
<input type="button" value="提交" id="btn">
</p>
<script type="text/javascript">
//获取按钮元素
var btn = document.getElementById('btn');
//获取姓名文本框
var username = document.getElementById('username');
//获取年龄文本框
var age = document.getElementById('age');
//为按钮添加点击事件
btn.onclick = function()
//创建ajax对象
var xhr = new XMLHttpRequest();
//获取用户在文本框中输入的值
var nameValue = username.value;
var ageValue = age.value;
//拼接请求参数
var params = 'username='+ nameValue +'&age='+ageValue;
//配置ajax对象
xhr.open('post','http://localhost:4000/post');
//设置请求参数的格式的类型（post请求必须要设置）
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//发送请求
xhr.send(params);
//获取服务器端响应的数据
xhr.onload = function ()
console.log(xhr.responseText)
</script>
1.5 传递Json请求参数
<script type="text/javascript">
//1、创建Ajax对象
var xhr = new XMLHttpRequest()
//2、告诉Ajax对象要向哪里发送请求，以什么方式发送请求
//01、请求方式 02请求地址
xhr.open('post','http://localhost:4000/json');
//同请求头告诉服务器端客户端向服务器端传递的请求参数的格式是什么
xhr.setRequestHeader('Content-Type','application/json')
//要转换为JSON字符串的格式进行传递
//JSON.stringify() 将json对象转换为json字符串
//3、发送请求
xhr.send(JSON.stringify(name:'lisi',age:18));
//4、获取服务器端响应到客户端的数据
xhr.onload = function()
console.log(xhr.responseText)
</script>
接口：
app.post('/json', (req, res) =>
res.send(req.body)
)
1.6 根据状态码来获取服务器响应数据
<script type="text/javascript">
//1、创建Ajax对象
var xhr = new XMLHttpRequest()
//0 状态码为0 已经创建了对象，但是没有对ajax对象进行配置
console.log(xhr.readyState);//当前打印为0
//1 已经对ajax对象配置，但是还没有发送请求
xhr.open('get','http://localhost:4000/readystate');
console.log(xhr.readyState);//当前打印为1
xhr.onreadystatechange = function ()
//2 请求已经送到
//3 已经接收到服务器端
//4 服务器端的响应数据已经接收完成
console.log(xhr.readyState)//打印结果为2,3，4
//对ajax状态码进行判断
//如果状态码的值为4就代表数据已经接收完成了
if (xhr.readyState == 4)
//等于4 就接收服务器返回过来的 hello
console.log(xhr.responseText);
xhr.send();
</script>
接口
app.get('/readystate', (req, res) =>
res.send('hello')
)
1.7 Ajax错误处理
<button id="btn">发送ajax请求</button>
<script type="text/javascript">
//获取Dom结构
var btn =document.getElementById('btn');
//绑定点击事件
btn.onclick = function ()
var xhr = new XMLHttpRequest()
//2、告诉Ajax对象要向哪里发送请求，以什么方式发送请求
//01、请求方式 02请求地址
xhr.open('get','http://localhost:4000/error');
//3、发送请求
xhr.send();
//4、获取服务器端响应到客户端的数据
xhr.onload = function()
//打印服务器返回来的结果
console.log(xhr.responseText);
//判断 当服务器返回的状态码为400
if(xhr.status == 400)
//弹出提示文字
alert('请求出错')
//当网络中断时触发error事件
xhr.onerror = function ()
alert('网络中断无法发送请求')
</script>
接口
//方式为get 请求路径为‘/error’
app.get('/error', (req, res) =>
//手动指定状态码为400
res.status(400).send('not ok')
)
1.8 Ajax异步请求
看下面这部分代码 思考一下打印的顺序
<script type="text/javascript">
//1、创建Ajax对象
var xhr = new XMLHttpRequest()
//2、告诉Ajax对象要向哪里发送请求，以什么方式发送请求
//01、请求方式 02请求地址
xhr.open('get','http://localhost:4000/frist');
//3、发送请求
xhr.send();
//4、获取服务器端响应到客户端的数据
xhr.onload = function()
console.log('2');
console.log(xhr.responseText)
console.log('1');
</script>
接口
app.get('/frist', (req, res) =>
res.send('Hello ajax')
)
Ajax 是异步的任务，在执行的时候 会先执行同步的任务
console.log('1'),当同步任务执行完成后，才会执行异步的任务Ajax里面的console.log('2')/console.log(xhr.responseText)
---------------------------分割线------------------------------------------
2.1 向非同源的发起Ajax请求
这个场景 在业务开发中会有用到
什么是非同源呢？
1、端口、域名、协议 这3个有一个不同 就是非同源的
2、相反 就是同源的 我们上述的1.1——1.9 都是在本地起的服务，发起的请求
3、下面的案例 我会启动两个服务器 分别是s1/s2
s1 localhost:3000
s2 localhost:3001
S1文件夹里面的index.html
<script type="text/javascript" src="/js/ajax.js"></script>
<script type="text/javascript">
ajax(
url: 'http://localhost:3001/test',
type: 'get',
success: function (result)
console.log(result);
)
</script>
S2文件的 app.js接口文件
app.get('/test', (req, res) =>
const result = 'fn(name:"小hu同学")';
res.send(result)
);
可以看到我们这里 请求成功了
2.2 使用jsonp向非同源服务器请求数据
S1 html文件
<button id="btn">
点我发送请求
</button>
<script>
function fn(data)
console.log('客户端的fn函数被调用了');
console.log(data)
</script>
<!-- 1、将非同源服务器端的请求地址写在script标签的src属性中 -->
<script>
//获取按钮
var btn = document.getElementById('btn')
btn.onclick = function ()
//创建script标签
var script = document.createElement('script');
//设置src属性
script.src = 'http://localhost:3001/test?callback=fn'
//将script 追加到页面后面
document.body.appendChild(script);
//为script标签添加onload事件
script.onload = function()
//将body中的script 标签删除掉
document.body.removeChild(script)
</script>
S2 app.js
app.get('/better', (req, res) =>
// //接收客户端传递过来的函数名称
// const fnName = req.query.callback
// //将函数名称对应的函数调用代码返回给客户端
// const data = JSON(name:"小hu同学")
// const result = fnName +'(name:"小hu同学")';
// setTimeout(() =>
// res.send(result)
// ,1000)
//上面的是使用非jsonp
res.jsonp(
name: 'xiaohu',
age: 20
)
);
2.3 jsonp 请求封装
S1 HTML文件
<button id="btn1">点击发送</button>
<button id="btn2">点击发送2</button>
<script>
//获取按钮
var btn = document.getElementById('btn');
//为按钮添加点击事件
btn1.onclick = function ()
jsonp(
//请求地址 为S2接口地址
url: 'http://localhost:3001/better',
//请求成功后 接收一个参数
success: function (data)
console.log(123)
console.log(data)
)
btn2.onclick = function ()
jsonpvue_ajax-axios的使用