2011年12月12日 星期一

jQuery除錯_訪問不同網域之服務出現「No Transport」錯誤

最近持續在一些"接近尾聲"的案子打轉,其中有一個案子幾乎都要使用javascript來處理,對於js不太靈光的我當然遇到很多問題,其中一個是使用ajax()去呼叫其他網域服務時會出現No Transport的錯誤。

環境:
1. ESRI ArcGIS Server所提供的服務。
2. 選擇回傳JSON格式。
3. 呼叫的服務與程式屬於不同網域

經過Google與實際測試後,有幾種方式可以正確取得數值。
1. 使用ajax(),dataType為html:

function getData() {
jQuery.support.cors = true;
$.ajax({
type: "GET",
dataType: "html",
url: url,
contentType: "application/json; charset=utf-8",
success: showData,
error: function (xhr, ajaxOptions, thrownError) {
alert("err: " + thrownError);
}
});
}

function showData(response) {
var obj = jQuery.parseJSON(response);
$.each(obj, function (key, val) {
//拆解JSON
});
}
說明:
1. 重點在於jQuery.support.cors = true;的設定。(官方說明)
2. 該方法所返回的response必須先轉成JSON格式,再進行拆解。

2. 使用ajax(),dataType為jsonp:

function getData() {
$.ajax({
type: "GET",
dataType: "jsonp",
url: url,
contentType: "application/json; charset=utf-8",
success: showData,
error: function (xhr, ajaxOptions, thrownError) {
alert("err: " + thrownError);
}
});
}

function showData(response) {
$.each(response, function (key, val) {
//拆解JSON
});
}
說明:
1. 將dataType設為jsonp(JSON with Padding),但是必須對方服務支援該方式。
2. 該方法所返回的response已為JSON格式。

3. 使用$.getJSON()

function getData() {
jQuery.support.cors = true;
$.getJSON(url,{}, showData);
}

function showData(response) {
$.each(response, function (key, val) {
//拆解JSON
});
}
說明:
1. 該方法所返回的response已為JSON格式。
2. 雖然看似比較單純,但是沒有提供可以做錯誤處理地方。

---------------------------------------------------

*上述三種方式於IE8與Chrome15.0.874.121皆可正常取得回傳數值。
*如果比較深入去查可以發現圍繞著XMLHttpRequest對於跨域的說明。(參考文件)
*如果自己要利用jsonp的方式來實現跨域,"似乎"安全性要格外注意。

沒有留言:

張貼留言