Un résumé des questions courantes d'entretien AJAX

[Recommandations de sujets connexes : questions d'entretien ajax (2020)]

1. au travail ? Interagir avec l'arrière-plan ? Alors pouvez-vous parler de quelques paramètres dans l'ajax encapsulé ?

url : L'adresse à laquelle envoyer la demande.

type : méthode de requête (post ou get ) est par défaut get.

async : Synchroniser les requêtes asynchrones, par défauttrueToutes les requêtes sont des requêtes asynchrones.

timeout : Paramètre du délai d'expiration en millisecondes

données : L'exigence est Object ou String paramètre de type, données envoyées au serveur

cache  : La valeur par défaut est true (lorsque dataType est script, la valeur par défaut est false) , défini sur false ne sera pas récupéré depuis le navigateur Charger demander des informations dans le cache.

dataType : Le type de données qui devrait être renvoyé par le serveur.

Les types disponibles sont les suivants :

xml : renvoie XML Les documents peuvent être traités avec JQuery.

html : renvoie le texte brut HTML contient le script Le La balise sera exécutée lorsque DOM sera inséré.

script : renvoie le code JavaScript en texte brut. Les résultats ne sont pas automatiquement mis en cache.

json : renvoie les données JSON.

jsonp : format JSONP. Lors de l'appel d'une fonction à l'aide du format JSONP, tel que myurl?callback=?, JQueryLe dernier "?" sera automatiquement remplacé par le nom de fonction correct pour exécuter la fonction de rappel.

text : renvoie une chaîne de texte brut.

succès : La fonction de rappel appelée une fois la requête réussie, a deux paramètres.

(1) sont les données renvoyées par le serveur et traitées selon les paramètres dataType.

(2) Une chaîne décrivant le statut.

erreur : nécessite un paramètre de type Fonction, une fonction qui est appelée lorsque la requête échoue. Cette fonction a 3 paramètres

(1) XMLHttpRequest objet

(2) Message d'erreur

(3) Objet d'erreur capturé( Facultatif)

complete :function(XMLHttpRequest,status){ //Paramètres d'exécution finaux une fois la requête terminée

[Recommandation de sujet] : Questions et réponses de l'entretien ajax 2020 (dernières)

Données 2.json Si comment traiter son format que vous utilisiez est y a-t-il un format fixe au travail ? Si j'envoie une demande de suppression d'une donnée dans les données, comment puis-je savoir que la suppression est réussie ou où sera-t-elle affichée après la suppression ? JSON.parse()

Convertissez en objet JSON, analysez-le en fonction des données et placez-le sur la page. Format :

{} et [] combiné avec épissé JSONStringEnvoyer une demande de suppression de données, l'arrière-plan renverra le résultat du traitement, le frontend jugera s'il a réussi en fonction du résultat renvoyé, puis traitez les éléments de la page.

3. Avez-vous déjà rencontré cette situation ? Dans le navigateur IE, les données de l'image d'arrière-plan ont changé mais le client n'a pas changé ? Il a demandé que la méthode de cache

JQuery.ajax()

du navigateur soit définie sur cache sur false, la requête ne sera pas chargée depuis le cache du navigateur, ou utilisez la méthode

post pour demander des données, ne seront pas mises en cache et les données seront demandées à nouveau à chaque fois 4 L'idée de mise en œuvre de l'onglet

Temps de survol de la souris, appel. méthode, transmettez

ceci, masque partiellement le contenu de tous les onglets, affiche ceci et contrôle l'affichage 5. L'idée de mise en œuvre de la cascade

Généralement, les données régionales sont stockées à l'aide de tableaux bidimensionnels, qui sont obtenus en arrière-plan puis stockés <.>

new Option() add dans la liste déroulante 6. Idées de mise en œuvre du graphique carrousel

Nommez les images dans l'ordre et utilisez une minuterie pour changer le chemin des images toutes les quelques secondes

Le deuxième type :

Utilisez la technologie de défilement transparent pour placer toutes les images dans le page, et la minuterie exécutera

Défilement, détermine la distance de défilement et prend le reste (%) La largeur de l'image est égale à 0, mettez le minuteur en pause, combien de secondes avant de démarrer le minuteur. 7. Parlez de ce que vous comprenez du bootstrap

Bootstrap est développé sur la base de HTML5 et CSS3, qui est en jQuery a été plus personnalisé et humanisé. Il vous suffit de donner à la balise un nom de Class correspondant. Formez un ensemble de <.>Bootstrap votre propre style de site Web unique et soyez compatible avec la plupart des plug-ins jQuery.

JQ Obtenez-le d'abord, puis utilisez-le.

Angularjs Utiliser directement

jQuery Mobile 是创建移动 web 应用程序的框架。jQuery Mobile 适用于所有流行的智能手机和平板电脑。jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局

(1. ) jQuery est une bibliothèque js Les principales fonctions fournies sont les sélecteurs, la modification d'attributs, la liaison d'événements, etc. (2) jQuery UI
est basé sur jQuery, en utilisant jQuery Extensibilité, plug-in conçu. Fournit certains éléments d'interface couramment utilisés, tels que les boîtes de dialogue, les comportements de déplacement, les comportements de redimensionnement, etc. (3) jQuery
lui-même se concentre sur l'arrière-plan et n'a pas une belle interface, tandis que jQuery UI complète les lacunes du premier, il fournit une superbe interface d’affichage, ce qui la rend plus facile à accepter par les gens. Il y a à la fois des coulisses puissantes et une façade magnifique. jQuery UI est un plug-in jQuery, mais il fait spécifiquement référence à la maintenance officielle de jQuery Plug-in pour la direction UI.

jQuery

1.Double boucle, en commençant par le premier bit et en jugeant la taille de chaque bit suivant, si les conditions sont remplies, utilisez le principe suivant pour changer la position

c = a;

a = b;

b = c;

2.Utilisez JSON.parse() pour obtenir le JSON objet, et ajoutez li, mettez les données dedans. 12. Idée de mise en œuvre consistant à tout sélectionner

Lorsque vous cliquez sur la case à cocher Tout sélectionner, jugez si

coché est vrai ou faux, que ce soit vrai prouve que tous sont sélectionnés , Obtenez toutes les cases à cocher correspondantes ci-dessous et remplacez coché par true, sinon remplacez-le par faux.

13.有一个输入框，只允许输入数字或字母，如果输入不合法则将输入框的边框变为红色，写代码

       var reg =/^[a-zA-Z0-9]+$/;
       if(!reg.text(输入框取出的value)){
              input.style.border= “red”;
};

14.有一个数组a=[1,2,3]，如果数字a中包含1，则将数组内容复制一遍变为[1,2,3,1,2,3],写代码

       for(var i = 0;i<a.length;i++){
              if(a[i] ==1){
                     a.concat(a);
                     break;
}
}15.写一个函数，用于生产随机密码，传入的参数为密码的长度，返回生产的随机密码，要求生成的随机密码必须含有大写字母、小写字母和数字

var padArr = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","0","1","2","3","4","5","6","7","8","9"];var padStr = "";function asd(length){
    for(var i = 0 ; i<length;i++){
        padStr += padArr[Math.floor(Math.random()*padArr.length)];
    }
}

16.点击按钮向后台发起请求，将返回的数据直接输出，如果3秒内没有获得返回的数据则显示“请求超时，请重新提交”，写代码

varajaxTimeoutTest = $.ajax({
url:'',  //请求的URL
timeout : 1000, //超时时间设置，单位毫秒
type : 'get',  //请求方式，get或post
data :{},  //请求所传参数，json格式
dataType:'json',//返回的数据格式
success:function(data){ //请求成功的回调函数
alert("成功");
},
complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
if(status=='timeout'){//超时,status还有success,error等值的情况
  ajaxTimeoutTest.abort();//终止请求
  alert("超时");
}
}
});

