Ajax基础教程之封装(三)

前端技术 2023/09/01 AJAX

在上篇文章给大家介绍了Ajax基础详解教程(一)    Ajax基础详解教程(二)

今天接着我们上篇博文的栗子，现在我来扩大一下需求，之前是点击按钮取出新闻，现在要实现每隔一段事件进行新闻的更新。这个时候，肯定是加一个定时器，然后每隔一段事件，再进行一次Ajax请求，既然要经常用到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格式传参，就方便一些，目前还未总结好，后期补充。

本文地址：https://www.stayed.cn/item/1587

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案