問題描述
我在碼頭服務器上執行了一段 javascript,該服務器正在向另一臺服務器(wamp 服務器)上的 scoket 發送 XMLHTTPRequest.請求被發送到套接字,但是 XHR 響應似乎被阻塞了.
I have a piece of javascript executing on a jetty server which is sending a XMLHTTPRequest to a scoket on another server(wamp server). The request gets sent to the socket, however the XHR response seems to be getting blocked.
我聽說我可以使用 JSONP 來解決這個問題.但是,由于我對 javascript 都很陌生,而且我從未使用過 JSONP 技術,在此之前我非常感謝有關如何使用這種技術的任何幫助?
I have heard that I can use JSONP to overcome this problem. However as I am new to both javascript and I have never used JSONP technique before I would greatly appreciate any help in how to use this technique?
function sendPost(url, postdata, callback) {
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null) {
alert ("Browser does not support HTTP Request")
return
}
xmlHttp.onreadystatechange=callback
xmlHttp.open("POST",url,true)
xmlHttp.send(postdata);
}
function sendInitRQ(width, height) {
var post = "<?xml version="1.0" encoding="UTF-8"?><command type="init"><width>" + width + "</width><height>" + height + "</height></command>";
sendPost("http://localhost:80/socket.php", post, initReturned);
}
我知道 php 套接字正在接收帖子,因為當我檢查服務器日志時,我在 get 請求中得到 200.
I know that the php socket is recieving the post as when i check the server log i get a 200 on the get request.
我只想知道如何使用 JSONP 方法?我已經看到了這種方法的例子,但我仍然不確定如何去做.
I just want to know how can I use the JSONP approach? I have seen exampples of the approach but Iam stilll unsure of how to do it.
推薦答案
JSONP 技術使用完全不同的機制向服務器發出 HTTP 請求并根據響應進行操作.它需要客戶端頁面和服務器上的協作代碼.服務器必須有一個 URL 來響應 HTTPGET"請求,其中包含一個包裹在函數調用中的 JSON 塊.因此,您不能只對任何舊服務器進行 JSONP 事務;它必須是明確提供該功能的服務器.
The JSONP technique uses a completely different mechanism for issuing HTTP requests to a server and acting on the response. It requires cooperating code in the client page and on the server. The server must have a URL that responds to HTTP "GET" requests with a block of JSON wrapped in a function call. Thus, you can't just do JSONP transactions to any old server; it must be a server that explicitly provides the functionality.
這個想法是您的客戶端代碼動態創建一個 塊,并將src"屬性設置為 JSONP 服務器的 URL.URL 應該包含一個參數,告訴服務器您希望它使用 JSON 數據調用的 Javascript 函數的名稱.(具體使用什么參數名稱取決于服務器;通常是回調",但我見過一些使用jsonp".)客戶端當然必須在全局范圍內具有該功能.換句話說,如果你有這樣的功能
The idea is that your client-side code creates a <script>
block dynamically, with the "src" attribute set to the URL of the JSONP server. The URL should contain a parameter telling the server the name of the Javascript function you expect it to call with the JSON data. (Exactly what parameter name to use depends on the server; usually it's "callback", but I've seen some that use "jsonp".) The client must of course have that function in the global scope. In other words, if you have a function like
function handleJSON(json) {
var something = json.something;
// ... whatever ...
}
然后你的 URL 告訴服務器調用handleJSON",服務器響應應該是這樣的:
then your URL tells the server to call "handleJSON", and the server response should look like this:
handleJSON({"id": 102, "something": { "more": "data", "random": true }});
因此,當 <script>
塊從您提供的src" URL 加載時,瀏覽器將解釋內容(來自服務器的響應)并調用您的函數.
Thus when the <script>
block is loaded from the "src" URL you gave, the browser will interpret the contents (the response from the server) and your function will be called.
應該清楚的是,您應該只向您信任的服務器發出 JSONP 請求,因為它們會發回代碼以在您的客戶端中執行,并且可以訪問您的客戶端與其他安全站點之間的任何活動會話.
It should be clear that you should only make JSONP requests to servers you trust, since they're sending back code to execute in your client, with access to any active session(s) your client has with other secured sites.
編輯 —這是一篇不錯的文章:http://www.ibm.com/developerworks/library/wa-aj-jsonp1/
edit — Here's a nice article: http://www.ibm.com/developerworks/library/wa-aj-jsonp1/
這篇關于如何使用 JSONP 克服 XSS 問題?的文章就介紹到這了,希望我們推薦的答案對大家有所幫助,也希望大家多多支持html5模板網!