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>•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>•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>•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>•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>
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
