Heim > Artikel > Backend-Entwicklung > Zusammenfassung der Verwendung von Ajax und JSONP
Zusammenfassung der Verwendung von Ajax und JSONP
- 小云云Original
- 2017-12-25 09:44:152259Durchsuche
Ajax und JSONP können mit dem Hintergrund kommunizieren, um Daten und Informationen abzurufen, müssen jedoch nicht die gesamte Seite aktualisieren, um eine teilweise Aktualisierung der Seite zu erreichen. In diesem Artikel erfahren Sie, wie Sie Ajax und JSONP verwenden. Daher haben wir eine Zusammenfassung der Verwendung von Ajax und JSONP erstellt, um sie mit Ihnen zu teilen. Wir hoffen, dass sie allen weiterhelfen kann.
1. Ajax
•Definition: Eine Technologie, die HTTP-Anfragen für asynchrone Kommunikation mit dem Hintergrund sendet.
•Prinzip: Instanziieren Sie das xmlhttp-Objekt und verwenden Sie dieses Objekt, um mit dem Hintergrund zu kommunizieren.
Die Same-Origin-Richtlinie von Ajax:
•Die von Ajax angeforderten Seiten oder Ressourcen können nur Ressourcen unter derselben Domäne sein, keine Ressourcen aus anderen Domänen. Dies basiert auf der Berücksichtigung der Sicherheit bei der Gestaltung von Ajax .
---------------- ------ ------------------------------------
Ajax-Methode :
1. $.ajax({}):
•Gemeinsame Parameter: •URL: Netzwerkadresse anfordern
•Typ: Anforderungsmethode, der Standardwert ist üblicherweise „GET“. verwendet 'POST'
•dataType: Legen Sie das zurückgegebene Datenformat fest, verwenden Sie im Allgemeinen JSON oder HTML und JSONP; •data: Legen Sie die an den Server gesendeten Daten fest
•.done(): Legen Sie den Rückruf fest Funktion nach erfolgreicher Anfrage
•.fail(): Legt die Rückruffunktion fest, nachdem die Anfrage fehlgeschlagen ist
•async: Legt fest, ob sie asynchron ist, der Standardwert ist „true“, was asynchron bedeutet
$(function () {
$("input").click(function () {
$.ajax({
url: "./data.json",
type: "get",
dataType: "json",
});
.done(function(data) {//请求成功的回调函数
$("input").val(dat.name);
})
.fail(function() {
alert('服务器超时，请重试！');
});
});
})
......
<body>
<p>
<input type="button" value="xinzhi">
</p>
</body>Hinweis: Daten stellen die vom Hintergrund zurückgegebenen Daten dar. Die Verwendung von Ajax muss von der Serverumgebung abhängen. 2. $.get():•URL: Die besuchte URL, die der Same-Origin-Richtlinie folgen muss;
•Daten: Die an den Server gesendeten Daten.
•function(data,status){}: Fordern Sie die Funktion auf, erfolgreich ausgeführt zu werden.
•dataType: Der Datentyp der Anforderungsantwort.
//参考代码：
$(function () {
$("input").click(function () {
$.get(
"./data.json",
function (data,status) {
console.log(data.name);
},
"json"
);
});
})
......
<body>
<p>
<input type="button" value="xinzhi">
</p>
</body>•Die Parameter der $.get()-Methode unterscheiden sich von denen von $.ajax(). Die URL ist ein erforderlicher Parameter und die anderen drei sind optional. •Daten sind die zurückgegebenen Daten, der Status gibt den Status der Anfrage an, im Allgemeinen einschließlich „Erfolg“, „Fehler“, „Zeitüberschreitung“ usw.
•Wenn der Datentyp JSONP ist, können Sie auch Daten anfordern domänenübergreifend.
•Keine Rückruffunktion für Anforderungsfehler
• Die verwendete Methode ist genau die gleiche wie die Methode $.get()
•Daten: Anforderungsparameter, optional; Antwort, Status, xhr): Anfrage erfolgreich Die Rückruffunktion
•Die zurückgegebenen Daten werden in p platziert die zurückgegebenen Daten und der Status sind der Status der Anfrage;
•Keine Rückruffunktion für Anfragefehler
$(function () {
$("input").click(function () {
$(".box").load(
"./data.json",
function (response,status) {
console.log(data.name);
}
);
});
})
......
<body>
<p>
<input type="button" value="xinzhi">
<p class="box"></p>
</p>
</body>4.Methode verwendet AJAX HTTP GET-Anfrage, um JSON zu erhalten Daten. •Parameter:
•URL: Anforderungs-URL, erforderliche Parameter;
•Funktion(Daten, Status, xhr): Rückruffunktion für erfolgreich Anfrage
•Methode direkt Es werden JSON-Daten abgerufen.
•Keine Rückruffunktion, die einen Fehler zurückgibt eine anonyme Funktion;
5. getScript()
•Methode verwendet AJAX HTTP GET-Anfrage, um js-Code abzurufen und auszuführen
$(function () {
$("input").click(function () {
$.getJSON(
"./data.json",
function(data,status) {
console.log(data.name);
},
);
});
})
......
<body>
<p>
<input type="button" value="xinzhi">
</p>
</body>•Parameter: • URL: Anfrage-URL, erforderliche Parameter; • Funktion (Daten, Status): Rückruffunktion für erfolgreiche Anfrage
•Die zurückgegebenen Ergebnisdaten sind JS-Code
•Diese Methode kann zum dynamischen Laden von jsonp
•Definition: Ein Datenkommunikationsformat, das HTTP-Anfragen über Domänen hinweg senden kann
•Prinzip: Verwenden Sie Skript-Tags, um Ressourcen domänenübergreifend zu verknüpfen. Verwendung 1: Übergabe von Funktionsparametern$(function () {
$("input").click(function () {
$.getScript(
"./data.js",
function(data,status) {
console.log(data);
},
);
});
})
......
<body>
<p>
<input type="button" value="xinzhi">
</p>
</body>Erläuterung: Definieren Sie eine data.js-Datei extern und den Pfad dieser Datei befindet sich möglicherweise nicht in derselben Domäne wie die aktuelle Seite. Inhalt von data.js:
• Übergeben Sie die Daten in Form von Parametern Auf der Seite definierte Funktion zum Abrufen der Daten. •Grundsätzlich können die Daten aufgeteilt werden, sodass die Daten nicht zwangsweise unter demselben Domainnamen gespeichert werden müssen.
Verwendung 2: Verwendung von Ajax
<script type="text/javascript">
function aa(data){
console.log(data.name);
}
</script>
<script type="text/javascript" src="....../data.js"></script>
•Die Methode zur Verwendung von Ajax ist im Wesentlichen ein Skript-Tag, das Ressourcen domänenübergreifend verknüpfen kann, aber JQuery kapselt dieselbe Methode und sieht gleich aus.
•Der Ausführungsprozess des obigen Codes ist: Ajax greift über die JSONP-Technologie domänenübergreifend auf die Datei data.js zu und führt die .done-Methode aus, indem es die aa()-Methode findet und ihre Parameter an die Daten übergibt Parameter der .done-Methode.
aa({
"data":{
"name":"xiaohong",
"age":"18"
}
})
Verwendung 3
• Überprüfen Sie jedes Mal, wenn Sie ein Schlüsselwort über den Browser eingeben, das vom Server zurückgesendete Datenpaket, suchen Sie die Adresse des Headers in der js-Datei und die zugehörigen Übermittlungsdaten und stellen Sie fest, dass der Schlüssel das Wort Schlüsselwort ist. Daher können Daten an den Server gesendet werden.•Die vom Server zurückgegebenen Daten werden automatisch an die Parameterdaten der anonymen Funktion des Rückrufs übergeben.
$.ajax({
url:'...../data.js',//可以不是本地域名
type:'get',
dataType:'jsonp', //jsonp格式访问
jsonpCallback:'aa' //获取数据的函数
})
.done(function(data){
console.log(data.name);
})
.fail(function() {
alert('服务器超时，请重试！');
});
Verwandte Empfehlungen:
Wie natives JS AJAX und JSONP implementiert
Der Unterschied und die Verwendung von JSON und JSONP
Die Verwendung von Ajax und jsonp in Javascript Detaillierte Erklärung des Trickcodes
Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung von Ajax und JSONP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!