這段JavaScript是如何工作的？

這段代碼只是卡在Body中，它的確如我所料，但我不明白爲什麼。這段JavaScript是如何工作的？

特別是我沒有看到如何調用web服務，它看起來像腳本將呼叫添加到頭部分，也許重新加載頁面，但我不知道，不喜歡不知道或這一行意味着什麼 - script.onload = script.onreadystatechange = function（）

任何人都可以解釋一下嗎？

var script = document.createElement("script"), 
    head = document.getElementsByTagName("head")[0], 
    url = "https://services.postcodeanywhere.co.uk/PostcodeAnywhere/Interactive/FindByPostcode/v1.00/json.ws?"; 

// Build the query string 
url += "&Key=" + encodeURI(pca_Key); 
url += "&Postcode=" + encodeURI(postcode); 
url += "&CallbackFunction=PostcodeAnywhere_FindByPostcode_End"; 

script.src = url; 

// Make the request 
script.onload = script.onreadystatechange = function() { 
    if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") { 
     script.onload = script.onreadystatechange = null; 
     if (head && script.parentNode) 
      head.removeChild(script); 
    } 
} 

head.insertBefore(script, head.firstChild);

斯圖

來源

2011-12-16 Stuart

基本上，它調用JSONP來從postcodeanywhere.co.uk獲取一些數據。 JSONP使用script元素。從postcodeanywhere.co.uk該腳本將調用的腳本URL的CallbackFunction參數標識的功能，它傳遞一個JavaScript對象字面，是這樣的：

您還沒有表現出它，但大概有一個在調用腳本的全局範圍內定義該名稱的函數。

這是爲了解決SOP問題，它不允許ajax調用跨源。

它是如何做它是通過創建一個script元素，分配給它的src URL，它附加到頁面，然後掛鉤readystate事件，因此它可以被再次刪除元素清理後本身。（最後一點並不是所有瀏覽器都會觸發script元素上的readystate事件，爲了徹底完成此操作，您必須鉤住readystate和load。或者在回調中執行清理操作，但需要腳本元素躺在身邊是無害的。）它也應該使用encodeURIComponent，而不是encodeURI。並且沒有必要使用head元素，您可以直接將該腳本附加到document.documentElement。

來源

2011-12-16 12:31:01

這個腳本語法創建<script/> HTML代碼，並給出src URL，並將其添加到<head>在頁面的DOM開頭：

<head> 
    <script src="https://services.postcodeanywhere.co.uk/PostcodeAnywhere/Interactive/FindByPostcode/v1.00/json.ws?&Key=...&Postcode=...&Postcode="></script> 
    <!-- the rest of the HEAD --> 
</head>

它也重視事件處理程序onload和onreadystatechange。加載腳本時會觸發此事件。有趣的是，一旦它被加載，它將刪除事件處理程序和<script/>標記，並自行清理。

可能該腳本在被下載後立即運行一些代碼以用於其副作用。例如。它創建一個全局對象或修改DOM。腳本完成後，由於某種原因將其刪除。

來源

2011-12-16 12:24:24

1）它創建一個DOM元素，

2）把它放在head元素中，從而下載它。

3）執行它

4）移除的DOM元素。

請注意，任何全局函數和變量都將在稍後提供，因此可以執行其中的代碼，並在刪除變量後訪問它們。

來源

2011-12-16 12:26:31

這段JavaScript是如何工作的？

回答

相關問題