ajax技术知识总结
简述
ajax（Asynchronous JavaScript and XML）是一种异步的JavaScript和XML技术。可以使网页实现异步更新，即在不重新加载整个页面的情况下， 与服务端进行少量数据交换，对网页的某部分内容进行更新。
创建对象
创建XMLHttpRequest对象
|
1 |
var xhr = new XMLHttpRequest(); |
XMLHttpRequest对象属性
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数名，每当readyState的状态发生变化时，都会调用该函数。 |
| readyState | 一个完整的请求，XMLHttpRequest的状态会从0到4发生变化。 0：请求未初始化 1：服务器连接已建立 2：请求已接收 3：请求处理中 4：请求已完成，且响应已就绪 |
| responsText | 以文本形式返回响应。 |
| responsXML | 以XML格式返回响应 |
| status | 以数字返回状态（如成功200） |
| statusText | 以字符串形式返回状态 |
XMLHttpRequest对象方法
| 方法 | 描述 |
|---|---|
| abort() | 取消当前请求。 |
| getAllResponseHeaders() | 以字符串形式返回完整的HTTP标头集。 |
| getResponseHeader(headerName) | 返回指定HTTP标头的值。 |
| open(method, url, async, [username], [password]） | 打开指定获取的方法和请求地址。 |
| send(content) | 发送获取请求。 |
| setRequestHeader(label, value) | 将标签/值对添加到要发送的HTTP标头中。 |
请求
|
1 |
xhr.open('GET', 'http://127.0.0.1:3000/', true) |
open()方法参数详解如下：
method：请求的类型，值为GET或POSTurl：文件在服务器上的位置async：设置请求方式，true同步，false异步
GET请求速度较快，但以下场景建议使用POST请求：
- 向服务器发送大量的数据（
POST请求没有长度限制） - 发送用户输入的字符场景
响应
发送请求后，需要等待服务器处理并返回数据。
| 属性 | 描述 |
|---|---|
| responseText | 获得字符串形式的响应数据。 |
| responseXML | 获得 XML 形式的响应数据。 |
基本使用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// 1. 创建xhr对象 var xhr = new XMLHttpRequest(); // 2. 获取请求信息 xhr.open('GET', 'http://127.0.0.1:3000/', true) // 3. 发送请求 xhr.send(); // 4. 获取响应结果 xhr.onreadystatechange = function () { // 只有当readyState为4，且status等于200 才是成功的响应结果 if (xhr.readyState === 4 && xhr.status === 200) { // 响应成功 console.log('res', xhr.responseText); } } |
jQuery中的Ajax
浏览器提供的 XMLHttpRequest 用法比较复杂，所以jQuery对其进行了封装，提供一系列 Ajax 的函数，极大的降低了 Ajax 的使用难度。
$.get()
功能单一，只能发起 get 请求，从而将服务器上的资源请求到客户端上来使用。
|
1 |
$.get(url, [data], [callback]) |
参数详解
urlstring，必选，要请求的资源地址dataobject，否，请求资源时携带的参数callbackfunction，否，请求成功时的回调函数
$.post()
功能单一，只能发起 post 请求，从而向服务器提交数据。
|
1 |
$.post(url, [data], [callback]) |
参数详解
urlstring，必选，提交数据的地址dataobject，否，要提交的数据callbackfunction，否，请数据提交成功的回调函数
$.ajax()
功能综合，允许对 Ajax 请求进行更详细的配置。
|
1 2 3 4 5 6 |
$.ajax({ type: '', // 请求的方式，例如 GET 或 POST url: '', // 请求的 URL 地址 data: { }, // 请求携带的参数 success: function(res) { } // 请求成功之后的回调函数 }) |
示例如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
// $.get请求不携带参数的情况 $.get('https://api.thecatapi.com/v1/images/search', function (res) { console.log(res) }) // $.get请求携带参数的情况 $.get('https://api.thecatapi.com/v1/images/search', { limit: 10 }, function (res) { console.log(res) }) // $.ajax发送get请求 $.ajax({ type: 'GET', url: 'https://api.thecatapi.com/v1/images/search', data: { limit: 10 }, success: function (res) { console.log(res) } }) // $.ajax发送post请求 $.ajax({ type: 'post', url: 'https://jsonplaceholder.typicode.com/posts', data: { title: 'foo', body: 'bar', userId: 1, }, success: function (res) { console.log(res) } }) |
axios
专注于网络数据请求的库。
优势：
- 相比于原生的
XMLHttpRequest对象，axios简单易用； - 相比于
JQuery，axios更加轻量化，只专注于网络数据请求。
axios 发起 GET 请求
|
1 |
axios.get('url', { params: { 参数 } }).then( callback ) |
axios 发起 POST 请求
|
1 |
axios.post('url', { params: { 参数 } }).then( callback ) |
直接使用 axios 发起请求
post数据需要通过data属性提供
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// 直接使用axios发送请求 // 1. 发送GET请求 axios({ method: 'get', url: 'https://api.thecatapi.com/v1/images/search', params: { limit: 3, } }).then(function (res) { console.log(res) }) // 2. 发送post请求 axios({ method: 'post', url: 'https://jsonplaceholder.typicode.com/posts', data: { title: '中国', body: 'bar', userId: 1, } }).then(function (res) { console.log(res.data) }) |