Ajax笔记(2) -Axios

y191024

发布于 2022-09-20 20:37:24

1.4K00

代码可运行

文章被收录于专栏：睡不着所以学编程睡不着所以学编程

运行总次数：0

代码可运行

异步对象XMLHttpRequest使用步骤

1.使用JS创建异步对象

var xhr = new XMLHttpRequest();

2.给异步对象绑定事件.事件名称 onreadystatechange

例如给button绑定onclick

xhr绑定事件:

xhr.onreadystatechange = function() { 当事件发生时执行的代码 }

3.初始请求的参数,执行open()函数

xhr.open('get', 'loginSerlet', true);

4.发送请求,执行send()

xhr.send();

但是使用原生的Ajax并不是明智的选择,所以我们现在学习axios (传统Ajax 指的是 XMLHttpRequest(XHR),axios和jQuery的ajax 都是对Ajax的封装)

Axios

Axios，可以理解为ajax i/o system，这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。具备以下特点：

在浏览器中创建XMLHttpRequest请求
在node.js中发送http请求
支持Promise API
拦截请求和响应
转换请求和响应数据
取消要求
自动转换JSON数据
客户端支持防止CSRF/XSRF(跨域请求伪造)

安装

使用下面三种之一都可以:

使用 npm(做项目用这种方式):

$ npm install axios

使用 bower:

$ bower install axios

使用 cdn(我采用的方式):

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用

我们这次使用JSONplaceholder,直接搜索就有

JSONPlaceholder 是一个提供免费的在线 REST API 的网站，我们在开发时可以使用它提供的 url 地址测试下网络请求以及请求参数。或者当我们程序需要获取一些假数据、假图片时也可以使用它。

网站地址： http://jsonplaceholder.typicode.com/

其返回的数据为 JSON 格式，且同时支持 HTTP 和 HTTPS 这两种请求类型。

我上次使用的是json-server,不过会稍微麻烦一点点,就用上面那个吧

在这个JSONplaceholder中,有很多数据可以给我们使用:

get请求

axios({

url:"请求数据的服务器地址",

method:"get"(默认为get),

timeout:5000(5秒未请求成功就执行timeout函数),

}).then(res=>{

"对res进行操作"

})

发送get请求时地址带有问号？及参数，

例如

“http://123.207.32.32:8000/home/data?type=sell&page=3”,用下面的请求方式，axios发送请求时会自动拼接params里的参数

get请求可以携带参数,就比如我们只想要前五条数据,但是全部数据有100条,

这时候我们可以将URL修改为:

此时网页显示的数据就会变成这样:

只有5条

如果用axios发请求就需要加上params属性,注意post的话就用data属性

可以看到得到了5条数据

post请求

axios({
        url:"请求数据的服务器地址",

        method:"post"(默认为get),

        data:{xxx:xxx}

	 timeout:5000(5秒未请求成功
就执行timeout函数),

	        }).then(res=>{

	            "对res进行操作"

        })


  data是作为请求主体被发送的数据 body
参数


下面讲一下get和post请求的区别
(参考了别人的文章)

Post请求和get请求的区别

1.get是从服务器上获取数据，post是向服务器传送数据。

2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTPpost机制，将表单内各个字段与其内容放置在HTMLHEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

3.对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。

4.get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。

5.get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

现在发一个post请求: