既然要经常用到Ajax请求，封装函数就很必要了，下面栗子的js代码，我们来进行封装。
window.onload = function() { ???var oBtn = document.getElementById(‘btn‘); ?????oBtn.onclick = function() { ???????var xhr = null; ???????if(window.XMLHttpRequest){ ???????????xhr = new XMLHttpRequest(); ???????}else{ ??????????xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘); ???????} ????????????xhr.open(‘get‘,‘getNews.php‘,true); ???????xhr.send(); ???????xhr.onreadystatechange = function() { ???????????if ( xhr.readyState == 4 ) { ???????????????if ( xhr.status == 200 ) { //红色标识为成功后执行的任务 ???????????????????????????var data = JSON.parse( xhr.responseText ); // 将后台获取的内容转为json类型 ?每一个json里面有两个键：title和date ?????????????????var oUl = document.getElementById(‘ul1‘); // 获取显示新闻列表的节点 ?????????????????var html = ‘‘; ?????????????????for (var i=0; i<data.length; i++) { ??// 循环所有的json数据，并把每一条添加到列表中 ???????????????????????html += ‘<li><a href="">‘+data[i].title+‘</a> [<span>‘+data[i].date+‘</span>]</li>‘; ??????????????????} ??????????????????oUl.innerHTML = html; //把内容放在页面里 ???????????????} else { ???????????????????alert(‘出错了,Err：‘ + xhr.status); ???????????????} ???????????} ???????????????????} ???????????}}</script>封装函数的要点就是把重复使用的部分提取取来，同时一些变化的东西作为参数，无法作为参数的进行判断处理。
1 所以我们先看看变化的东西都有哪些：1 请求方式是get/post 2 请求的地址 3 请求的数据 4 请求成功后需要做的事情
所以这四个就做为函数的参数：ajax(method,url,data,success);
2 因为不同的请求方式，我们传数据的方式不一样，所以对于这些，需要进行条件判断。
3 还有一个问题就是关于 xhr.responseText ，变量xhr是在封装函数中声明的，所以这个东西属于ajax函数的，我们在success函数中是用不到的， 但是success这个函数里面需要用这个数据。所以办法就是在封装函数中调用success函数的时候，把xhr.responseText当作参数传出去。success(xhr.responseText)。
其实这是一种回调,回调就是一个函数作为另一个函数的参数，并在另一个函数里面被调用，这个栗子就是success作为ajax函数的参数，并在ajax里面被调用。 （其实个人感觉就是函数在用参数，函数的参数，就是拿来用的，只是现在参数是函数，所以就调用呗）。
所以封装后就是这样：
function ajax(method, url, data, success) { ???var xhr = null; ???try { ???????xhr = new XMLHttpRequest(); ???} catch (e) { ???????xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘); ???} ???????if (method == ‘get‘ && data) { ???????url += ‘?‘ + data; ???} ???????xhr.open(method,url,true); ???if (method == ‘get‘) { ???????xhr.send(); ???} else { ???????xhr.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘); ???????xhr.send(data); ???} ???????xhr.onreadystatechange = function() { ???????????????if ( xhr.readyState == 4 ) { ???????????if ( xhr.status == 200 ) { ???????????????success && success(xhr.responseText); //如果函数存在就执行后面的 ?&&的执行过程就是前面的是真，才执行后面的。 ???????????} else { ???????????????alert(‘出错了,Err：‘ + xhr.status); ???????????} ???????} ???????????}}
调用就是这样
ajax(‘get‘,‘getNews.php‘,‘‘,function(data) { ???????var data = JSON.parse( data ); ???????????var oUl = document.getElementById(‘ul1‘); ???????var html = ‘‘; ???????for (var i=0; i<data.length; i++) { ????????????html += ‘<li><a href="">‘+data[i].title+‘</a> [<span>‘+data[i].date+‘</span>]</li>‘; ????????} ???????????oUl.innerHTML = html; ?});其实这个封装，还不是那么好，比如上面的data没有数据，我们还是得占位，像jquery里面用json格式传参，就方便一些，目前还未总结好，后期补充。
Ajax基础之原生js封装
原文地址：https://www.cnblogs.com/sunjuncoder/p/9907660.html