Implémentation de la fonction jQuery+ajax
Cette fois, je vais vous présenter l'implémentation de la fonction jQuery+ajax. Quelles sont les précautions pour l'implémentation de la fonction jQuery+ajax. Ce qui suit est un cas pratique, jetons un coup d'œil.
Fonction d'implémentation
Puisque la méthode ajax dans jq utilise le module différé intégré, il s'agit d'une implémentation du mode Promise, et nous n'en avons pas parlé ici, nous n’utiliserons donc pas ce mode.
Nous définissons uniquement une méthode ajax, qui peut simplement obtenir, publier et des requêtes jsonp~~
var ajax = function () { // 做一些初始化,定义一些私有函数等 return function () { // ajax主体代码 } }() ajax({ url: myUrl, type: 'get', dataType: 'json', timeout: 1000, success: function (data, status) { console.log(data) }, fail: function (err, status) { console.log(err) } })
La fonction finale de notre méthode ajax est comme indiqué ci-dessus, très similaire à jq . Alors qu’attendons-nous, commençons.
Idée générale
Notre méthode ajax doit y passer un objet. Dans cet objet, nous pouvons définir certains attributs que nous voulons, nous avons juste. Divers attributs doivent être initialisés
//默认请求参数 var _options = { url: null, // 请求连接 type: 'GET', // 请求类型 data: null, // post时请求体 dataType: 'text', // 返回请求的类型,有text/json两种 jsonp: 'callback', // jsonp请求的标志,一般不改动 jsonpCallback: 'jsonpCallback', //jsonp请求的函数名 async: true, // 是否异步 cache: true, // 是否缓存 timeout:null, // 设置请求超时 contentType: 'application/x-www-form-urlencoded', success: null, // 请求成功回调函数 fail: null // 请求失败回调 }
Ci-dessus, nous avons défini une grande série de données liées aux requêtes, puis nous commencerons à écrire la fonction principale ajax. La méthode ajax actuelle est comme ceci
var ajax = function () { //默认请求参数 var _options = { url: null, type: 'GET', data: null, dataType: 'text', jsonp: 'callback', jsonpCallback: 'jsonpCallback', async: true, cache: true, timeout:null, contentType: 'application/x-www-form-urlencoded', success: null, fail: null } // ... return function (options) { // ... } }()
var ajax = function () { //默认请求参数 var _options = { url: null, type: 'GET', data: null, dataType: 'text', jsonp: 'callback', jsonpCallback: 'jsonpCallback', async: true, cache: true, timeout:null, contentType: 'application/x-www-form-urlencoded', success: null, fail: null } // 内部使用的继承方法 var _extend = function(target,options) { if( typeof target !== 'object' || typeof options !== 'object' ) { return; } var copy ,clone, name; for( name in options ) { if(options.hasOwnProperty(name) && !target.hasOwnProperty(name)) { target[name] = options[name]; } } return target; }; // ... return function (options) { // 没有传参或者没有url,抛出错误 if( !options || !options.url ) { throw('参数错误!'); } // 继承操作 options.type = options.type.toUpperCase(); _extend(options,_options); // ... } }()
var ajax = function () { //默认请求参数 var _options = { url: null, type: 'GET', data: null, dataType: 'text', jsonp: 'callback', jsonpCallback: 'jsonpCallback', async: true, cache: true, timeout:null, contentType: 'application/x-www-form-urlencoded', success: null, fail: null } // 内部使用的继承方法 var _extend = function(target,options) { if( typeof target !== 'object' || typeof options !== 'object' ) { return; } var copy ,clone, name; for( name in options ) { if(options.hasOwnProperty(name) && !target.hasOwnProperty(name)) { target[name] = options[name]; } } return target; }; // jsonp处理函数 function _sendJsonpRequest(url,callbackName,succCallback) { var script = document.createElement('script'); script.type="text/javascript"; script.src=url; document.body.appendChild(script); // 如果用户自己定义了回调函数,就用自己定义的,否则,调用success函数 window[callbackName] = window[callbackName] || succCallback; } // ... return function (options) { // 没有传参或者没有url,抛出错误 if( !options || !options.url ) { throw('参数错误!'); } // 继承操作 options.type = options.type.toUpperCase(); _extend(options,_options); /*jsonp部分,直接返回*/ if( options.dataType === 'jsonp' ) { var jsonpUrl = options.url.indexOf('?') > -1 ? options.url: options.url + '?' + options.jsonp+ '=' + options.jsonpCallback; return _sendJsonpRequest(jsonpUrl,options.jsonpCallback,options.success); } // ... } }()
var ajax = function () { //默认请求参数 var _options = { url: null, type: 'GET', data: null, dataType: 'text', jsonp: 'callback', jsonpCallback: 'jsonpCallback', async: true, cache: true, timeout:null, contentType: 'application/x-www-form-urlencoded', success: null, fail: null } // 内部使用的继承方法 var _extend = function(target,options) { if( typeof target !== 'object' || typeof options !== 'object' ) { return; } var copy ,clone, name; for( name in options ) { if(options.hasOwnProperty(name) && !target.hasOwnProperty(name)) { target[name] = options[name]; } } return target; }; // jsonp处理函数 function _sendJsonpRequest(url,callbackName,succCallback) { var script = document.createElement('script'); script.type="text/javascript"; script.src=url; document.body.appendChild(script); // 如果用户自己定义了回调函数,就用自己定义的,否则,调用success函数 window[callbackName] = window[callbackName] || succCallback; } // json转化为字符串 var _param = function(data) { var str = ''; if( !data || _empty(data)) { return str; } for(var key in data) { str += key + '='+ data[key]+'&' } str = str.slice(0,-1); return str; } //判断对象是否为空 var _empty = function(obj) { for(var key in obj) { return false; } return true; } // ... return function (options) { // 没有传参或者没有url,抛出错误 if( !options || !options.url ) { throw('参数错误!'); } // 继承操作 options.type = options.type.toUpperCase(); _extend(options,_options); /*jsonp部分,直接返回*/ if( options.dataType === 'jsonp' ) { var jsonpUrl = options.url.indexOf('?') > -1 ? options.url: options.url + '?' + options.jsonp+ '=' + options.jsonpCallback; return _sendJsonpRequest(jsonpUrl,options.jsonpCallback,options.success); } //XMLHttpRequest传参无影响 var xhr = new (window.XMLHttpRequest || ActiveXObject)('Microsoft.XMLHTTP'); // get搜索字符串 var search = ''; // 将data序列化 var param= _param(options.data) if( options.type === 'GET' ) { search = (options.url.indexOf('?') > -1 ? '&' : '?') + param; if(!options.cache) { search += '&radom='+Math.random(); } param = null; } // ... } }()
Comme vous pouvez le voir, nous connaissons très bien le code xhr Ici, nous devons écrire une méthode parseJSON qui analyse et renvoie une chaîne. pour former un objet au format json, similaire à La méthode parseJSON dans jq est comme indiqué ci-dessus.
; var ajax = function () { //默认请求参数 var _options = { url: null, type: 'GET', data: null, dataType: 'text', jsonp: 'callback', jsonpCallback: 'jsonpCallback', async: true, cache: true, timeout:null, contentType: 'application/x-www-form-urlencoded', success: null, fail: null } // json转化为字符串 var _param = function(data) { var str = ''; if( !data || _empty(data)) { return str; } for(var key in data) { str += key + '='+ data[key]+'&' } str = str.slice(0,-1); return str; } //判断对象是否为空 var _empty = function(obj) { for(var key in obj) { return false; } return true; } var _extend = function(target,options) { if( typeof target !== 'object' || typeof options !== 'object' ) { return; } var copy ,clone, name; for( name in options ) { if(options.hasOwnProperty(name) && !target.hasOwnProperty(name)) { target[name] = options[name]; } } return target; }; // 自定义text转化json格式 var parseJSON = function(text) { if(typeof text !== 'string') { return; } if( JSON && JSON.parse ) { return JSON.parse(text); } return (new Function('return '+text))(); } // jsonp处理函数 function _sendJsonpRequest(url,callbackName,succCallback) { var script = document.createElement('script'); script.type="text/javascript"; script.src=url; document.body.appendChild(script); // 如果用户自己定义了回调函数,就用自己定义的,否则,调用success函数 window[callbackName] = window[callbackName] || succCallback; } return function (options) { // 没有传参或者没有url,抛出错误 if( !options || !options.url ) { throw('参数错误!'); } // 继承操作 options.type = options.type.toUpperCase(); _extend(options,_options); /*jsonp部分,直接返回*/ if( options.dataType === 'jsonp' ) { var jsonpUrl = options.url.indexOf('?') > -1 ? options.url: options.url + '?' + options.jsonp+ '=' + options.jsonpCallback; _sendJsonpRequest(jsonpUrl,options.jsonpCallback,options.success); return; } //XMLHttpRequest传参无影响 var xhr = new (window.XMLHttpRequest || ActiveXObject)('Microsoft.XMLHTTP'); // get搜索字符串 var search = ''; // 将data序列化 var param= _param(options.data) if( options.type === 'GET' ) { search = (options.url.indexOf('?') > -1 ? '&' : '?') + param; if(!options.cache) { search += '&radom='+Math.random(); } param = null; } xhr.open( options.type, options.url + search, options.async ); xhr.onreadystatechange = function() { if( xhr.readyState == 4 ) { if( xhr.status >= 200 && xhr.status < 300 || xhr.status == 304 ) { var text = xhr.responseText; // json格式转换 if(options.dataType == 'json') { text = parseJSON(text) } if( typeof options.success === 'function') { options.success(text,xhr.status) } }else { if(typeof options.fail === 'function') { options.fail('获取失败', 500) } } } } xhr.setRequestHeader('content-type',options.contentType); // get请求时param时null xhr.send(param); // 如果设置了超时,就定义 if(typeof options.timeout === 'number') { // ie9+ if( xhr.timeout ) { xhr.timeout = options.timeout; }else { setTimeout(function() { xhr.abort(); },options.timeout) } } } }()
jQuery Ajax Analysis Collection
Native js implémente la méthode de requête 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!

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

AI Hentai Generator
Générez AI Hentai gratuitement.

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)

Sujets chauds

Les téléphones mobiles vivox100 et x100 sont des modèles représentatifs de la gamme de produits de téléphonie mobile de Vivo. Ils représentent respectivement les niveaux de technologie haut de gamme de Vivo à différentes périodes. Par conséquent, ces deux téléphones mobiles présentent certaines différences en termes de conception, de performances et de fonctions. Cet article procédera à une comparaison détaillée entre ces deux téléphones mobiles en termes de comparaison des performances et d'analyse des fonctions pour aider les consommateurs à mieux choisir le téléphone mobile qui leur convient. Tout d’abord, examinons la comparaison des performances entre les vivox100 et x100. vivox100s est équipé des dernières

Comment mettre en œuvre la double connexion WeChat sur les téléphones mobiles Huawei ? Avec l’essor des réseaux sociaux, WeChat est devenu l’un des outils de communication indispensables dans la vie quotidienne des gens. Cependant, de nombreuses personnes peuvent rencontrer un problème : se connecter à plusieurs comptes WeChat en même temps sur le même téléphone mobile. Pour les utilisateurs de téléphones mobiles Huawei, il n'est pas difficile d'obtenir une double connexion WeChat. Cet article explique comment obtenir une double connexion WeChat sur les téléphones mobiles Huawei. Tout d'abord, le système EMUI fourni avec les téléphones mobiles Huawei offre une fonction très pratique : l'ouverture d'une double application. Grâce à la fonction de double ouverture de l'application, les utilisateurs peuvent simultanément

Avec le développement rapide d'Internet, le concept d'auto-média est devenu profondément ancré dans le cœur des gens. Alors, qu’est-ce que l’auto-média exactement ? Quelles sont ses principales caractéristiques et fonctions ? Ensuite, nous explorerons ces questions une par une. 1. Qu’est-ce que l’auto-média exactement ? Nous-médias, comme son nom l’indique, signifie que vous êtes les médias. Il fait référence à un support d'informations grâce auquel des individus ou des équipes peuvent créer, éditer, publier et diffuser de manière indépendante du contenu via la plateforme Internet. Différent des médias traditionnels, tels que les journaux, la télévision, la radio, etc., les automédias sont plus interactifs et personnalisés, permettant à chacun de devenir producteur et diffuseur d'informations. 2. Quelles sont les principales caractéristiques et fonctions du self-média ? 1. Seuil bas : L’essor des médias autonomes a abaissé le seuil d’entrée dans l’industrie des médias. Des équipements encombrants et des équipes professionnelles ne sont plus nécessaires.

Astuces PHP : Implémentez rapidement la fonction de retour à la page précédente. Dans le développement web, nous rencontrons souvent le besoin d'implémenter la fonction de retour à la page précédente. De telles opérations peuvent améliorer l’expérience utilisateur et faciliter la navigation des utilisateurs entre les pages Web. En PHP, nous pouvons réaliser cette fonction grâce à un code simple. Cet article présentera comment implémenter rapidement la fonction de retour à la page précédente et fournira des exemples de code PHP spécifiques. En PHP, on peut utiliser $_SERVER['HTTP_REFERER'] pour récupérer l'URL de la page précédente

Comment mettre en œuvre la fonction de clonage WeChat sur les téléphones mobiles Huawei Avec la popularité des logiciels sociaux et l'importance croissante accordée à la confidentialité et à la sécurité, la fonction de clonage WeChat est progressivement devenue le centre d'attention. La fonction de clonage WeChat peut aider les utilisateurs à se connecter simultanément à plusieurs comptes WeChat sur le même téléphone mobile, ce qui facilite la gestion et l'utilisation. Il n'est pas difficile de mettre en œuvre la fonction de clonage WeChat sur les téléphones mobiles Huawei. Il vous suffit de suivre les étapes suivantes. Étape 1 : Assurez-vous que la version du système de téléphonie mobile et la version de WeChat répondent aux exigences. Tout d'abord, assurez-vous que la version de votre système de téléphonie mobile Huawei a été mise à jour vers la dernière version, ainsi que l'application WeChat.

À mesure que Xiaohongshu devient populaire parmi les jeunes, de plus en plus de personnes commencent à utiliser cette plateforme pour partager divers aspects de leurs expériences et de leurs idées de vie. Comment gérer efficacement plusieurs comptes Xiaohongshu est devenu une question clé. Dans cet article, nous aborderons certaines des fonctionnalités du logiciel de gestion de compte Xiaohongshu et explorerons comment mieux gérer votre compte Xiaohongshu. À mesure que les médias sociaux se développent, de nombreuses personnes doivent gérer plusieurs comptes sociaux. C'est également un défi pour les utilisateurs de Xiaohongshu. Certains logiciels de gestion de compte Xiaohongshu peuvent aider les utilisateurs à gérer plusieurs comptes plus facilement, notamment la publication automatique de contenu, la publication programmée, l'analyse des données et d'autres fonctions. Grâce à ces outils, les utilisateurs peuvent gérer leurs comptes plus efficacement et accroître l'exposition et l'attention de leur compte. De plus, le logiciel de gestion de compte Xiaohongshu a

Le langage de programmation PHP est un outil puissant pour le développement Web, capable de prendre en charge une variété de logiques et d'algorithmes de programmation différents. Parmi eux, l’implémentation de la séquence de Fibonacci est un problème de programmation courant et classique. Dans cet article, nous présenterons comment utiliser le langage de programmation PHP pour implémenter la séquence de Fibonacci et joindrons des exemples de code spécifiques. La suite de Fibonacci est une suite mathématique définie comme suit : le premier et le deuxième élément de la suite valent 1, et à partir du troisième élément, la valeur de chaque élément est égale à la somme des deux éléments précédents. Les premiers éléments de la séquence

Dans le domaine actuel du développement logiciel, Golang (langage Go), en tant que langage de programmation efficace, concis et hautement simultané, est de plus en plus favorisé par les développeurs. Sa riche bibliothèque de normes et ses fonctionnalités de concurrence efficaces en font un choix de premier plan dans le domaine du développement de jeux. Cet article explorera comment utiliser Golang pour le développement de jeux et démontrera ses puissantes possibilités à travers des exemples de code spécifiques. 1. Avantages de Golang dans le développement de jeux. En tant que langage typé statiquement, Golang est utilisé dans la construction de systèmes de jeux à grande échelle.
