如何創建一個html表單來處理url到isitup.org部件

Question

我想知道如何創建一個html表單來處理url請求到http://isitup.org。

website提供了一個javascript widget，它給了我一個選項，可以在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>" 
    ); 

    }); 

    }); 


}); 

一個活生生的例子can be found on 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作爲響應。