javascript - 如何创建一个 html 表单以处理 isitup.org 小部件的 url

Question

我想知道如何创建一个 html 表单来处理对http://isitup.org的 url 请求。

该网站提供了一个 javascript小部件，它让我可以选择在 html 文件中传递 url，但我想知道如何使用 html 表单来执行此操作。

Answer 1

您可以在没有 HTML 表单的情况下轻松完成此操作，因为调用可以是异步的

在您的 html 中：

<input type="text" id="txtDomain" value="stackoverflow.com" /> 
<button>Check Domain</button>

<div id="result"></div>

在 jQuery 中：

$(function() {

  $("button").click(function() {

    var url = 'http://isitup.org/' + $("#txtDomain").val() + '.json';

    $.getJSON(url + "?callback=?", function(data) {

      $("#result").html(
        "<h2>" + data.domain + "</h2>" +
        "<ul>" + 
          "<li>Code: " + data.response_code + "</li>" +
          "<li>IP: " + data.response_ip + "</li>" +
          "<li>Time " + data.response_time + " ms</li>" +
        "</ul>"
      );

    });

  });


});

可以在JsBIN上找到一个活生生的例子

Answer 2

isitup={    server : "http://isitup.org/",
    exec : function() {
        var doc = document, node = this.get_elements(document, "isitup-widget"), server = this.server, requested = [];
        var i, len;
        for (i = 0, len = node.length; i < len; i++) {
            var HTML = "";
            var domain = node[i].getAttribute("data-domain");
            if (!domain) {
                domain = window.location.hostname;
                node[i].setAttribute("data-domain", domain);
            }
            HTML += '<div class="isitup-icon">';
            HTML += '<img src="'
                    + server
                    + 'widget/img/loader.gif" width="16px" height="16px" style="vertical-align: middle;" />';
            HTML += '</div>';
            HTML += '<div class="isitup-domain">';
            HTML += '<a href="' + server + domain + '">' + domain + '</a>';
            HTML += '</div>';
            node[i].innerHTML = HTML;
            if (this.is_domain(domain)) {
                if (!this.in_list(domain, requested)) {
                    this.get_json(domain);
                    requested.push(domain);
                }
            } else {
                this.update({
                    "domain" : domain,
                    "status_code" : 3
                });
            }
        }
    },
    get_json : function(domain) {
        var t = "script", d = document;
        var j = d.createElement(t), p = d.getElementsByTagName(t)[0];
        j.type = "text/javascript";
        j.src = this.server + domain + ".json?callback=isitup.update";
        p.parentNode.insertBefore(j, p);
    },
    update : function(result) {
        var node = this.get_elements(document, "isitup-widget"), widget = [];
        var i, len;
        for (i = 0, len = node.length; i < len; i++) {
            if (node[i].getAttribute("data-domain") == result.domain
                    && !node[i].getAttribute("data-checked")) {
                widget.push(node[i]);
                node[i].setAttribute("data-checked", true);
            }
        }
        var j;
        for (j = 0, len = widget.length; j < len; j++) {
            switch (result.status_code) {
            case 1:
                this.set_image("online", widget[j]);
                if (widget[j].hasAttribute("data-uplink")) {
                    this.set_link(widget[j].getAttribute("data-uplink"),
                            widget[j]);
                }
                break;
            case 2:
                this.set_image("offline", widget[j]);
                if (widget[j].hasAttribute("data-downlink")) {
                    this.set_link(widget[j].getAttribute("data-downlink"),
                            widget[j]);
                }
                break;
            case 3:
                this.set_image("error", widget[j]);
                this.set_link(this.server + "d/"
                        + widget[j].getAttribute("data-domain"), widget[j]);
                break;
            }
        }
    },
    set_image : function(image, node) {
        this.get_elements(node, "isitup-icon")[0].firstChild.setAttribute(
                "src", this.server + "widget/img/" + image + ".png");
    },
    set_link : function(link, node) {
        this.get_elements(node, "isitup-domain")[0].firstChild.setAttribute(
                "href", link);
    },
    is_domain : function(domain) {
        re = /^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}$/;
        return (re.test(domain)) ? true : false;
    },
    in_list : function(value, list) {
        var i, len;
        for (i = 0, len = list.length; i < len; i++) {
            if (list[i] == value) {
                return true;
            }
        }
        return false;
    },
    get_elements : function(node, classname) {
        var doc = document;
        if (typeof doc.getElementsByClassName == "function") {
            return node.getElementsByClassName(classname);
        } else if (typeof doc.querySelectorAll == "function") {
            return node.querySelectorAll("." + classname);
        } else {
            var div = doc.getElementsByTagName("div"), widgets = [];
            var i, len;
            for (i = 0, len = div.length; i < len; i++) {
                if (div[i].className == classname) {
                    widgets.push(div[i]);
                }
            }
            return widgets;
        }
    }
};
var alreadyrunflag = 0;
if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", function() {
        alreadyrunflag = 1;
        isitup.exec();
    }, false);
} else if (document.all && !window.opera) {
    document
            .write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>');
    var contentloadtag = document.getElementById("contentloadtag");
    contentloadtag.onreadystatechange = function() {
        if (this.readyState == "complete") {
            alreadyrunflag = 1;
            isitup.exec();
        }
    };
}
window.onload = function() {
    setTimeout("if (!alreadyrunflag) { isitup.exec }", 0);
};

他们用图书馆来做。找出你必须做的事情，只使用那个，重写库，然后附加。我认为这很容易。

   get_json : function(domain) {
        var t = "script", d = document;
        var j = d.createElement(t), p = d.getElementsByTagName(t)[0];
        j.type = "text/javascript";
        j.src = this.server + domain + ".json?callback=isitup.update";
        p.parentNode.insertBefore(j, p);
    },
    update : function(result) {
        var node = this.get_elements(document, "isitup-widget"), widget = [];
        var i, len;
        for (i = 0, len = node.length; i < len; i++) {
            if (node[i].getAttribute("data-domain") == result.domain
                    && !node[i].getAttribute("data-checked")) {
                widget.push(node[i]);
                node[i].setAttribute("data-checked", true);
            }
        }

您只需将数据设置为此函数，在更新函数中，您可以使用 result.status_code 进行响应。