原生js方式的Ajax请求

Ajax概念：
Ajax全称为（Asynchronous JavaScript And XML），本身并不是一种新技术，而是在2005年被提出的新术语。解决了传统的web交互中因为服务器返回的数据刷新整个页面的问题；结合Ajax模型以后，可以只刷新网页的局部，不再需要重新加载整个页面，使得程序可以更快的回应页面的操作。

Ajax请求的5个步骤：

1. 创建XMLHttpRequest对象；
2. 调用XMLHttpRequest对象中的open方法;
3. 如果是post请求，就需要设置请求头;
4. 设置请求成功的回调函数;
5. 调用对象的send方法，如果是post方法的话，可以将传参放到send方法中传递过去;

get请求

let xhr = new XMLHttpRequest();
// 参数直接拼接到url地址的后面，url?key1=value1 & key2=value2;
xhr.open('get','url');
xhr.onload = function(){
    
    
	console.log(xhr.response)
}
xhr.send();

post请求

let xhr = new XMLHttpRequest();
xhr.open('post','地址');
// 需要设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.onload = function(){
    
    
	console.log(xhr.response)
}
// 通过send方法来将数据传递过去,如:send("key1=value1 & key2=value2")
xhr.send();

onreadystatechange函数

在上述的例子中，onload其实只是一个被封装好的方法，其原生的应该是onreadystatechange，这个的用法会稍微麻烦一点，就是当readyState属性发生改变的时候，才会调用相应的处理函数。XMLHttpRequest请求被abort()方法取消时，对应的readystatechange事件是不会触发的。

每一个readyState值都对应着当前一个所处的状态，只有当readyState值为4的时候，才是处于一个执行完成的状态，示例代码如下：

<script>
	let xhr = new XMLHttpRequest();
	// 0
	console.log('1',xhr.readyState);
	xhr.open('get','https:www...');
	// 1
	console.log('2',xhr.readyState);
	xhr.onreadystatechange = function(){
    
    
	  // 2 3 4
	  console.log('3',xhr.readyState);
	  //console.log(xhr.response);
	}
	// 1
	console.log('4',xhr.readyState);
	xhr.send()
	// 1
	console.log('5',xhr.readyState);
</script>

真假异步

如果XMLHttpRequest对象要使用ajax，就必须在XMLHttpRequest.open()的第三个参数设置为true。

xhr.open('get', 'https:www...', true);

也可以不使用async，直接设置为false即可，但是并不推荐。当open()中第三个参数为false时，注意不要写onreadystatechange函数，直接将代码放到send()的后面即可；只适用于处理一些小的请求，一旦服务器繁忙就会立即停止。

xhr.open('get', 'https:www...', false);

get请求封装

function get(options){
    
    
	let xhr = new XMLHttpRequest();
	// get请求，需要将参数拼接到url的后面，如：url?key1=value1&key2=value2
	xhr.open('get',`${
      
      options.url}?${
      
      options.data}`,false);
	xhr.onload = function(){
    
    
		// 将请求的结果以入参的方式传递过去
		options.success(xhr.respon);
	}
	xhr.send();
}

get({
    
    
	url:'url地址',
	data:"key1=value1&key2=value2",
	success:function(res){
    
    
		console.log(res);
	}
})

post请求封装

function get(options){
    
    
	let xhr = new XMLHttpRequest();
	xhr.open('get','url');
	// post请求需要设置一个请求头
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	xhr.onload = function(){
    
    
		// 将请求的结果以入参的方式传递过去
		options.success(xhr.respon);
	}
	// post请求传递的数据需要放在send方法中
	xhr.send(options.data);
}

post({
    
    
	url:"url地址",
	data:"key1=value1&key2=value2",
	success:function(res){
    
    
		console.log(res);
	}
})

ajax封装

function ajax(options){
    
    
	let xhr = new XMLHttpRequest();
	if(options.type === undefined){
    
    
		// ajax默认为get请求
		options.type = 'get';
	}
	if(options.type === 'get'){
    
    
		xhr.open('get',`${
      
      options.url}?${
      
      options.data}`);
	}
	if(options.type === 'post'){
    
    
		xhr.open('post','url');
		// post请求需要设置一个请求头
		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	}
	xhr.onload = function(){
    
    
		// 将请求的结果以入参的方式传递过去
		options.success(xhr.respon);
	}
	if(options.type === 'post'){
    
    
		// post请求传递的数据需要放在send方法中
		xhr.send(options.data);
	}else{
    
    
		xhr.send();
	}
}

ajax({
    
    
	url:"url地址",
	data:"key1=value1&key2=value2",
	success:function(res){
    
    
		console.log(res);
	}
})

参考文献：
1. CSDN
2. 菜鸟教程