interface Web
js tutoriel
Analyse approfondie d'Ajax et des problèmes inter-domaines liés à AJAX
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ête1). 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 situation3. 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
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
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 unobjet objet
, le contenu est #document
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
. 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);
}
}
}$.get( ) Lancer une requête ajax en mode get
$.post() Lancer une requête ajax en mode post
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
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(cross-origin resource sharing,跨域源资源共享)定义了在跨域时,浏览器和服务器应该如何沟通.CORS允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。
CORS支持所有类型的HTTP请求.
服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。
JSONP
JSONP由回调函数和数据组成.JSONP只支持GET请求.JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据.
JSONP通过动态
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Explication détaillée de l'erreur Oracle 3114 : comment la résoudre rapidement
Mar 08, 2024 pm 02:42 PM
Explication détaillée de l'erreur Oracle 3114 : Comment la résoudre rapidement, des exemples de code spécifiques sont nécessaires Lors du développement et de la gestion de la base de données Oracle, nous rencontrons souvent diverses erreurs, parmi lesquelles l'erreur 3114 est un problème relativement courant. L'erreur 3114 indique généralement un problème avec la connexion à la base de données, qui peut être provoqué par une défaillance du réseau, un arrêt du service de base de données ou des paramètres de chaîne de connexion incorrects. Cet article expliquera en détail la cause de l'erreur 3114 et comment résoudre rapidement ce problème, et joindra le code spécifique.
Parsing Wormhole NTT : un framework ouvert pour n'importe quel jeton
Mar 05, 2024 pm 12:46 PM
Wormhole est un leader en matière d'interopérabilité blockchain, axé sur la création de systèmes décentralisés résilients et évolutifs qui donnent la priorité à la propriété, au contrôle et à l'innovation sans autorisation. Le fondement de cette vision est un engagement envers l'expertise technique, les principes éthiques et l'alignement de la communauté pour redéfinir le paysage de l'interopérabilité avec simplicité, clarté et une large suite de solutions multi-chaînes. Avec l’essor des preuves sans connaissance, des solutions de mise à l’échelle et des normes de jetons riches en fonctionnalités, les blockchains deviennent plus puissantes et l’interopérabilité devient de plus en plus importante. Dans cet environnement d’applications innovant, de nouveaux systèmes de gouvernance et des capacités pratiques offrent des opportunités sans précédent aux actifs du réseau. Les créateurs de protocoles se demandent désormais comment opérer dans ce nouveau marché multi-chaînes.
PHP et Ajax : créer un moteur de suggestions de saisie semi-automatique
Jun 02, 2024 pm 08:39 PM
Créez un moteur de suggestions de saisie semi-automatique en utilisant PHP et Ajax : Script côté serveur : gère les requêtes Ajax et renvoie des suggestions (autocomplete.php). Script client : envoyer une requête Ajax et afficher des suggestions (autocomplete.js). Cas pratique : Incluez le script dans la page HTML et spécifiez l'identifiant de l'élément d'entrée de recherche.
Analyse de la signification et de l'utilisation du point médian en PHP
Mar 27, 2024 pm 08:57 PM
[Analyse de la signification et de l'utilisation du point médian PHP] En PHP, le point médian (.) est un opérateur couramment utilisé, utilisé pour connecter deux chaînes ou propriétés ou méthodes d'objets. Dans cet article, nous approfondirons la signification et l’utilisation des points médians en PHP, en les illustrant avec des exemples de code concrets. 1. Opérateur de point médian de chaîne de connexion L’utilisation la plus courante en PHP consiste à connecter deux chaînes. En plaçant . entre deux chaînes, vous pouvez les assembler pour former une nouvelle chaîne. $string1=&qu
Comment résoudre le problème de l'erreur 403 jQuery AJAX ?
Feb 23, 2024 pm 04:27 PM
Comment résoudre le problème de l’erreur 403 jQueryAJAX ? Lors du développement d'applications Web, jQuery est souvent utilisé pour envoyer des requêtes asynchrones. Cependant, vous pouvez parfois rencontrer le code d'erreur 403 lors de l'utilisation de jQueryAJAX, indiquant que l'accès est interdit par le serveur. Cela est généralement dû aux paramètres de sécurité côté serveur, mais il existe des moyens de résoudre le problème. Cet article explique comment résoudre le problème de l'erreur 403 jQueryAJAX et fournit des exemples de code spécifiques. 1. faire
Comment obtenir des variables de la méthode PHP en utilisant Ajax ?
Mar 09, 2024 pm 05:36 PM
L'utilisation d'Ajax pour obtenir des variables à partir de méthodes PHP est un scénario courant dans le développement Web. Grâce à Ajax, la page peut être obtenue dynamiquement sans actualiser les données. Dans cet article, nous présenterons comment utiliser Ajax pour obtenir des variables à partir de méthodes PHP et fournirons des exemples de code spécifiques. Tout d’abord, nous devons écrire un fichier PHP pour gérer la requête Ajax et renvoyer les variables requises. Voici un exemple de code pour un simple fichier PHP getData.php :
Analyse des nouvelles fonctionnalités de Win11 : Comment ignorer la connexion au compte Microsoft
Mar 27, 2024 pm 05:24 PM
Analyse des nouvelles fonctionnalités de Win11 : Comment ignorer la connexion à un compte Microsoft Avec la sortie de Windows 11, de nombreux utilisateurs ont constaté qu'il apportait plus de commodité et de nouvelles fonctionnalités. Cependant, certains utilisateurs n'aiment pas que leur système soit lié à un compte Microsoft et souhaitent ignorer cette étape. Cet article présentera quelques méthodes pour aider les utilisateurs à ne pas se connecter à un compte Microsoft dans Windows 11 afin d'obtenir une expérience plus privée et autonome. Tout d’abord, comprenons pourquoi certains utilisateurs hésitent à se connecter à leur compte Microsoft. D'une part, certains utilisateurs craignent
Apache2 ne peut pas analyser correctement les fichiers PHP
Mar 08, 2024 am 11:09 AM
En raison de contraintes d'espace, voici un bref article : Apache2 est un logiciel de serveur Web couramment utilisé et PHP est un langage de script côté serveur largement utilisé. Lors du processus de création d'un site Web, vous rencontrez parfois le problème qu'Apache2 ne peut pas analyser correctement le fichier PHP, ce qui entraîne l'échec de l'exécution du code PHP. Ce problème est généralement dû au fait qu'Apache2 ne configure pas correctement le module PHP ou que le module PHP est incompatible avec la version d'Apache2. Il existe généralement deux manières de résoudre ce problème :