17.ajax的四部：

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("post||get","URL",true||false);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = callBack;
xmlhttp.send(null);

18.ajax接受到的数据类型是什么？

String

JSON串

JSON对象

19.ajax接受到的数据如何处理？

JSON对象直接循环使用

JSON串转JSON使用

String直接使用

20.哪些地方需要ajax，哪些地方不需要，ajax的优点是什么，缺点是什么？

页面不进行跳转刷新的时候，异步处理数据的时候，表单自动补全功能----使用Ajax，

提交后不再使用原页面，可以进行跳转刷新的，查询之类的功能，可以不用Ajax

优点：

<1>.Mettre à jour les données sans actualiser.
AJAXLe plus gros avantage est qu'il peut communiquer avec le serveur pour conserver les données sans actualiser la page entière. Cela permet aux applications Web de répondre plus rapidement aux interactions des utilisateurs et d'éviter d'envoyer des informations inchangées sur le réseau, réduisant ainsi le temps d'attente des utilisateurs et apportant une très bonne expérience utilisateur.
<2>.Communiquez avec le serveur de manière asynchrone.
AJAXUtilise une méthode asynchrone pour communiquer avec le serveur, sans interrompre le fonctionnement de l'utilisateur, et a une capacité de réponse plus rapide. Optimisation de la communication entre le Navigateur et le Serveur, réduisant ainsi la transmission de données inutiles, le temps et le trafic de données sur le réseau.
<3>.Équilibrage de charge front-end et back-end.
AJAX peut transférer une partie du travail précédemment chargé par le serveur vers le client, en utilisant la capacité inactive du client pour le traiter, réduisant ainsi le charge sur le serveur et la bande passante, économisant ainsi de l'espace et des coûts de location du haut débit. Et pour réduire la charge sur le serveur, le principe de AJAX est "Obtenir des données à la demande" , ce qui peut minimiser la charge causée par les requêtes et réponses redondantes sur le serveur et améliorer les performances du site.
<4>.Largement pris en charge sur la base des normes.
AJAXBasé sur une technologie standardisée et largement prise en charge, il n'est pas nécessaire de télécharger des plug-ins ou des applets de navigateur, mais l'autorisation du client est requise JavaScript est exécuté sur le navigateur. À mesure que Ajax mûrit, certaines bibliothèques qui simplifient l'utilisation de Ajax ont également été publiées. De même, une autre technologie est apparue pour aider à la programmation, offrant des fonctionnalités alternatives aux utilisateurs qui ne prennent pas en charge JavaScript.
<5>.L'interface est séparée de l'application.
Ajax sépare l'interface et l'application dans WEB (on peut aussi dire qu'il s'agit de données et séparation de présentation) est propice à la division du travail et à la coopération, réduisant les erreurs d'application WEB causées par la modification des pages par du personnel non technique, améliorant l'efficacité et convient mieux aux systèmes de publication actuels .

