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
Ajax-angeforderte Seiten oder Ressourcen können nur Ressourcen unter derselben Domäne sein, nicht Ressourcen anderer Domänen basiert auf Sicherheitsüberlegungen beim Entwurf von 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>Die Methode $.get() verwendet eine GET-Anfrage, um Daten vom Server zu laden Daten ohne Aktualisierungsmethode.
Parameter:
URL: Die besuchte URL muss derselben Ursprungsrichtlinie folgen; >
Daten: An den Server gesendete Daten.//参考代码：$(function () {
$("input").click(function () {
$.get( "./data.json", function (data,status) { console.log(data.name);
}, "json"
);
});
})
......
<body> <p>
<input type="button" value="xinzhi">
</p></body>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>$(function () {
$("input").click(function () {
$.getJSON( "./data.json", function(data,status) { console.log(data.name);
},
);
});
})
......
<body> <p>
<input type="button" value="xinzhi">
</p></body>2. jsonp
Definition: Ein Datenkommunikationsformat, das HTTP-Anfragen über Domänen hinweg senden und in Ajax eingebettet werden kann.
$(function () {
$("input").click(function () {
$.getScript( "./data.js", function(data,status) { console.log(data);
},
);
});
})
......
<body> <p>
<input type="button" value="xinzhi">
</p></body>Verwendung 1: Funktionsparameterübergabe
aa({
"data":{ "name":"xiaohong", "age":"18"
}
})将数据以页面定义的函数的参数的形式传递进去，从而获取数据。
本质上可以将数据拆分，使得数据不用强制保存在同一个域名下。
$.ajax({
url:'...../data.js',//可以不是本地域名
type:'get',
dataType:'jsonp', //jsonp格式访问
jsonpCallback:'aa' //获取数据的函数})
.done(function(data){ console.log(data.name);
})
.fail(function() {
alert('服务器超时，请重试！');
});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>通过浏览器查看每次输入关键字服务器发送回的数据包，找到js文件中header的地址以及相关的提交数据，发现key为word关键字，因此可以向服务器发送data数据。
服务器返回的数据会自动传给回调的匿名函数的参数data.
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
