原生ajax

84 阅读 0 评论 56 点赞

我是靠谱客的博主狂野麦片，最近开发中收集的这篇文章主要介绍原生ajax，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

原生ajax请求数据主要有两步：

数据请求
数据发送

数据请求

var xhr = new XMLHttpRequest();
//监听xhr的状态（处理数据请求后，后台返回的内容）
xhr.onreadystatechange = function (){
//ajax请求正确发出，并准确发送到后台
	if(xhr.readyState == 4){
	//后台数据准确反馈给前端
		if(xhr.status == 200){
			console.log( xhr.responseText);
		}
	}
}

数据发送

xhr.open('GET/POST',url,ture)  //url:服务器地址，true表示异步请求，false表示同步请求
//1.GET请求(参数直接拼接到url后面)
xhr.send()
//2.POST请求(参数处理如下)
var obj = new FormData();
obj.append('键名','键值');
...              //多个参数需要多次使用append添加，一次只能添加一个
xhr.send(obj);

关于XMLHttpRequest
js中内置的一个构造函数，相关属性和方法：
responseText：作为相应主体被返回的文本(说白了就是前段接收到的数据)
status:响应的http状态
readyState:请求/响应过程的当前活动阶段(
取值：
0:ajax刚创建，
1:调用open()方法，
2:调用send()方法，
3.开始接收数据，
4.数据接收完成)，
只要它的值发生变化，都会触发readystatechange事件。
关于post请求
第一种方法：
POST请求需要构建表单数据(FormData),是js提供的一个用来在ajax请求发送时存放的数据的类型

var obj = new FormData();
obj.append('键名','键值');
...             
 //多个参数需要多次使用append添加，一个obj.append('','');只能添加一条参数

可在任意位置，任何时机被创建，但必须在send()方法之前创建，因为创建的FormData需要被当做参数放入到send方法中一并发送到后台
第二种方法：
在send方法前添加请求头，对于ajax的post请求，服务器并不会像处理表单post请求那样对其进行处理，加请求头的目的就是使用xhr来模仿表单提交。
application/x-www-form-urlencoded就是表单提交时的内容类型

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send('key1=value1&key2=value2...');

原生ajax的封装

function ajax(obj){
		var xhr = new XMLHttpRequest();
		//监听xhr的状态（处理数据请求后，后台返回的内容）
		xhr.onreadystatechange = function (){
			if(xhr.readyState == 4){
				if(xhr.status == 200){
					var response = xhr.responseText;
					// 根据传入的datatype来判断是否需要将接受到的数据进行JSON解析
					if(obj.datatype == 'json'){
						response = JSON.parse(response);
					}
					obj.success(response);
					
				}
			}
		}
		//将请求对象带有的信息发送给后台
		xhr.open(obj.type,obj.url,true);
		//请求类型(GET/POST)处理
		if(obj.type == 'POST'||obj.type == 'post'){
			var formData = new FormData();
			var objKeys = Object.keys(obj.data);  //查询obj对象中的所有属性,返回数组
			for(var i in objKeys){
				formData.append(objKeys[i],obj.data[objKeys[i]]);
			}
			xhr.send(formData);
		}else{
			xhr.send();
		}	
	}
	//说明
*ajax({
		type:'post',
		datatype:'json',
		url:'ajax.php',
		data:{
			
		},
		success:function(res) {
			console.log(res);
		}
	})
 *type:数据请求方式(只支持POST/GET请求)
 *datatype：是否返回JSON格式化后的数据(不写json默认用户接收到JSON字符串)
 *url：服务器地址(GET请求，参数需拼接在url的后面)
 *data：POST请求时需要携带的参数，JSON格式