首頁 > web前端 > js教程 > jquery的ajax和getJson跨域取得json資料(圖文教學)

jquery的ajax和getJson跨域取得json資料(圖文教學)

亚连
發布: 2018-05-21 15:58:17
原創
2631 人瀏覽過

本篇文章主要是對jquery的ajax和getJson跨域獲取json數據的實現方法進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助

很多開發人員在使用jquery在前端和伺服器端進行資料交互,所以很容易會認為在前端利用jquery就可以讀取任何網站的資料了。最近在進行開 發時,因為要和第三方公司的一個專案進行資料的共享,因為考慮多不佔用伺服器的資源,遂決定直接在html進行資料的讀取,不走伺服器端進行中轉了。然後 正好就遇到了瀏覽器端跨網域存取的問題。

跨網域的安全限制都是指瀏覽器端來說的,伺服器端不存在跨網域安全限制的問題。

目前瀏覽器端跨網域存取常用的兩種方法有兩種:

1、透過jQuery的ajax進行跨域,這其實是採用的jsonp的方式來實現的。

jsonp是英文json with padding的縮寫。它允許在伺服器端產生script tags至返回客戶端,也就是動態產生javascript標籤,透過javascript callback的形式實現資料讀取。

html頁面端範例程式碼:

//首先要引入jquery的js包
jQuery(document).ready(function(){
$.ajax({
type : "get", //jquey是不支持post方式跨域的
async:false,
url : "http://api.taobao.com/apitools/ajax_props.do", //跨域请求的URL
dataType : "jsonp",
//传递给请求处理程序,用以获得jsonp回调函数名的参数名(默认为:callback)
jsonp: "jsoncallback",
//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
jsonpCallback:"success_jsonpCallback",
//成功获取跨域服务器上的json数据后,会动态执行这个callback函数
success : function(json){
alert(json);
}
});
});
登入後複製

伺服器端範例程式碼,以java為例:

伺服器端程式碼,是重點,開始以為,只要客戶端透過jsonp就可以直接跨網域訪問,其實不然,需要伺服器端的支援才行。

public void jsonpTest() throws IOException{
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
//根据html指定的jsonp回调函数的参数名,获取回调函数的名称
//callbackName的值其实就是:success_jsonpCallback
String callbackName = (String)request.getAttribute("jsoncallback");
//简单模拟一个json字符串,实际可使用google的gson进行转换,次数通过字符串拼接
//{"name":"张三","age":28}
//\是对"号进行转义
String jsonStr = "{\"name\":\"张三\",\"age\":28}";
//最终返回的数据为:success_jsonpCallback({"name":"张三","age":28})
String renderStr = callbackName+"("+jsonStr+")";
response.setContentType("text/plain;charset=UTF-8");
response.getWriter().write(renderStr);
}
登入後複製

jsonp的原理:

#先在客戶端註冊一個callback (如:'jsoncallback'), 然後把callback的名字(如:success_jsonpCallback)傳給伺服器端對應的處理函數。

伺服器先生成需要傳回給客戶端的 json 資料。然後以 javascript 語法的方式,產生一個function , function 名字就是傳遞上來的參數(jsoncallback)的值(success_jsonpCallback) 。

最後將 json 資料直接以入參的方式,放置到 function 中,這樣就產生了一段 js 語法的文檔,返回給客戶端。
客戶端瀏覽器,解析script標籤,並將伺服器端傳回的數據,作為參數,
傳入到了客戶端預先定義好的callback 函數(如上例中jquery $.ajax()方法封裝的的success: function (json))裡。

實際上跨域是透過動態增加script來載入數據,無法直接取得數據,所以需要使用回呼函數。

2.使用jquery的getJson進行跨域讀取資料

#實際上getJson方式的根本原理和ajax使用jsonp的方式是一樣的。

jquery中常用getJson來呼叫取得遠端的數據,並透過json格式傳回。函數的原型如下:

jQuery.getJSON(url,data,success(data,status,xhr))

##參數額外的參數:
##描述

url

  • 必要。規定將請求發送的哪個 URL。

  • data
  • #可選。規定連同請求發送到伺服器的資料。

  • success(data,status,xhr)

  • 可選。規定當請求成功時運行的函數。

response

 - 包含來自請求的結果資料

status - 包含請求的狀態

xhr

 - 包含XMLHttpRequest 物件

#該函數是簡寫的ajax函數,實際上等價於:

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
});
登入後複製

言歸正傳,下面我們來看如何使用getJson跨域取得資料。

html頁面範例程式碼:

執行原理:

#在傳送請求時需要傳一個callback的回呼函數名到伺服器端,伺服器端拿到這個回呼函數名,再將回傳資料用參數的形式反回客戶端,這樣客戶端就能夠調到。
所以發送請求URL的位址後面一定要上jsoncallback=?這樣的參數,jquery會將?號自動替換成自動產生的回呼函數的名稱。

所以最終的實際請求為:http://api.taobao.com/apitools/ajax_props.do&jsoncallback=jsonp13224444422697所以和ajax的方式想比較,也就是callback函數一個是自動產生的函數名,一個是手動指定的函數名。

上面是我整理給大家的,希望今後對大家有幫助。 ######相關文章:#########jquery ###ajax###應用iframe時使其自適應高度##############AJAX二級連動有哪些實作方法###############jquery ###ajax###傳回json中文亂碼現象怎麼處理#########

以上是jquery的ajax和getJson跨域取得json資料(圖文教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板