Introduction détaillée aux problèmes inter-domaines Ajax

Cette fois, je vais vous apporter une introduction détaillée aux problèmes inter-domaines Ajax. Quelles sont les précautions lors de l'utilisation des problèmes inter-domaines Ajax, jetons un coup d'œil.

Qu'est-ce qu'ajax

Ajax (Asynchrone JavaScript et XML) est une méthode qui peut demander des données supplémentaires au serveur sans actualiser la page. Technologie, l'émergence d'ajax a apporté une meilleure expérience utilisateur.

Le cœur d'Ajax est l'objet XMLHttpRequest (XHR) qui fournit une interface fluide pour envoyer des requêtes au serveur et analyser les réponses du serveur. l'objet XHR Obtenez de nouvelles données et insérez les nouvelles données dans la page via le DOM Bien que le nom contienne du XML, la communication ajax n'a rien à voir avec le format des données, cette technologie peut obtenir des données du serveur sans les actualiser, mais ce n'est pas le cas. Il doit s'agir de données XML, il peut également s'agir de json.

Objet XMLHttpRequest

Utilisation XHR

1. Créez un objet XMLHttpRequest

2. Envoyez une requête

1). Définissez la ligne de requête xhr.open()
2).Requête POSTBesoin de définir l'en-tête de la requête xhr.setRequestHeader() POST La valeur de l'en-tête de la requête Content-Type : application/x-www-form-urlencoded
3). passez null, publiez en fonction de la situation

3. Traitez la réponse du serveur

Déterminez d'abord si le code d'état de la réponse et l'objet asynchrone ont été analysés.

Le code d'état renvoyé par l'état du serveur

1xx : Message
2xx : Succès
3xx : Redirection
4xx : Erreur de requête
5xx : Erreur du serveur

Code d'état de l'objet asynchrone prêt à l'état

0 : L'objet asynchrone a été créé
1 : L'initialisation de l'objet asynchrone est terminée, envoyer la requête
2 : Recevoir les données originales renvoyées par le serveur
3 : Les données sont en cours d'analyse et l'analyse prendra du temps
4 : L'analyse des données est terminée et les données peuvent être utilisées

XML

Caractéristiques du XML, issu d'une famille prestigieuse, formulé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 des données, HTML est. conçus pour représenter des pages.

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

Symboles spéciaux : tels que <> Utilisation de caractères de transfert d'entité

Xml. l'analyse nécessite une coopération front-end et back-end :
1 Lorsque le back-end revient, définissez la valeur Content-Type dans l'en-tête de réponse sur application/xml
2 Le front-end Lorsqu'il s'agit d'un objet asynchrone. reçoit des données d'arrière-plan, 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 chargé de décrire le format des données. JSON lui-même est une chaîne dans un format spécial qui peut être converti en un objet js et est. utilisé sur Internet 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 crochets enregistrent les objets, les crochets enregistrent les tableaux, et les noms et les valeurs doivent être placés entre guillemets doubles (c'est une petite différence avec js
Parsing/). manipuler JSON en js :
1.JSON.parse(json string); Analyser une chaîne au format json en un objet js
2.JSON.stringify(js object); dans une chaîne de caractères au format json

Encapsuler un ajax par vous-même

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);
  }
 }
}

Utiliser ajax dans jQueryAPI jQuery ajax

jQuery nous fournit un package ajax plus pratique.

$.ajax({}) peut être configuré pour lancer une requête ajax
$.get() pour lancer une requête ajax pour obtenir
$.post() pour lancer une requête ajax pour publier
$('form').serialize() sérialiser le formulaire (format key=val$key=val)

Description du paramètre

url :接口地址
type :请求方式(get/post)
timeout : 要求为Number类型的参数，设置请求超时时间（毫秒）
dataType: 应该是客户端传递给服务器一个值，告诉服务器如何进行处理:
data: 发送请求数据
beforeSend: 要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求.
success: 成功响应后调用
error: 错误响应时调用
complete: 响应完成时调用（包括成功和失败）

 //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'

跨域

通过XHR实现ajax通信的一个主要限制(相同域,相同端口,相同协议),来源于跨服安全策略,默认情况下,XHR只能请求同一域的资源,这是为了防止某些恶意的行为.

CORS跨域

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

JSONP

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