Analyse complète des paramètres de la méthode $.Ajax() (tutoriel graphique)

AJAX est une technologie utilisée pour créer des pages Web dynamiques rapides. Cet article présente principalement des informations pertinentes sur l'analyse complète des paramètres de la méthode $.Ajax() (recommandé). Les amis dans le besoin peuvent se référer à

Permettez-moi d'abord de vous présenter le concept d'Ajax

AJAX signifie "Asynchronous Javascript And XML" (Javascript et XML asynchrones), qui fait référence à une page Web qui crée applications Web interactives Développer la technologie.

AJAX = JavaScript asynchrone et XML (un sous-ensemble du langage de balisage universel standard).

AJAX est une technologie permettant de créer des pages Web rapides et dynamiques.

AJAX permet de mettre à jour les pages Web de manière asynchrone en échangeant une petite quantité de données avec le serveur en arrière-plan. Cela signifie que certaines parties d'une page Web peuvent être mises à jour sans recharger la page entière.

Les pages Web traditionnelles (n'utilisant pas AJAX) doivent recharger la page Web entière si le contenu doit être mis à jour.

Méthode ajax

La méthode $.ajax() est l'implémentation Ajax de niveau le plus bas de jQuery. Sa structure est :

　$.ajax(options)

Cette méthode n'a qu'un seul paramètre, mais cet objet contient les paramètres de requête et les fonctions de rappel requis par la méthode $.ajax() Informations. et les paramètres existent sous forme de clé/valeur, et tous les paramètres sont facultatifs. Les paramètres couramment utilisés sont présentés dans le tableau ci-dessous :

1.url

nécessite un paramètre de type String (la valeur par défaut est l'adresse actuelle ) pour envoyer la page demandée.

2.type

nécessite des paramètres de type String et la méthode de requête (post ou get) est par défaut get. Notez que d'autres méthodes de requête http telles que put et delete peuvent également être utilisées, mais ne sont prises en charge que par certains navigateurs.

3.timeout

nécessite un paramètre de type Number et définit le délai d'expiration de la requête (millisecondes). Ce paramètre remplacera le paramètre global de la méthode $.ajaxSetup().

4.async

nécessite des paramètres de type booléen, qui sont définis sur true par défaut. Toutes les requêtes sont des requêtes asynchrones. Si des requêtes synchrones sont requises, définissez cette option sur false. Notez qu'une requête synchrone verrouillera le navigateur et que l'utilisateur devra attendre que la requête soit terminée avant de pouvoir effectuer d'autres opérations.

5.cache

nécessite un paramètre de type booléen, la valeur par défaut est true (lorsque le dataType est Script, la valeur par défaut est false), set false ne chargera pas les informations de demande à partir du cache du navigateur.

6.data

nécessite des paramètres de type Objet ou Chaîne, données envoyées au serveur. S'il ne s'agit pas d'une chaîne, elle sera automatiquement convertie au format chaîne. La demande d'obtention sera ajoutée à l'URL. Pour empêcher cette conversion automatique, cochez l'option processData. L'objet doit être au format clé/valeur, par exemple {foo1:"bar1",foo2:"bar2"} est converti en &foo1=bar1&foo2=bar2. S'il s'agit d'un tableau, JQuery attribuera automatiquement le même nom à différentes valeurs. Par exemple, {foo:["bar1","bar2"]} est converti en &foo=bar1&foo=bar2.

7.dataType

nécessite des paramètres de type String, le type de données qui devrait être renvoyé par le serveur. S'il n'est pas spécifié, jQuery renverra automatiquement ResponseXML ou ResponseText en fonction des informations minières du package HTTP et les transmettra en tant que paramètre de fonction de rappel. Les types disponibles sont les suivants :

XML : Renvoie un document XML pouvant être traité avec jQuery.

HTML : renvoie les informations HTML en texte brut ; la balise de script incluse sera exécutée une fois insérée dans le DOM.

Script : renvoie le code javascript en texte brut. Les résultats ne sont pas automatiquement mis en cache sauf si le paramètre cache est défini. Notez que lors de requêtes distantes (pas sous le même domaine), toutes les requêtes de publication seront converties en requêtes get.

json : renvoie les données JSON.

jsonp : format JSON. Lors de l'appel d'une fonction au format JSONP, tel que myurl?callback=?, JQuery remplacera automatiquement le dernier "?" par le nom de fonction correct pour exécuter la fonction de rappel.

Texte : renvoie une chaîne de texte brut.

8.beforeSend

nécessite des paramètres de type Function Vous pouvez modifier la fonction de l'objet XMLHttpRequest avant d'envoyer la requête, par exemple en ajoutant. un en-tête HTTP personnalisé. Si false est renvoyé dans beforeSend, cette requête ajax peut être annulée. L'objet XMLHttpRequest est le seul paramètre.

function(XMLHttpRequest){
　　　　this;//调用本次ajax请求时传递的options参数
　　}

9.complete

nécessite des paramètres de type Fonction, demande A fonction de rappel appelée à la fin (appelée en cas de succès ou d'échec de la requête). Paramètres : objet XMLHttpRequest et une chaîne décrivant le type de requête réussie.

　　function(XMLHttpRequest,textStatus){
　　　　this; //调用本次ajax请求时传递的options参数
　　}

10.success

nécessite des paramètres de type Fonction, demande Le La fonction de rappel appelée après le succès a deux paramètres.

(1) Données renvoyées par le serveur et traitées selon le paramètre dataType.

(2) Une chaîne décrivant le statut.

　　function(data,textStatus){
　　　　//data可能是xmlDoc、jsonObj、html、text等
　　　　this; //调用本次ajax请求时传递的options参数
　　}

11.erreur

要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象（可选）。ajax事件函数如下：

　　function(XMLHttpRequest,textStatus,errorThrown){
　　　　//通常情况下textStatus和errorThrown只有其中一个包含信息
　　　　this; //调用本次ajax请求时传递的options参数
　　}

12.contentType

要求为String类型的参数，当发送信息至服务器时。内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

13.dataFilter

要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataTYpe参数。函数返回的值将由jQuery进一步处理。

　　function(data,type){
　　　　//返回处理后的数据
　　　　return data;
　　}

14.global

要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart和ajaxStop可用于控制各种ajax事件。

15.ifModified

要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。

16.jsonp

要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

17.username

要求为String类型的参数，用于响应HTTP访问认证请求的用户。

18.password

要求为String类型的参数，用于响应HTTP访问认证请求的密码。

19.processData

要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲而非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

20.scriptCharset

要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

案例代码：

$(function(){
 $('#send').click(function(){
  $.ajax({
  type: "GET",
  url: "test.json",
  data: {username:$("#username").val(), content:$("#content").val()},
  dataType: "json",
  success: function(data){
    $('#resText').empty(); //清空resText里面的所有内容
    var html = '';
    $.each(data, function(commentIndex, comment){
    html += &#39;<p class="comment"><h6>&#39; + comment[&#39;username&#39;]
      + &#39;:</h6><p class="para"&#39; + comment[&#39;content&#39;]
      + &#39;</p></p>&#39;;
    });
    $(&#39;#resText&#39;).html(html);
   }
  });
 });
});

知识链接：

1、$.each()函数：$.each()函数不同于jQuery对象的each()方法，它是一个全局函数，不操作jQuery对象。该函数接收两个参数，第1个参数是一个数组或对象，第2个参数是一个回调函数。回调函数拥有两个参数：第1个参数为数组的索引或对象的成员，第2个参数为对应的变量或内容。

　　$.each(data,function(commentIndex,comment){
  //doSomething;
 })

2、ajaxStart()与ajaxStop()：当Ajax请求开始时，会触发ajaxStart()方法的回调函数。当Ajax请求结束时，会触发ajaxStop()方法的回调函数。这些方法都是全局的方法，因此无论创建它们的代码位于何处，只要有Ajax请求发生时，就会触发它们。

有时候页面需要加载一些图片，可能速度回比较慢，如果在加载过程中，不给用户提供一些提示和反馈信息，很容易让用户误认为按钮单击无用，使用户对网站失去信息。

此时，我们就需要为网页添加一个提示信息，常用的提示信息是“加载中...”，代码如下：

<p id="loading">加载中...</p>

当Ajax请求开始时，将此元素显示，用来提示用户Ajax请求正在进行；当Ajax请求结束后，将此元素隐藏。代码如下：

$("#loading").ajaxStart(function(){
　　　　$(this).show();
　　}).ajaxStop(function(){
 $(this).hide();
 })

好了，下面再给大家分享一个案例代码：

$(function(){
 $('#send').click(function(){
  $.ajax({
  type: "GET",
  url: "test.json",
  data: {username:$("#username").val(), content:$("#content").val()},
  dataType: "json",
  success: function(data){
    $('#resText').empty(); //清空resText里面的所有内容
    var html = ''; 
    $.each(data, function(commentIndex, comment){
    html += &#39;<p class="comment"><h6>&#39; + comment[&#39;username&#39;]
      + &#39;:</h6><p class="para"&#39; + comment[&#39;content&#39;]
      + &#39;</p></p>&#39;;
    });
    $(&#39;#resText&#39;).html(html);
   }
  });
 });
});

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

IE8下Ajax缓存问题及解决办法

IE8/IE9下Ajax缓存问题

IE8用ajax访问不能每次都刷新的问题

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!