知识点
- XMLHttpRequest
- 状态码
- Ajax, jQuery ajax, fetch,axios
- 跨域:同源策略(浏览器要保证安全),跨域解决方案
Ajax, jQuery ajax, fetch,axios 使用
Ajax
ajax 的工作原理:
Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。
简单来说通过XmlHttpRequest对象
来向服务器发异步请求,从服务器获得数据,然后用javascript
来操作DOM
而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理,我们必须对 XMLHttpRequest
有所了解。
手写一个简易的 ajax
function ajax(url) {
const p = new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
xhr.open('GET', url, true) // true 表示异步
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(
JSON.parse(xhr.responseText)
)
} else if (xhr.status === 404 || xhr.status === 500) {
reject(new Error('404 not found'))
}
}
}
xhr.send(null)
})
return p
}
const url = '/data/test.json'
ajax(url)
.then(res => console.log(res))
.catch(err => console.error(err))
xhr.readyState
- 0 (未初始化)还没有调用send()方法
- 1 (载入)已调用send()方法,正在发送请求
- 2 (载入完成)send()方法执行完成,已经接收到全部响应内容
- 3 (交互)正在解析响应内容
- 4 (完成)响应内容解析完成,可以在客户端调用
xhr.status
- 2xx 表示成功处理请求,如:200
- 3xx 需要重定向,浏览器直接跳转,如:301(永久重定向) 302(临时重定向) 304(资源未改变)
- 4xx 客户端请求错误,如:404(请求地址有误,找不到) 403(没有权限访问)
- 5xx 服务端错误
jQuery 完整 ajax示例
$(function(){
//请求参数
var list = {};
//
$.ajax({
//请求方式
type : "POST",
//请求的媒体类型
contentType: "application/json;charset=UTF-8",
//请求地址
url : "http://127.0.0.1/admin/list/",
//数据,json字符串
data : JSON.stringify(list),
//请求成功
success : function(result) {
console.log(result);
},
//请求失败,包含具体的错误信息
error : function(e){
console.log(e.status);
console.log(e.responseText);
}
});
});
fetch 使用示例
// GET请求
fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
// POST 请求
fetch('http://www.mozotech.cn/bangbang/index/user/login', {
method: 'post',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: new URLSearchParams([
["username", "Lan"],["password", "123456"]
]).toString()
})
.then(res => {
console.log(res);
return res.text();
})
.then(data => {
console.log(data);
})
axios 使用
axios({
method: 'post',
url: '/abc/login',
data: {
userName: 'Lan',
password: '123'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
ajax, jqueryAjax, fetch, axios 对比
ajax:
优点: 局部更新;原生支持;
缺点: 可能破坏浏览器后退功能;嵌套回调(多个请求之间如果有先后关系的话,就会出现回调地狱。)
jqueryAjax:
在原生的ajax的基础上进行了封装;支持jsonp
fetch:
fetch号称是AJAX的替代品,是在ES6出现的,使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了,参数有点像jQuery ajax。
fetch是一种HTTP数据请求的方式,是XMLHttpRequest的一种替代方案。fetch不是ajax的进一步封装,而是原生js。Fetch函数就是原生js,没有使用XMLHttpRequest对象。
优点: 解决回调地狱
缺点: API 偏底层,需要封装;默认不带Cookie,需要手动添加; 浏览器支持情况不是很友好,需要第三方的ployfill
axios:
几乎完美!!
特点:
- axios不是原生JS的,需要进行安装
- 支持浏览器和node.js(从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求) - 支持promise
- 能拦截请求和响应
- 能转换请求和响应数据
- 能取消请求
- 自动转换JSON数据
- 浏览器端支持防止CSRF(跨站请求伪造)
既然谈到了ajax,就不得不说跨域问题 这个兄嘚勒