Analyse approfondie d'Ajax et des problèmes inter-domaines liés à AJAX

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, a8093152e673feb7aba1828c43532094 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=='get'){
  url = url + "?"+finalData;
  finalData = null;
 }

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

 // 如果是post请求,要设置请求头
 if (method=='post'){
  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('xml')!=-1){
    result = xhr.responseXML;
   }else if(rType.indexOf('json')!=-1){
    // JSON.parse 的意思是 将 json格式的字符串
    //比如 [{ "src":"./images/nav0.png","content":"商品分类1"}]
    //转成js对象
    result = JSON.parse(xhr.responseText);
   }else{//当成普通的字符串去处理
    result = xhr.responseText;
   }

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

$.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:'',
  data:'key=value&key=value',
  type:'get',
  success:function (result) {
   console.log(result);
  }
 });

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

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

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

CORS inter-domaines

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

JSONP

JSONP由回调函数和数据组成.JSONP只支持GET请求.JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据.
JSONP通过动态3f1c4e4b6b16bbbd69b2ee476dc4f83a元素来使用,src属性知道一个跨域URL,JSONP是有效的JavaScript代码,浏览器可以跨域请求JS文件.
优点:简单易用,可以直接访问响应文本,支持在浏览器和服务器之间双向通信.
缺点:1.JSONP是从其他域加载代码执行,存在不安全风险.2.不好确定JSONP请求是否成败.

通过修改document.domain来跨子域

使用window.name来进行跨域

HTML5中新引进 window.postMessage方法来跨域传送数据

flash

iframe

服务器设置代理页面

图像Ping

通过使用标签,利用网页可以从任何网页加载图像原理.
图像Ping常用于跟踪用户点击页面或动态广告曝光次数.

2个缺点:1.只支持GET请求.2.无法访问服务器的响应文本.只能用于浏览器与服务器间的单项通信.

var img = new Image();
img.onload = img.onerror = function (){
alert("Done!");
};
img.src = "";

comet

一种更高级的ajax技术.ajax是页面向服务器请求数据的技术.comet是服务器向页面推送数据的技术.

SSE (Server-Sent Events) 服务器发送事件

Web Sockets

Web Sockets的目标是在一个单独的持久链接上提供全双工,双向通信.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。

相关推荐：

实例分析jquery ajax异步提交表单数据的方法

前端ajax与后端交互详解

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!