Analyse approfondie d'Ajax et des problèmes inter-domaines liés à AJAX-js tutoriel-php.cn

Cet article présente principalement en détail Ajax et les problèmes inter-domaines, vous expliquant ce qu'est Ajax et qu'est-ce que l'inter-domaine ? Il a une certaine valeur de référence. Les amis intéressés peuvent se référer à

Qu'est-ce que ajax

Ajax(Asynchrone JavaScript et XML), est une technologie qui peut demander des données supplémentaires au serveur sans actualiser la page. L'émergence d'ajax apporte une meilleure expérience utilisateur

Le cœur d'Ajax est les objets XMLHttpRequest (XHR). obtenir des données du serveur sans actualiser, mais il n'est pas nécessaire qu'il s'agisse de données XML, cela peut également être du json
Utilisation de XHR

Créez un objet XMLHttpRequest

2. Envoyer une requête

1). Définissez la ligne de requête xhr.open()2).La requête POST doit définir l'en-tête de la requête xhr.setRequestHeader. () La valeur de l'en-tête de la requête POST Content-Type : application/x-www-form-urlencoded

3).Définir le corps de la requête xhr.send() obtenir la requête passe null, la publication dépend de la situation

3. Traitez la réponse du serveur

déterminez d'abord si la réponse
code d'état et l'objet asynchrone sont analysés Terminé.

État du code d'état renvoyé par le serveur

1xx : Message

2xx : Succès3xx : Redirection4xx : Erreur de requête
5xx : Erreur du serveur

Code d'état de l'objet asynchrone readystate
0 : L'objet asynchrone a été créé
1 : L'initialisation de l'objet asynchrone est terminée et la requête est envoyée
2 : Recevoir les données d'origine renvoyées par le serveur
3 : Les données sont en cours d'analyse et l'analyse prend du temps
4 : L'analyse des données est terminée et les données sont prêtes à être utilisées

XML

Caractéristiques du XML, issu d'une famille prestigieuse, développée par le W3C, un format de données fortement recommandé par Microsoft et IBM XML fait référence à Extensible Markup Language (Extensible Markup Language), conçu pour transmettre et stocker. data. HTML Il est conçu pour représenter des pages.

Règles de grammaire : Semblables au HTML, elles sont exprimées par des balises

Symboles spéciaux : Par exemple, <> transfert d'entité L'analyse des caractères

nécessite la coopération du front et du backend :

1 Lorsque le backend revient, définissez la valeur Content-Type dans l'en-tête de réponse sur application/xml.

2. Le frontend est asynchrone Lorsque l'objet reçoit des données de fond, pensez à les recevoir sous forme de xml, xhr.responseXML, et il renvoie un

objet objet
, le contenu est #document

JSON

JSON (JavaScript Object Notation), originaire de la base, est un sous-ensemble de Javascript et est responsable de la description du format de données lui-même. chaîne dans un format spécial qui peut être converti en objet js et constitue un réseau. Il n'existe aucun des formats de données les plus utilisés pour transmettre des données

Règles de grammaire :

