Heim > Artikel > Web-Frontend > Detaillierte Erklärung der Verwendung von Ajax und JSONP

Detaillierte Erklärung der Verwendung von Ajax und JSONP

php中世界最好的语言Original: 2018-04-17 14:43:301771Durchsuche

Dieses Mal werde ich Ihnen eine detaillierte Erklärung zur Verwendung von Ajax und JSONP geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Ajax und JSONP?

Vorwort: 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.

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 zur Kommunikation mit dem Hintergrund.

Same-Origin-Richtlinie für Ajax:

•Die von Ajax angeforderten Seiten oder Ressourcen können nur Ressourcen unter derselben Domäne und keine Ressourcen in anderen Domänen sein. Dies basiert auf Sicherheitsüberlegungen beim Entwurf von Ajax.

-------------------------------------------------- ----------------------------------

Ajax-Methode:

1. $.ajax({}):

•Gemeinsame Parameter: •URL: Netzwerkadresse anfordern
•Typ: Anforderungsmethode, der Standardwert ist „GET“, häufig verwendet „POST“
•Datentyp: Legen Sie das Format der zurückgegebenen Daten fest. Verwenden Sie im Allgemeinen JSON oder HTML jsonp;
•data: Legen Sie die an den Server gesendeten Daten fest
•.done(): Legen Sie die Rückruffunktion fest, nachdem die Anfrage erfolgreich war
•.fail(): Legen Sie die fest Anfrage nach fehlgeschlagener Anfrage Rückruffunktion
•async: Legen Sie fest, ob sie asynchron ist. 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>

Hinweis: Daten stellen die vom Hintergrund zurückgegebenen Daten dar; die Verwendung von Ajax hängt von der Serverumgebung ab.

2. $.get():

•Die Methode $.get() verwendet eine GET-Anfrage, um Daten vom Server zu laden. Sie ist auch eine Ajax-Methode zum Anfordern von Daten ohne Aktualisierung.

•Parameter:
•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 an, erfolgreich ausgeführt zu werden.
•dataType: Fordern Sie den Datentyp der Antwort an.

//参考代码：
$(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 Methode $.get() 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 bei fehlgeschlagener Anfrage

3. $.post()

•Die Methode $.get() verwendet eine POST-Anfrage, um Daten vom Server zu laden.
•Die verwendete Methode ist genau die gleiche wie die Methode $.get().

4. $.load():

•Daten vom Server laden, Datentyp muss nicht angegeben werden, die zurückgegebenen Daten werden automatisch in das Element eingefügt.
•Parameter:

•URL: Adresse;
•Daten: Anfrageparameter, optional; •Funktion(Antwort, Status, xhr): Rückruffunktion für erfolgreiche 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>

•Die zurückgegebenen Daten werden in p abgelegt.

•Auf die Daten kann nicht domänenübergreifend zugegriffen werden.
•Antwort sind die zurückgegebenen Daten Versagen.

4. getJSON()

•Methode verwendet AJAX HTTP GET-Anfrage, um JSON-Daten abzurufen.

•Parameter:

•URL: Anforderungs-URL, erforderliche Parameter;
•Daten: an den Server gesendete Daten;
•Funktion(Daten, Status, xhr): Rückruffunktion für erfolgreiche Anforderung

•Die Methode ruft JSON-Daten direkt ab •Keine Rückruffunktion, die einen Fehler zurückgibt

$(function () {
  $("input").click(function () {
    $.getJSON(
      "./data.json",
      function(data,status) {
        console.log(data.name);
      },
    );
  });
})
......
<body>
  <p>
    <input type="button" value="xinzhi">
  </p>
</body>

•Die Rückruffunktion ist eine benannte Funktion, keine

anonyme Funktion

;

5. getScript()

•Die Methode verwendet eine AJAX-HTTP-GET-Anfrage, um JS-Code abzurufen und auszuführen.

•Parameter: •url: Anforderungs-URL, erforderliche Parameter; •function(data,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.

2. jsonp

$(function () {
  $("input").click(function () {
    $.getScript(
      "./data.js",
      function(data,status) {
        console.log(data);
      },
    );
  });
})
......
<body>
  <p>
    <input type="button" value="xinzhi">
  </p>
</body>

•定义：一种可以实现跨域发送http请求的数据通信格式，可以嵌在ajax中使用。
•原理：利用script标签可以跨域链接资源的特性。

用法一：函数传参

<script type="text/javascript">
  function aa(data){
    console.log(data.name);
  }
</script>
<script type="text/javascript" src="....../data.js"></script>

说明：在外部定义一个data.js文件，这个文件的路径可以与当前页面不在同一个域下面。

data.js的内容：

aa({
  
  "data":{
    "name":"xiaohong",
    "age":"18"
  }
})

•将数据以页面定义的函数的参数的形式传递进去，从而获取数据。

•本质上可以将数据拆分，使得数据不用强制保存在同一个域名下。

用法二：利用ajax

$.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.

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

In Verbindung stehende Artikel

Mehr sehen