1、AJAX(Asynchronous Javascript And Xml)
就是浏览器赋予JS的一套API,通过这套API能够使JS具备网络通信的能力;
IE使用了一套API来完成请求的发送,这套API主要依靠一个构造函数完成。该构造函数的名称为XMLHttpRequest,简称为XHR,所以这套API又称之为XHR API;后又更新了一套更加完善的API来发送请求,这套API主要使用的是一个叫做fetch的函数,因此这套API又称之为Fetch API
1)XHR API
var xhr = new XMLHttpRequest();//创建发送请求的对象
xhr.onreadystatechange = function(){
//当请求状态发生改变时运行的函数
//xhr.readyState:一个数字,用于判断请求到了哪个阶段
//0:刚刚创建好了请求对象,但是还未配置请求(未调用open方法)
//1:open方法已经被调用
//2:send方法已经被调用
//3:正在接收服务器的响应信息体
//4:服务器响应的所有内容均已接收完毕
//xhr.responseText:获取服务器响应的消息体文本
//xhr.getResponseHeader("Content-Type")获取响应头Content-Type};
xhr.open('请求方法','url地址');//配置请求
xhr.setRequestHeader('Content-Type','application/json')//设置请求头
xhr.send('请求体内容');//构建请求体,发送到服务器,如果没有请求体,传递null
2)Fetch API
fetch(请求地址)
这个函数直接调用请求地址,返回的是一个promise,当收到服务器的响应头之后,Promise完成
完成之后,会给与一个响应对象resp
fetch('请求地址')
.then((resp) => resp.json()
.then((resp) => {
console.log(resp);
});
一般获取两个请求,一个响应头,一个响应体
2、Axios
Axios是一个请求库,在浏览器环境中,它封装了XHR,提供更加便捷的API发送请求
axios基本用法:
axios.get(url地址,【请求配置】);
axios.post(url地址,【请求对象】,【请求配置】);
或者直接使用axios,在请求配置中填写请求方法
axios(请求配置);
实例:把一些通用的地址写在实例里面,后续可以直接调用
拦截器
注意:无论使用哪一种API,AJAX始终都是异步的
3、开发中的常见问题
1)跨域错误:这个错误经常发生在AJAX请求的时候;
跨域:浏览器为了安全,制定了一个规则,即页面的源和请求目标的源应该保持一致,如果不一致,就产生了跨源或跨域
源 = 协议+主机+端口(任一个不一致就会导致跨域)
浏览器对img、link、script的限制比较宽松,一般允许跨域
浏览器对AJAX比较严格,一般不允许跨域
浏览器对跨域行为作出的不同限制,统称为同源策略(如果在AJAX中出现跨域请求,就会报错,但如果服务器明确告知浏览器允许跨域,则浏览器会允许AJAX跨域请求)
2)404:404是一种非常常见的错误,它表示服务器告诉客户端,你要的资源不存在;要解决这个错误,首先要检查请求的url地址是否正确,如果url地址正确,则可能是服务器的问题,需要联系后段开发人员或者将问题上报
3)favicon:
报错内容:加载资源失败,服务器响应了404状态码
请求地址:5500/favicon.ico
原因:很多浏览器在解析页面后,如果发现页面中并没有使用link元素加载站点图标,会尝试请求以下地址来获取图标
站点协议://站点主机:站点端口/favicon.ico
如果这个地址无法获取图标,就会报出响应错误
4)网络断开:GET http://xxxxx net::ERR_INTERNET_DISCONNECTED
5)访问的域名不存在,无法链接到服务器:GET http://xxxxx net::ERR_NAME_NOT_RESOLVED