問(wèn)題描述
我在碼頭服務(wù)器上執(zhí)行了一段 javascript,該服務(wù)器正在向另一臺(tái)服務(wù)器(wamp 服務(wù)器)上的 scoket 發(fā)送 XMLHTTPRequest.請(qǐng)求被發(fā)送到套接字,但是 XHR 響應(yīng)似乎被阻塞了.
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.
我聽(tīng)說(shuō)我可以使用 JSONP 來(lái)解決這個(gè)問(wèn)題.但是,由于我對(duì) javascript 都很陌生,而且我從未使用過(guò) JSONP 技術(shù),在此之前我非常感謝有關(guān)如何使用這種技術(shù)的任何幫助?
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 套接字正在接收帖子,因?yàn)楫?dāng)我檢查服務(wù)器日志時(shí),我在 get 請(qǐng)求中得到 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 方法?我已經(jīng)看到了這種方法的例子,但我仍然不確定如何去做.
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 技術(shù)使用完全不同的機(jī)制向服務(wù)器發(fā)出 HTTP 請(qǐng)求并根據(jù)響應(yīng)進(jìn)行操作.它需要客戶(hù)端頁(yè)面和服務(wù)器上的協(xié)作代碼.服務(wù)器必須有一個(gè) URL 來(lái)響應(yīng) HTTPGET"請(qǐng)求,其中包含一個(gè)包裹在函數(shù)調(diào)用中的 JSON 塊.因此,您不能只對(duì)任何舊服務(wù)器進(jìn)行 JSONP 事務(wù);它必須是明確提供該功能的服務(wù)器.
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.
這個(gè)想法是您的客戶(hù)端代碼動(dòng)態(tài)創(chuàng)建一個(gè) 塊,并將src"屬性設(shè)置為 JSONP 服務(wù)器的 URL.URL 應(yīng)該包含一個(gè)參數(shù),告訴服務(wù)器您希望它使用 JSON 數(shù)據(jù)調(diào)用的 Javascript 函數(shù)的名稱(chēng).(具體使用什么參數(shù)名稱(chēng)取決于服務(wù)器;通常是回調(diào)",但我見(jiàn)過(guò)一些使用jsonp".)客戶(hù)端當(dāng)然必須在全局范圍內(nèi)具有該功能.換句話(huà)說(shuō),如果你有這樣的功能
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 告訴服務(wù)器調(diào)用handleJSON",服務(wù)器響應(yīng)應(yīng)該是這樣的:
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 }});
因此,當(dāng) <script>
塊從您提供的src" URL 加載時(shí),瀏覽器將解釋內(nèi)容(來(lái)自服務(wù)器的響應(yīng))并調(diào)用您的函數(shù).
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.
應(yīng)該清楚的是,您應(yīng)該只向您信任的服務(wù)器發(fā)出 JSONP 請(qǐng)求,因?yàn)樗鼈儠?huì)發(fā)回代碼以在您的客戶(hù)端中執(zhí)行,并且可以訪問(wèn)您的客戶(hù)端與其他安全站點(diǎn)之間的任何活動(dòng)會(huì)話(huà).
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.
編輯 —這是一篇不錯(cuò)的文章:http://www.ibm.com/developerworks/library/wa-aj-jsonp1/
edit — Here's a nice article: http://www.ibm.com/developerworks/library/wa-aj-jsonp1/
這篇關(guān)于如何使用 JSONP 克服 XSS 問(wèn)題?的文章就介紹到這了,希望我們推薦的答案對(duì)大家有所幫助,也希望大家多多支持html5模板網(wǎng)!