jquerys Ajax und getJson domänenübergreifend, um JSON-Daten zu erhalten (grafisches Tutorial)

In diesem Artikel wird hauptsächlich die Implementierungsmethode von jquerys Ajax und getJson zum domänenübergreifenden Abrufen von JSON-Daten vorgestellt. Ich hoffe, dass es für alle hilfreich ist.

Viele Entwickler werden es verwenden jquery für die Interaktion mit Daten auf der Front-End- und Serverseite, daher ist es leicht anzunehmen, dass Sie jquery im Front-End verwenden können, um Daten von jeder Site zu lesen. Als ich kürzlich an der Entwicklung arbeitete, entschied ich mich, die Daten direkt in HTML zu lesen, anstatt sie über den Server zu übertragen, da ich Daten mit einem Projekt eines Drittunternehmens teilen musste und weil ich darüber nachdachte, nicht viele Serverressourcen zu beanspruchen. Dann bin ich gerade auf das Problem des domänenübergreifenden Zugriffs auf der Browserseite gestoßen.

Domänenübergreifende Sicherheitsbeschränkungen beziehen sich auf die Browserseite, und auf der Serverseite gibt es keine domänenübergreifenden Sicherheitsbeschränkungen.

Es gibt derzeit zwei häufig verwendete Methoden für den domänenübergreifenden Zugriff auf der Browserseite:

1. Durch Ajax von jQuery Domänenübergreifend wird dies tatsächlich mit JSONP implementiert.

jsonp ist die Abkürzung für Englisch „json with padding“. Es ermöglicht die serverseitige Generierung von Skript-Tags und die Rückgabe an den Client. Das heißt, Javascript-Tags werden dynamisch generiert und Daten werden über einen Javascript-Rückruf gelesen.

Seitenseitiger HTML-Beispielcode:

//首先要引入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);
}
});
});

Serverseitiger Beispielcode am Beispiel von Java:

Serverseitiger Code ist der entscheidende Punkt Solange der Client jsonp übergibt, ist ein direkter domänenübergreifender Zugriff möglich. Dies ist jedoch nicht der Fall und erfordert serverseitige Unterstützung.

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);
}

Das Prinzip von JSONP:

Registrieren Sie zuerst einen Rückruf auf dem Client (z. B. „jsoncallback“) und geben Sie dann den ein Der Name des Rückrufs (z. B. success_jsonpCallback) wird an die entsprechende Verarbeitungsfunktion auf der Serverseite übergeben.

Der Server generiert zunächst die JSON-Daten, die an den Client zurückgegeben werden müssen. Verwenden Sie dann die Javascript-Syntax, um eine Funktion zu generieren. Der Funktionsname ist der Wert des übergebenen Parameters (jsoncallback) (success_jsonpCallback).

Schließlich werden die JSON-Daten direkt als Parameter in die Funktion eingefügt, wodurch ein JS-Syntaxdokument generiert und an den Client zurückgegeben wird.
Der Client-Browser analysiert das Skript-Tag und verwendet die vom Server zurückgegebenen Daten als Parameter
übergibt die vom Client vordefinierte Rückruffunktion (wie im obigen Beispiel durch die jquery-Methode $.ajax() gekapselt). Erfolg: Funktion (json)).

Tatsächlich erfolgt das domänenübergreifende Laden von Daten durch dynamisches Hinzufügen von Skripten. Daten können nicht direkt abgerufen werden, daher ist eine Rückruffunktion erforderlich.

2. Verwenden Sie getJson von jquery, um Daten domänenübergreifend zu lesen

Tatsächlich ist das Grundprinzip der getJson-Methode dasselbe wie die Art und Weise, wie Ajax JSONP verwendet.

GetJson wird häufig in JQuery verwendet, um Remote-Daten abzurufen und im JSON-Format zurückzugeben. Der Prototyp der Funktion lautet wie folgt:

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

< th>Parameter< /th>

Beschreibung

URL

Erforderlich. Gibt die URL an, an die die Anfrage gesendet wird.

Daten

Optional. Gibt die Daten an, die mit der Anfrage an den Server gesendet werden sollen.

success(data,status,xhr)

参数	描述
url	必需。规定将请求发送的哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
success(data,status,xhr)	可选。规定当请求成功时运行的函数。 额外的参数： response - 包含来自请求的结果数据 status - 包含请求的状态 xhr - 包含 XMLHttpRequest 对象

Optional. Gibt eine Funktion an, die ausgeführt werden soll, wenn die Anforderung erfolgreich ist.

Zusätzliche Parameter:

• response – Enthält die Ergebnisdaten der Anfrage

  < /li>

• status – Enthält den Status der Anfrage

• xhr – Enthält das XMLHttpRequest-Objekt

Diese Funktion ist die abgekürzte Ajax-Funktion, die tatsächlich äquivalent ist zu:

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
});

Um auf den Punkt zu kommen: Schauen wir uns an, wie man getJson verwendet, um Daten über Domänen hinweg abzurufen.

Beispielcode für eine HTML-Seite:

$.getJSON("http://api.taobao.com/apitools/ajax_props.do&jsoncallback=?",
    function (data) {
        alert(data);
    }
);

Ausführungsprinzip:

Beim Senden einer Anfrage müssen Sie einen Rückruf übergeben Funktionsname An den Server erhält der Server den Namen der Rückruffunktion und gibt dann die Rückgabedaten in Form von Parametern an den Client zurück, damit der Client sie anpassen kann.

Der Adresse, die die Anfrage-URL sendet, muss also ein Parameter wie jsoncallback=? folgen, der die ?-Nummer automatisch durch den Namen der automatisch generierten Rückruffunktion ersetzt.

Die endgültige eigentliche Anfrage lautet also: http://api.taobao.com/apitools/ajax_props.do&jsoncallback=jsonp1322444422697Also möchte ich es mit dem vergleichen Ajax-MethodeDas heißt, eine der Rückruffunktionen ist ein automatisch generierter Funktionsname und die andere ist ein manuell angegebener Funktionsname.
Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:
jquery+

Ajax

Machen Sie es bei der Anwendung von Iframe an die Höhe anpassbar
AJAX Was sind die Implementierungsmethoden für die sekundäre Verknüpfung

jquery+AjaxWie gehe ich mit dem zurückgegebenen chinesischen verstümmelten JSON um?

Das obige ist der detaillierte Inhalt vonjquerys Ajax und getJson domänenübergreifend, um JSON-Daten zu erhalten (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!