代码之家 › 专栏 › 技术社区 › Streching my competence

具有更好的可重用性的ajax?

dynamic ajax javascript

Streching my competence · 技术社区 · 6 年前

我的ajax分为两部分。“ajhax”函数有两个值,一个是要加载的文件的url,另一个是可以指定其结束位置的函数(“cfunton”使用函数“loadToContent”):

第一部分:

function AJHAX(url, cFunction) {
    var xhttp;
    // compatible with IE7+, Firefox, Chrome, Opera, Safari
    xhttp=new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            cFunction(this);
        }
    };
    xhttp.open("GET", url, true);
    xhttp.send();
}

第二部分:

function loadToContent(xhttp) {
        document.getElementById('content').innerHTML =
            xhttp.responseText;
}

因此,从第一部分开始,我可以通过向链接/元素添加以下内容来调用菜单中的功能:

onclick="AJHAX('page.php', loadToContent)"

但是,有了这个,我只能指定要加载哪个页面,而不能指定要加载到哪个元素。我试着把它作为代码第二部分的标准,如下所示。但无济于事:

function loadToContent(xhttp, targetElement) {
        document.getElementById(targetElement).innerHTML =
            xhttp.responseText;
}

Onclick:

onclick="AJHAX('menu.php', loadToContent(sidebar))"

有什么建议吗?

已找到解决方案(感谢@schogges,请投赞成票!)。完整的工作示例:

JS:

function AJHAX(url, targetElement, cFunction) {
    var xhttp;
    // compatible with IE7+, Firefox, Chrome, Opera, Safari
    xhttp=new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            cFunction(this, targetElement);
        }
    };
    xhttp.open("GET", url, true);
    xhttp.send();
}

function loadToContent(xhttp, targetElement) {
        document.getElementById(targetElement).innerHTML =
            xhttp.responseText;
}

HTML

<div onclick="AJHAX('home.php', 'content', loadToContent);closeSidebar()">
Home</div>

所以在html中,只需指定要加载的页面、要加载页面的元素的id,然后指定实际将其加载到元素的“loadToContent”函数。如你所见,也有 ;关闭边栏()“ 在这里,即使它对本例没有任何作用,我也将把它留在这里向任何新用户展示,您可以通过这种方式向onclick事件添加多个函数。我只是编辑一些css来隐藏侧边栏。

2 回复 | 直到 6 年前

schogges 6 年前

使用第三个参数在 AJHAX() ?

试试这个:

function AJHAX(url, target, cFunction) {
  var xhttp;
  // compatible with IE7+, Firefox, Chrome, Opera, Safari
  xhttp=new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
          cFunction(this, target);
      }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}

function loadToContent(xhttp, targetElement) {
    document.getElementById(targetElement).innerHTML =
        xhttp.responseText;
}

Onclick:

onclick="AJHAX('menu.php', 'sidebar', loadToContent)"

Emil S. Jørgensen 6 年前

那行 onclick="AJHAX('menu.php', loadToContent(sidebar))" 不起作用,因为它引用了惰性字符串。

相反,您需要做的是引用一个函数,因此它实际上执行了预期的任务: onclick = function () { AJHAX('https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js', loadToContent);};

以下是我的答案:

//First part:
function AJHAX(url, cFunction) {
    var xhttp;
    // compatible with IE7+, Firefox, Chrome, Opera, Safari
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            cFunction(this);
        }
    };
    xhttp.open("GET", url, true);
    xhttp.send();
}
//Second part:
function loadToContent(xhttp) {
    console.log(xhttp.responseText);
    alert(xhttp.responseText);
}
//TEST
var button = document.body.appendChild(document.createElement("h1"));
button.textContent = "Click me!";
button.onclick = function () {
    AJHAX('https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js', loadToContent);
};