Inconvénients :

<1>.AJAX tue les fonctions Retour et Historique, qui est une rupture des mécanismes du navigateur.
Dans le cas d'une mise à jour dynamique de la page, l'utilisateur ne peut pas revenir à l'état de la page précédente car le navigateur ne peut se souvenir que de la page statique dans l'historique. La différence entre une page qui a été entièrement lue et une page qui a été modifiée dynamiquement est très subtile ; les utilisateurs s'attendront souvent à ce que cliquer sur le bouton Précédent annule leur opération précédente, mais en AjaxDans l'application, cela ne sera pas possible.
Le bouton retour est une fonctionnalité importante d'un site web standard, mais il ne peut pas rivaliser avec jsExcellente collaboration. Il s'agit d'un problème sérieux causé par Ajax, car les utilisateurs espèrent souvent annuler l'opération précédente en revenant en arrière. Alors, y a-t-il une solution à ce problème ? La réponse est oui, comme le savent ceux qui ont utilisé Gmail, Gmail utilise AjaxLa technologie a résolu ce problème. Vous pouvez revenir sous Gmail, mais elle ne peut pas changer le mécanisme de Ajax, c'est le cas. juste une méthode relativement stupide mais efficace, c'est-à-dire que lorsque l'utilisateur clique sur le bouton de retour pour accéder à l'historique, il crée ou utilise un IFRAME caché pour reproduire le contenu de la page. changement. (Par exemple, lorsque l'utilisateur clique à nouveau dans Google Maps, il recherche dans un IFRAME masqué, puis les résultats de la recherche sont reflétés sur l'élément Ajax pour restaurer l'état de l'application à son état actuel)
Cependant, bien qu'il soit dit que ce problème peut être résolu, mais le coût de développement qu'il entraîne est très élevé, et est contraire au développement rapide requis par le framework Ajax. Il s'agit d'un problème très grave causé par Ajax.
Un point connexe est que l'utilisation de mises à jour dynamiques des pages rend difficile pour les utilisateurs d'enregistrer un état spécifique dans les favoris. Des solutions à ce problème ont émergé, la plupart utilisant des identifiants de fragments URL (souvent appelés ancres, c'est-à-dire URL dans #) pour garder une trace et permettre à l'utilisateur de revenir à un état d'application spécifié. (De nombreux navigateurs permettent à JavaScript de mettre à jour les ancres de manière dynamique, ce qui permet aux applications Ajax de mettre à jour les ancres simultanément avec le contenu affiché. . ) Ces Les solutions résolvent également de nombreux arguments concernant la non-prise en charge du bouton de retour.
<2>.AJAX problèmes de sécurité. La technologie
AJAX apporte non seulement une bonne expérience utilisateur aux utilisateurs, mais a également un impact positif sur informatique entreprises Apportant de nouvelles menaces de sécurité, la technologie Ajax revient à établir un canal direct vers les données d'entreprise. Cela permet aux développeurs d’exposer par inadvertance davantage de données et de logique de serveur qu’auparavant. La logique d'Ajax peut être masquée par la technologie d'analyse de sécurité côté client, permettant ainsi aux pirates de créer de nouvelles attaques à partir de serveurs distants. De plus, Ajax est également difficile à éviter certaines faiblesses de sécurité connues, telles que les attaques de scripts intersites, les attaques par injection SQL et <🎜basées sur les >Identifiants vulnérabilités de sécurité, etc.
<3>.Support faible des moteurs de recherche.
La prise en charge des moteurs de recherche est relativement faible. S'il est mal utilisé, AJAX augmentera le trafic de données réseau, réduisant ainsi les performances de l'ensemble du système.
<4>.Détruisez le mécanisme de gestion des exceptions du programme.
Au moins pour l'instant, comme Ajax.dll, Ajaxpro.dll Ces frameworks Ajax détruiront le mécanisme d'exception du programme. Concernant ce problème, je l'ai rencontré lors du processus de développement, mais après vérification, il n'y a quasiment aucune introduction pertinente sur Internet. Plus tard, j'ai fait une expérience et utilisé Ajax et le mode de soumission traditionnel formulaire pour supprimer une donnée ... apporte de grandes difficultés à notre débogage.
<5>. viole l'intention initiale de l'URL et du positionnement des ressources.
Par exemple, je vous donne une adresse URL, si Ajax< est utilisé 🎜> Technologie, peut-être que ce que vous voyez sous cette URL adresse et ce que je vois sous cette URL sont différents. Ceci est contraire à l’intention initiale du positionnement des ressources.
<6>.AJAX ne prend pas bien en charge les appareils mobiles. Certains appareils portables (tels que les téléphones mobiles, PDA, etc.) ne prennent actuellement pas en charge Ajax, comme lorsque nous ouvrons un site Web utilisant la technologie Ajax sur un navigateur mobile, elle n'est actuellement pas prise en charge.
<7>.Le client est trop gros et trop de code client entraîne des coûts de développement.
Complexe et sujet aux erreurs à écrire  ; il existe de nombreux codes redondants (les couches incluent js fichiers C'est un problème courant de AJAX, et beaucoup de code côté serveur dans le passé est maintenant placé sur le client); 🎜>Web Il existe des normes. 21. Que savez-vous des requêtes inter-domaines ?

Utilisez la méthode JQuery, utilisez l'accès au mode JSONP, dataType : 'jsonp' et passer dans callback=? après url

Un nom de fonction de rappel aléatoire sera généré, ou vous pouvez le nommer vous-même.

rappel, connectez-le à () et mettre les données Entrez () pour revenir à la page

fonction. nom (données).

Utiliserjsméthode de chargement des balises

Utilisez la balise script src pour écrire ce que vous vous souhaitez demander une URL, connecter les paramètres après l'adresse ? callback= Nom de la fonction

L'arrière-plan recevra un rappel valeur, connectez-vous à () , mettez les données dans () , revenez à la page,

fonctionnom(données)

后台直接开启同源策略的访问限制，设置响应头信息。

response.setHeader("Access-Control-Allow-Origin","*");

22.如何控制网页在网络传输中的数据量？

分页加载，瀑布流，限制每次加载的数据量。(??????不确定)

23.前端常规开发优化策略？

• 请减少HTTP请求

• 请正确理解 Repaint 和 Reflow

• 请减少对DOM的操作

• 使用JSON格式来进行数据交换

• 高效使用HTML标签和CSS样式

• 使用CDN加速（内容分发网络）

• 将CSS和JS放到外部文件中引用，CSS放头，JS放尾

• 精简CSS和JS文件（压缩）

• 压缩图片和使用图片Sprite技术

• 注意控制Cookie大小和污染

24.为什么异步加载JS文件？加载方式？

平时常用的引入JS方式，是同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，也就是说，浏览器在下载或执行该js代码块时，后面的标签不会被解析。

异步加载（async）JS文件，允许页面内容异步加载，仅适用于外部脚本。

延迟加载（defer）属性规定是否对脚本执行进行延迟，直到页面加载为止。

25.如果对一个js对象进行深度拷贝？

varajaxTimeoutTest = $.ajax({
url:'',  //请求的URL
timeout : 1000, //超时时间设置，单位毫秒
type : 'get',  //请求方式，get或post
data :{},  //请求所传参数，json格式
dataType:'json',//返回的数据格式
success:function(data){ //请求成功的回调函数
alert("成功");
},
complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
if(status=='timeout'){//超时,status还有success,error等值的情况
  ajaxTimeoutTest.abort();//终止请求
  alert("超时");
}
}
});

26.JS中有哪些数据类型？

number boolean string underfind null

object function array

27.ajax交换模型？同步异步的区别？

• 触发事件调用函数

• 创建XMlHttpRequest 对象open连接，send发送后台服务器

• 后台接收前端数据，根据业务需求访问数据库进行增删改查

• 数据库返回后台程序所需要的数据

• 后台拿到数据库数据，进行合理的处理，比如JSON串，返回给前端

• 前端接收到后台的响应数据，进行解析，根据业务需求动态操作页面元素

28.如何添加HTML事件，三种。

1. 直接在html标签的属性上添加<p οnclick="alert(&#39;p&#39;)">p</p>
2. 用dom的on...方法添加document.getElementById(&#39;p&#39;).onclick = function () {alert(&#39;p&#39;)};
3. 用事件监听addEventListener或attachEvent（IE）添加document.getElementById(&#39;p&#39;).addEventListener(&#39;click&#39;, function () {alert(&#39;p&#39;)}, false);

29.JS面向对象中继承的实现方式？

简单继承：

function A(x){
 　　this.x=x;
}

function B(x,y){
 　　this.tmpObj=A;
 　　this.tmpObj(x);
 　　delete this.tmpObj;
 　　this.y=y;
}

完美继承：

function AA(x){
    this.x = x;}AA.prototype.xxx = 2;function Obj(){
    AA.call(this,22);
    this.cc = 11;
    this.constructor = arguments.callee;
}Obj.prototype = new AA();var obj = new Obj();

30.编写一个方法，判断字符串是否是这样的组成，第一个必须是字母，最后一个必须是数字。

function checkStr(str){
       var diyige =str.subStr(0,1);
       var dierge =str.subStr(str.length-1,1);
var reg = /^[a-zA-Z]$/ 
if(reg.test(diyige) &&!isNAN(dierge)){
//第一个是字母,最后一个是数字
}
}

31.如何隐藏一个DOM元素？

Object.style.dispaly = “none”; || Object.style.visibility = “hidden”;

32.document.write，innerHTML和innertext区别是什么？

• document.write只能重绘整个页面

• innerHTML可以重绘页面的一部分(包含标签+文字)

• innertext可以重绘页面的一部分(只包含文字)

33.字符串abcdefg把de换成12，b后面接le，写出JS。

var str = “abcdefg”;
str = str.replace(“de”,”12”);
str = str.replace(“b”,”b1e”);

或者

var str = “abcdefg”;
str = str.split(“de”,”12”);
var str1 =str.subString(0,str.indexOf(‘b’)+1);
var str2 =str.subString(str.indexOf(‘b’)+1);
str = str1+”1e”+str2;

34.判断每个字符出现的次数：hello，最后显示： h:1,e:1,l:2,o:1.

var str = “hello”;
var o = [];
for(var i = 0 ;i<str.length;i++){
if(str.indexOf(str[i]) == i){
o[str[i]] = str.split(str[i]).length-1;
}
}
console.log(o);

35.使用CSS3动画效果实现一个小球的来回滚动。

36.h5的canvas画板如何实现会旋转的地球仪效果？（说出思想）

37.如何使过长的字体自动隐藏？

text-overflow: 
hidden
;

38.一个H5+C3的鼠标悬停效果？

39.移动端跟PC端的js文件区别？

40.如何处理一些手机端的兼容性？

41.IE浏览器兼容性，你了解哪些，简单举例子。

addEventListener() || attachEvent()

42.谈谈你对框架的理解。

对功能进行封装，使用者直接调用，或对样式进行预设置，使用者直接起名字

43.如何实现跨域？具体怎么实现？

第一种：

JSONP，利用传递方法名的方式，告诉后台前端方法名是什么，后台取到后，在名称后面拼接（），把数据（DATA）放到小括号中，返回前端，相当于返回：方法名（data）到前端后就直接调用这个方法了。

$.get(“ULR?callback=?”,function(data){
console.log(data);
})

第二种：

前端正常Ajax访问，后台开启同源策略限制！

“Access-Control-Allow-Origin”,”*”

44.对后台语言了解几种，如果了解其中一种，举例说明一个？

45.与后台的交互，AJAX只是其中的一小部分，其他的知道吗？

46.在上一家公司的要上线作品的具体流程是什么？

前后台项目整合，测试，上线

47.手机端和PC端有什么区别，需要注意哪些方面？

本质上没有什么太大的区别，需要注意一些浏览器的兼容问题。

48.用JQ完整的写出AJAX与后台交互的方法。

$.get(“url”,function(data){
 
});
 
$.post(“url”,{data},function(data){
 
});
 
$.ajax({
url:””,
......
.....
....
});

49.编写一段jq的方法扩展。

50.ECMAScript6怎么写class. 为什么会出现class这种东西？

51.如何判断一个对象是否属于某个类？

var obj = new String("abc"); 
alert(obj instanceof String);

52.使用过哪些可视化控件？

53.什么是闭包？

简单理解成：定义在一个函数内部的函数

闭包本质：将函数内部和函数外部连接起来的一座桥梁

最大用处：

1、可以读取函数内部变量

2, est de garder ces variables en mémoire, c'est-à-dire que la fermeture peut faire en sorte que son environnement de naissance existe toujours

54.eval peut calculer un certain String, existe-t-il un meilleur moyen ?

55. Que fait l'initialisation CSS en plus de la compatibilité du navigateur ?

Articles connexes recommandés : tutoriel vidéo 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!