小编给大家分享一下Ajax如何实现封装,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
之前是点击按钮取出新闻,现在要实现每隔一段事件进行新闻的更新。这个时候,肯定是加一个定时器,然后每隔一段事件,再进行一次Ajax请求,既然要经常用到Ajax请求,封装函数就很必要了。
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如何实现封装”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!