. Les données sont représentées par des paires clé/valeur, et les données sont séparées par des virgules, les accolades enregistrent les objets, les crochets enregistrent les tableaux, les noms et les valeurs doivent être placés entre guillemets doubles (c'est une petite différence par rapport à js ).

Analyser/manipuler JSON en js :

1.JSON.parse(json string); .JSON.stringify(js object); Convertir un objet js au format json La chaîne encapsule un ajax

utiliser ajax dans jQuery

API jQuery ajax

jQuery nous fournit un package ajax plus pratique.

function pinjieData(obj) {
 //obj 就相当于 {key:value,key:value}
 //最终拼接成键值对的字符串 "key:value,key:value"
 var finalData = "";
 for(key in obj){
  finalData+=key+"="+obj[key]+"&"; //key:value,key:value&
 }
 return finalData.slice(0,-1);//key:value,key:value
}

function ajax(obj) {
 var url = obj.url;
 var method = obj.method.toLowerCase();
 var success = obj.success;
 var finalData = pinjieData(obj.data);
 //finalData最终的效果key:value,key:value

 //1.创建xhr对象
 var xhr = new XMLHttpRequest();
 //get方法拼接地址,xhr.send(null)
 if (method==&#39;get&#39;){
  url = url + "?"+finalData;
  finalData = null;
 }

 //2.设置请求行
 xhr.open(method,url);

 // 如果是post请求,要设置请求头
 if (method==&#39;post&#39;){
  xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
 }

 //3.发送
 xhr.send(finalData);

 //4.监听服务器返回的数据
 xhr.onreadystatechange = function () {
  if (xhr.status==200 && xhr.readyState==4){
   var result = null;
   //获取返回的数据类型
   var rType = xhr.getResponseHeader("Content-Type");
   if (rType.indexOf(&#39;xml&#39;)!=-1){
    result = xhr.responseXML;
   }else if(rType.indexOf(&#39;json&#39;)!=-1){
    // JSON.parse 的意思是 将 json格式的字符串
    //比如 [{ "src":"./images/nav0.png","content":"商品分类1"}]
    //转成js对象
    result = JSON.parse(xhr.responseText);
   }else{//当成普通的字符串去处理
    result = xhr.responseText;
   }

   //将这里解析好的数据交给页面去渲染
   success(result);
  }
 }
}

Copier après la connexion

$.ajax({}) peut être configuré pour lancer une requête ajax

$.get( ) Lancer une requête ajax en mode get
$.post() Lancer une requête ajax en mode post

$('form').serialize() Sérialiser formulaire (format key=val$key=val)

Description du paramètre

url : adresse de l'interface
type : méthode de requête (get/post)
timeout : le paramètre doit être de type Nombre, définissez le délai d'expiration de la demande (millisecondes)
dataType : Il doit s'agir d'une valeur transmise par le client au serveur, indiquant au serveur comment traiter :
data : Envoyer la demande data

beforeSend : doit être un paramètre de type Function, avant d'envoyer la requête. Fonctions pouvant modifier l'objet XMLHttpRequest, comme l'ajout d'en-têtes HTTP personnalisés. Si false est renvoyé dans beforeSend, cette requête ajax peut être annulée

success : appelé après une réponse réussie error : appelé lorsqu'une réponse d'erreur se produit complete : appelé lorsque la réponse est terminée (y compris le succès et échec)

Cross-domaine

Une limitation majeure de communication ajax via XHR (Même domaine, même port, même protocole), dérivée de la politique de sécurité inter-serveurs. Par défaut, XHR ne peut demander des ressources que dans le même domaine. Ceci permet d'éviter certains comportements malveillants. >

 //ajax===get
 $.ajax({
  url:&#39;&#39;,
  data:&#39;key=value&key=value&#39;,
  type:&#39;get&#39;,
  success:function (result) {
   console.log(result);
  }
 });

//ajax===post
$.ajax({
  url:&#39;&#39;,
  data:&#39;key=value&key=value&#39;,
  type:&#39;post&#39;,
  success:function (result) {
   console.log(result);
  }
 });

//$.get
$.get({
  url:&#39;&#39;,
  data:&#39;key=value&key=value&#39;,
  success:function (result) {
  console.log(result);
  }
});

//$.post
$.post({
  url:&#39;&#39;,
  data:&#39;key=value&key=value&#39;,
  success:function (result) {
  console.log(result);
  }
});
//在使用jQuery中ajax发送请求的时候,只需要在 dataType中写上jsonp即可实现ajax的跨域请求
 dataType:&#39;jsonp&#39;

Copier après la connexion

CORS inter-domaines

CORS(cross-origin resource sharing,跨域源资源共享)定义了在跨域时,浏览器和服务器应该如何沟通.CORS允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。
CORS支持所有类型的HTTP请求.
服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。

JSONP

JSONP由回调函数和数据组成.JSONP只支持GET请求.JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据.
JSONP通过动态

Derniers articles par auteur