Explication détaillée de l'utilisation d'ajax et jsonp-js tutoriel-php.cn

Cette fois, je vais vous apporter une explication détaillée de l'utilisation d'ajax et de jsonp. Quelles sont les précautions lors de l'utilisation d'ajax et de jsonp. Ce qui suit est un cas pratique, jetons un coup d'œil.

Avant-propos : ajax et jsonp peuvent communiquer avec l'arrière-plan pour obtenir des données et des informations, mais n'ont pas besoin d'actualiser la page entière pour obtenir un rafraîchissement partiel de la page.

1.ajax

•Définition : Une technologie qui envoie des requêtes http pour communiquer de manière asynchrone avec l'arrière-plan.

•Principe : Instanciez l'objet xmlhttp et utilisez cet objet pour communiquer avec l'arrière-plan.

Politique de même origine pour ajax :

•Les pages ou ressources demandées par Ajax ne peuvent être que des ressources du même domaine et ne peuvent pas être des ressources d'autres domaines. Ceci est basé sur des considérations de sécurité lors de la conception d'Ajax.

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

Méthode ajax :

1. $.ajax({}):

•Paramètres communs : •url : demande d'adresse réseau
•type : méthode de demande, la valeur par défaut est 'GET', couramment utilisé 'POST'
•dataType : définit le format de données renvoyé, utilisez généralement json ou html et jsonp;
•data : définissez les données envoyées au serveur
•.done() : définissez la fonction de rappel une fois la demande réussie
•.fail() : définissez le requête après l'échec de la requête Fonction de rappel
•async : Définissez si elle est asynchrone. La valeur par défaut est "true", ce qui signifie asynchrone

. •Utilisation du code :

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

Copier après la connexion

Remarque : data représente les données renvoyées par l'arrière-plan ; l'utilisation d'ajax dépend de l'environnement du serveur.

2. $.get() :

•La méthode $.get() utilise une requête GET pour charger les données depuis le serveur ; c'est également une méthode ajax pour demander des données sans actualiser.

•Paramètres :
•url : L'URL visitée, qui doit suivre la politique de même origine
•data : Les données envoyées au serveur ;
•function(data,status){} : demande à la fonction de s'exécuter avec succès
•dataType : demande le type de données de la réponse.

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

Copier après la connexion

•Les paramètres de la méthode $.get() sont différents de ceux de $.ajax(). L'URL est un paramètre obligatoire et les trois autres sont facultatifs.
•Les données sont les données renvoyées, le statut indique l'état de la demande, incluant généralement ""succès", "erreur", "délai d'attente", etc.
•Si le type de données est jsonp, vous pouvez également demander des données sur tous les domaines
• Aucune fonction de rappel en cas d'échec de la demande

3. $.post()

•La méthode $.get() utilise une requête POST pour charger les données depuis le serveur ;
•La méthode utilisée est exactement la même que la méthode $.get().

4. $.load() :

•Chargez les données depuis le serveur, pas besoin de spécifier le type de données, les données renvoyées seront automatiquement placées dans l'élément.
•Paramètres :

•URL : adresse ;
•données : paramètres de requête, facultatifs
•fonction (réponse, statut, xhr) : fonction de rappel pour une requête réussie.

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

Copier après la connexion

•Les données renvoyées seront placées dans p ;
•Les données ne sont pas accessibles dans tous les domaines
•la réponse est les données renvoyées et le statut est le statut de la demande
•Il n'y a pas de fonction de rappel pour la demande ; échec.

4.getJSON()

•La méthode utilise la requête AJAX HTTP GET pour obtenir les données JSON.
•Paramètres :
•url : URL de la requête, paramètres requis ;
•data : données envoyées au serveur
•function(data, status, xhr) : fonction de rappel pour une requête réussie

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

Copier après la connexion

•La méthode obtient directement les données json

•Aucune fonction de rappel qui renvoie un échec

•La fonction de rappel est une fonction nommée, pas une fonction anonyme

; 5.getScript()

•La méthode utilise la requête AJAX HTTP GET pour obtenir et exécuter du code js.

•Paramètres :

•url : URL de requête, paramètres requis

•function(data,status) : fonction de rappel pour une demande réussie

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

Copier après la connexion

•Les données de résultat renvoyées sont du code js ;

•Cette méthode peut être utilisée pour charger dynamiquement du code js.

2.jsonp

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

用法一：函数传参

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

Copier après la connexion

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

data.js的内容：

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

Copier après la connexion

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

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

用法二：利用ajax

$.ajax({
  url:'...../data.js',//可以不是本地域名 
  type:'get',
  dataType:'jsonp', //jsonp格式访问
  jsonpCallback:'aa' //获取数据的函数
})
.done(function(data){
  console.log(data.name);
})
.fail(function() {
  alert('服务器超时，请重试！');
});

Copier après la connexion

•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>

Copier après la connexion

•通过浏览器查看每次输入关键字服务器发送回的数据包，找到js文件中header的地址以及相关的提交数据，发现key为word关键字，因此可以向服务器发送data数据。
•服务器返回的数据会自动传给回调的匿名函数的参数data.

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