Dieser Artikel enthält hauptsächlich einen Artikel über die Verwendung von Ajax und JSONP. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird. Folgen wir dem Herausgeber und werfen wir einen Blick darauf.
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.
Ajax-Same-Origin-Richtlinie:
Ajax-Methode:
1. $.ajax({}):
Gemeinsame Parameter:
URL: Netzwerkadresse anfordern
-
Typ: Anforderungsmethode, der Standardwert ist „GET“, häufig verwendet „POST“
dataType: Legen Sie das zurückgegebene Datenformat fest, im Allgemeinen mit JSON oder HTML und JSONP
Data: Legen Sie die an den Server gesendeten Daten fest
.done(): Rückruffunktion festlegen, nachdem die Anfrage erfolgreich war
.fail(): Rückruffunktion festlegen, nachdem die Anfrage fehlgeschlagen ist
asynchron: Legen Sie fest, ob asynchron sein soll. Der Standardwert ist „true“, was asynchron bedeutet
Codeverwendung:
$(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>Nach dem Login kopieren
Hinweis: Daten stellen die vom Hintergrund zurückgegebenen Daten dar; die Verwendung von Ajax muss von der Serverumgebung abhängen.
2. $.get():
//参考代码：$(function () {
$("input").click(function () {
$.get( "./data.json", function (data,status) { console.log(data.name);
}, "json"
);
});
})
......
<body> <p>
<input type="button" value="xinzhi">
</p></body>Nach dem Login kopieren
Die Parameter der $.get()-Methode unterscheiden sich von denen von $.ajax(). Die URL ist ein erforderlicher Parameter. und die anderen drei optional.
- Daten sind die zurückgegebenen Daten, Status stellt den Status der Anfrage dar, im Allgemeinen einschließlich „Erfolg“, „Fehler“, „Zeitüberschreitung“ usw.
- Wenn der Datentyp jsonp ist, können Sie Daten auch domänenübergreifend anfordern
- Es gibt keine Rückruffunktion für Anforderungsfehler
- 3. $.post()
$.get()-Methode verwendet POST-Anfrage, um Daten vom Server zu laden; Methode, die es verwendet, und $. Die Methode get() ist genau die gleiche.
- 4 vom Server, keine Angabe des Datentyps erforderlich, Rückgabe Die Daten werden automatisch in das Element
- Parameter:
URL eingefügt : Adresse; - Die zurückgegebenen Daten werden in p abgelegt;
- kann nicht auf Daten domänenübergreifend zugreifen;
Antwort sind die zurückgegebenen Daten und Status ist der Status der Anfrage;
$(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>Nach dem Login kopieren
Es gibt keine Rückruffunktion bei fehlgeschlagener Anfrage
- 4 . getJSON( )
- Methode verwendet AJAX HTTP GET-Anfrage, um JSON-Daten zu erhalten
- Parameter:
-
URL: Anforderungs-URL, erforderliche Parameter;
Daten: an den Server gesendete Daten; - Methode ruft JSON-Daten direkt ab; >Keine Rückruffunktion, die einen Fehler zurückgibt;
- Die Rückruffunktion ist eine benannte Funktion, keine anonyme Funktion
- 5.
$(function () {
$("input").click(function () {
$.getJSON( "./data.json", function(data,status) { console.log(data.name);
},
);
});
})
......
<body> <p>
<input type="button" value="xinzhi">
</p></body>Nach dem Login kopieren
Methode verwendet AJAX HTTP GET-Anfrage, um JS-Code abzurufen und auszuführen
- 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 JS-Code verwendet werden.
Prinzip: Verwenden Sie das Skript-Tag, um Ressourcen domänenübergreifend zu verknüpfen.
$(function () {
$("input").click(function () {
$.getScript( "./data.js", function(data,status) { console.log(data);
},
);
});
})
......
<body> <p>
<input type="button" value="xinzhi">
</p></body>Nach dem Login kopieren
Verwendung 1: Funktionsparameterübergabe
- Anleitung: Definieren Sie eine data.js-Datei extern. Der Pfad dieser Datei kann in einer anderen Domäne liegen als die aktuelle Seite unten. Inhalt von data.js:
aa({
"data":{ "name":"xiaohong", "age":"18"
}
})Nach dem Login kopieren
用法二：利用ajax
$.ajax({
url:'...../data.js',//可以不是本地域名
type:'get',
dataType:'jsonp', //jsonp格式访问
jsonpCallback:'aa' //获取数据的函数})
.done(function(data){ console.log(data.name);
})
.fail(function() {
alert('服务器超时，请重试！');
});Nach dem Login kopieren
data.js的内容和上面一样。
使用ajax的方法本质上也是script标签可以跨域链接资源，不过jquery为其封装了相同的方法，看起来一样。
以上代码的执行过程为：ajax通过jsonp技术跨域访问data.js文件，通过找到aa()方法将其参数传递给.done方法的data参数执行.done方法。
目前这种方式仍然有其局限性，就是必须知道data.js文件的名字和定义的方法aa，如果在仅仅知道域名的情况下，需要另外的方法.
用法三
var $input = $("input");
$input.keyup(function () {
$.ajax({
url:'https://sug.so.360.cn/suggest?',//请求360搜索的联想数据
type:'get',
dataType:'jsonp', //jsonp格式访问
data: {word: $input.val()},
})
.done(function(data){
console.log(data);
})
.fail(function() {
alert('服务器超时，请重试！');
});
})
....
<body>
<input type="text">
</body>Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonInformationen zur Verwendung von Ajax und JSONP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
