前端开发在需要与后端进行数据交互时，为了方便快捷，都会选择JQuery中封装的AJAX方法，但是有些时候，我们只需要JQuery的AJAX请求方法，而其他的功能用到的很少，这显然是没必要的。其实，原生JavaScript实现AJAX并不难，下面我们可是演示如何实现利用原生JS构建简单的AJAX，还有跨域请求JSONP的实现。
AJAX的根本是XMLHttprequest,而一个完整的AJAX请求一般包括以下步骤：
- 实例化XMLHttpRequest对象
- 连接服务器
- 发送请求
- 接收响应数据
下面我们使用原生JS封装一个简单地ajax()方法：
const Ajax = (object) => {
object = object || {};
object.data = object.data || {};
//判断请求类型为AJAX或者JSONP
let json = object.jsonp ? Jsonp(object) : ajax(object);
//设置ajax方法
function ajax(object) {
// 1.设置请求方式：如果没有制定则默认为GET
object.type = (object.type || 'GET').toUpperCase();
// 2.设置data数据的格式化
object.data = formateObject(object.data);
// 3.实例化XMLHttpRequest对象
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
// 4.监听事件，只要readyState改变，就会调用readystatechange事件
xhr.onreadystatechange = function(){
// readyState属性表示请求/响应过程的当前活动阶段，4为完成，已经接收到全部响应数据
if(xhr.readyState == 4) {
let status = xhr.status;
// status : HTTP响应的状态码，2开头表示成功
if(status >=200 && status < 300){
let response = '';
// 判断接受数据的内容类型
let type = xhr.getResponseHeader('Content-type');
if(type.indexOf('xml') !== -1 && xhr.responseXML) {
response = xhr.responseXML; //Document对象响应
} else if(type === 'application/json') {
response = JSON.parse(xhr.responseText); //JSON响应
} else {
response = xhr.responseText; //字符串响应
};
// 成功回调函数
object.success && object.success(response);
}else {
object.error && object.error(response);
}
}
}
// 5.连接和传输数据
if(object.type == 'GET') {
// 三个参数：请求方式、请求地址(get方式时，传输数据是加在地址后的)、是否异步请求(同步请求的情况极少)；
xhr.open(object.type, object.url + '?' + object.data, true);
xhr.send(null);
} else {
xhr.open(object.type, object.url, true);
//必须，设置提交时的内容类型
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
// 传输数据
xhr.send(object.data);
}
}
//data的格式化方法
function formateObject(data){
if(data){
let arr = [];
for(let name in data){
//encodeURIComponent() ：用于对 URI 中的某一部分进行编码
arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
}
//为了防止缓存，在后面添加一个随机数
arr.push('randomV=' + randomNumber());
return arr.join('&');
}else {
console.error('无法格式化请求数据')
}
}
//生成随机数的方法
function randomNumber(){
return Math.floor(Math.random()*10000+404);
}
};
同理，我们也可以实现一个JSONP的方法
//设置Jsonp方法
function Jsonp(object) {
// 创建script标签并加入到页面中
let callbackName = object.jsonp,
head = document.getElementsByTagName('head')[0];
// 设置传递给后台的回调参数名
object.data['callback'] = callbackName;
let data = formateObject(object.data),
script = document.createElement('script');
head.appendChild(script);
// 创建JSONP的回调函数
//创建jsonp回调函数
window[callbackName] = function(json) {
head.removeChild(script);
clearTimeout(script.timer);
window[callbackName] = null;
object.success && object.success(json);
};
// 发送请求
script.src = object.url + '?' + data;
//为了得知此次请求是否成功，设置超时处理
if(object.time) {
script.timer = setTimeout(function() {
window[callbackName] = null;
head.removeChild(script);
object.error && object.error({
message: '请求超时'
});
}, time);
} }
下面我们来尝试一下这两个方法是否管用
新建一个index.html文件，新建一个test.json和jsonp.php
利用nginx搭建一个简单地服务器，因为谷歌默认不允许本地文件进行ajax请求：
test.json内容
{
"name" : "111",
"gender" : "222"
}
jsonp.php内容：
callback({"name":"李大师","gender":"是前端开发工程师"})
index.html内容
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>原生JS实现ajax和JSONP请求</title>
<style type="text/css">
input[type='button'] {
margin:20px;
}
</style>
</head>
<body>
<button>点击验证AJAX</button>
<input type="button" value="点击验证JSONP" onclick="">
<div id="div1" class=""> </div>
</body>
<script type="text/javascript">
<!--
//原生JS方法封装AJAX请求和JSONP请求 window.Ajax = (object) => {
object = object || {};
object.data = object.data || {};
//判断请求类型为AJAX或者JSONP
let json = object.jsonp ? Jsonp(object) : ajax(object); //设置ajax方法
function ajax(object) {
// 1.设置请求方式：如果没有制定则默认为GET
object.type = (object.type || 'GET').toUpperCase();
// 2.设置data数据的格式化
object.data = formateObject(object.data);
// 3.实例化XMLHttpRequest对象
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
// 4.监听事件，只要readyState改变，就会调用readystatechange事件
xhr.onreadystatechange = function(){
// readyState属性表示请求/响应过程的当前活动阶段，4为完成，已经接收到全部响应数据
if(xhr.readyState == 4) {
let status = xhr.status;
// status : HTTP响应的状态码，2开头表示成功
if(status >=200 && status < 300){
let response = '';
// 判断接受数据的内容类型
let type = xhr.getResponseHeader('Content-type');
if(type.indexOf('xml') !== -1 && xhr.responseXML) {
response = xhr.responseXML; //Document对象响应
} else if(type === 'application/json') {
response = JSON.parse(xhr.responseText); //JSON响应
} else {
response = xhr.responseText; //字符串响应
};
// 成功回调函数
object.success && object.success(response);
}else {
object.error && object.error(response);
}
}
} // 5.连接和传输数据
if(object.type == 'GET') {
// 三个参数：请求方式、请求地址(get方式时，传输数据是加在地址后的)、是否异步请求(同步请求的情况极少)；
xhr.open(object.type, object.url + '?' + object.data, true);
xhr.send(null);
} else {
xhr.open(object.type, object.url, true);
//必须，设置提交时的内容类型
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
// 传输数据
xhr.send(object.data);
}
} //设置Jsonp方法
function Jsonp(object) {
// 创建script标签并加入到页面中
let callbackName = object.jsonp,
head = document.getElementsByTagName('head')[0];
// 设置传递给后台的回调参数名
object.data['callback'] = callbackName;
let data = formateObject(object.data),
script = document.createElement('script');
head.appendChild(script);
// 创建JSONP的回调函数
//创建jsonp回调函数
window[callbackName] = function(json) {
head.removeChild(script);
clearTimeout(script.timer);
window[callbackName] = null;
object.success && object.success(json);
};
// 发送请求
script.src = object.url + '?' + data;
//为了得知此次请求是否成功，设置超时处理
if(object.time) {
script.timer = setTimeout(function() {
window[callbackName] = null;
head.removeChild(script);
object.error && object.error({
message: '请求超时'
});
}, time);
} } //data的格式化方法
function formateObject(data){
if(data){
let arr = [];
for(let name in data){
//encodeURIComponent() ：用于对 URI 中的某一部分进行编码
arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
} //为了防止缓存，在后面添加一个随机数
arr.push('randomV=' + randomNumber());
return arr.join('&');
}else {
console.error('无法格式化请求数据')
}
} //生成随机数的方法
function randomNumber(){
return Math.floor(Math.random()*10000+404);
} }; const button = document.querySelector('input[type="button"]');
const btn = document.querySelector('button'); const successFun = (res) => {
console.log(res);
let div1= document.querySelector("#div1");
div1.innerHTML = res.name + res.gender;
};
const obj = {
url : 'jsonp.php',
type : 'GET',
jsonp : 'callback',
data : '',
success: successFun,
error: function(){
}
}; const obj1 = {
url : 'test.json',
type : 'GET',
data : '',
success: successFun,
error: function(){
}
}; button.addEventListener('click', () => Ajax(obj));
btn.addEventListener('click',() => Ajax(obj1)); //-->
</script>
</html>
测试效果：
验证JSONP：