• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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; idata.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; idata.length; i++) {
    html += 'li>a href="">'+data[i].title+'/a> [span>'+data[i].date+'/span>]/li>';
    }
    oUl.innerHTML = html;
    }); 

    其实这个封装,还不是那么好,比如上面的data没有数据,我们还是得占位,像jquery里面用json格式传参,就方便一些,目前还未总结好,后期补充。

    您可能感兴趣的文章:
    • 一个AJAX自动完成功能的js封装源码[支持中文]
    • 一个封装的Ajax类
    • JavaScript 封装Ajax传递的数据代码
    • 自己动手封装的 ajax
    • ajax的工作原理以及异步请求的封装介绍
    • 对Jquery中的ajax再封装,简化操作示例
    • 原生JS封装Ajax插件(同域、jsonp跨域)
    • jQuery Ajax 全局调用封装实例代码详解
    • Ajax基础详解教程(一)
    • 原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
    • Ajax基础详解教程(二)
    上一篇:Ajax基础详解教程(二)
    下一篇:探讨Ajax中有关readyState(状态值)和status(状态码)的问题
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

    Ajax基础教程之封装(三) Ajax,基础,教程,之,封装,