Maison >interface Web >js tutoriel >Résumé pratique d'Ajax et jsonp dans les projets

Résumé pratique d'Ajax et jsonp dans les projets

php中世界最好的语言original: 2018-03-30 17:43:541650parcourir

Cette fois, je vais vous apporter un résumé pratique d'Ajax et de jsonp dans le projet. 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 une communication 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 d'Ajax :

•Les pages ou ressources demandées par Ajax ne peuvent être que des ressources du même domaine, et non des ressources d'autres domaines. Ceci est basé sur la 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 requête, par défaut C'est 'GET', couramment utilisé 'POST'
•dataType : définissez le format des données renvoyées, utilisez généralement json, cela peut également être html et jsonp
•data : définissez les données envoyées ; au serveur
•.done () : définir la fonction de rappel après une demande réussie
•.fail() : définir la fonction de rappel après une demande échouée
•async : définir s'il est asynchrone. La valeur par défaut est « true », ce qui signifie Asynchrone

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

Description : les données représentent les données renvoyées par l'arrière-plan ; doit dépendre de l’environnement du serveur.

2. $.get() :

•La méthode $.get() utilise la requête GET pour charger les données du serveur, c'est également une méthode de requête ; données sans rafraîchir la méthode ajax.

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

•Les paramètres de la méthode $.get() sont différents 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 la requête POST pour charger. depuis le serveur. Data ;
•La méthode utilisée est exactement la même que la méthode $.get()

4. 🎜>•Chargement depuis le serveur. Il n'est pas nécessaire de spécifier le type de données, les données renvoyées seront automatiquement placées dans l'élément •Paramètres :

•URL :
•. data : paramètres demandés, facultatifs ;

•function(response,status,xhr) : fonction de rappel pour une requête réussie

•Les données renvoyées seront placées dans

•Data. n'est pas accessible dans tous les domaines ;

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

•response. est les données renvoyées, le statut est le statut de la demande ;

•Il n'y a pas de fonction de rappel en cas d'échec de la demande. 🎜>•La méthode utilise AJAX. La requête HTTP GET obtient les données JSON
•Paramètres :
•url : URL de la requête, paramètres requis
•data : données envoyées au serveur ; (data, status, xhr) :Fonction de rappel pour une demande réussie

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

•Aucune fonction de rappel qui renvoie un échec;

•Fonction nommée lors du rappel de la fonction, pas une fonction anonyme ;

5. getScript()

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

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

•Paramètres. ：

•url : URL de la demande, paramètres requis

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

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

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

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中文网其它相关文章！

Articles Liés

Voir plus