【无标题】

ajax

ajax快速上手

const xhr =new XMLHttpRequest();
//初始化
//get请求
xhr.open("GET","url");//当满足同源策略时可简写
//发送请求
xhr.send();
//事件绑定
xhr.onreadystatechage=function(){
	if(xhr.readystate===4){//完全响应
		if(xhr.state>=200&&xhr.state<300){
			//此时xhr.response里面已经有响应的结果了，且只能是字符串
			/*若后端使用了JSON发送，可以使用1、JSON.parse(xhr.response)手动转换，2、配置xhr.responseType="json",此时里面就已经转换为别的类型了*/
		}	
	}
}

超时设置

xhr.timeout=3000    //超过三秒这停止请求
xhr.ontimeout=function(){}		//超时时自动调用调用

网络异常设置

xhr.onerror = function(){}

手动取消请求

xhr.abort();//注意xhr的作用范围

第三方Ajax

jQuery

​ https://api.jquery.com/

发送get请求和post请求

jQuery.get(url[,data][,success][,dataType])
    //success是一个回调函数参数有( PlainObject data， String textStatus， jqXHR jqXHR )
    //简写形式
    $.get()
	//post请求一样

发送通用请求

//另一种写法
$.ajax(
    url:url,
    data:data,
    type:'get'//'post'
    success:success,
    dataType:dataType//可指定为“json”类型，服务器返回data的类型的预定义类型
    ///
    //超时时间设置
	timeout:1000
	//超时错误，网络错误
	error:function
	//头信息
	headers:{key:value}
)

axios

安装axios

$ npm install axios

发送get请求

//第一个参数：url，第二个参数：其他选项
axios.get('http://url/...',{
	//url参数
	params:{},//或者配置query参数
	//请求头信息
	headers:{}
}).then(function (response){
	//响应状态码
	response.status
	//响应状态字符串
	response.statusText
	//响应头信息
	response.headers
	//响应体
	response.data
})
//也可以配置axios.defines.baseURL=http://url,使得get函数的url参数简写为/...

发送post请求

//第一个参数：url，第二个参数：请求体，第三个参数：其他选项
axios.post('http://url/...',{data},{
	//url参数
	params:{},//或者配置query参数,在post请求不建议设置query参数
	//请求头信息
	headers:{},
}).then(function (response){})

发送通用请求

axios({
	//请求方法
	method:'',//get||post
	//url
	url:'',
	//url参数
	params:{},
	//请求头
	headers:{},
	//请求体
	data:{}
}).then(function (response){})

window:fetch(url[,config])

fetch('http://...',{
	//请求类型
	method:'GET'//'POST',
	//请求头
	headers:{},
	//请求体
	body:'a=1&b=2'
}).then(funcation (response){
	response.text()//若返回的是JSON还可以用response.json处理
})

如何解决跨域问题

JSONP (JSON with padding)

利用script标签的跨域能力来发送请求，只能发GET请求

原理：script标签向src所指向的url发请求，返回的是js代码。可以返回一个函数调用，参数就可以用来传递数据了

原生JSONP

//创建script标签
const script=document.creatElement('script');
//设置标签的src属性到请求端
script.src='url';
//插入到文档中
document.body.appendChild(script); 
//这样实现需要设置一个函数用于调用，从而使得数据能被传送

jQuery中的JSONP

$.getJSON('http://url?callback=?',//callback=?是一定要写的，它的值在传递的时候会变成一个函数，服务器可以用它实现数据的传输，就不用直接编写函数传参了
	function(data){})

CORS

https://developer.mozilla.org/zh-CN/docs/Web/HTTP

主要是在后端设置响应头