Dois-je introduire jquery pour utiliser ajax ?

L'utilisation d'ajax ne nécessite pas l'introduction de jquery ; le nom complet d'ajax est "Javascript et XML asynchrones", c'est-à-dire JavaScript et XML asynchrones, qui fait référence à une technologie de développement Web permettant de créer des applications Web interactives. JavaScript prend à l'origine en charge ajax. . Si vous utilisez une requête ajax native, vous n'avez bien sûr pas besoin d'introduire jquery.

L'environnement d'exploitation de cet article : système windows10, version javascript1.8.5&&html5, ordinateur DELL G3.

Avez-vous besoin d'introduire jquery pour utiliser ajax ?

js prend à l'origine en charge ajax. Si vous utilisez des requêtes ajax natives, vous n'avez bien sûr pas besoin d'appeler la bibliothèque jquery !

AJAX signifie « Asynchronous javascript and XML » (javascript et XML asynchrones), qui fait référence à une technologie de développement Web permettant de créer des applications Web interactives. AJAX permet aux pages Web de se mettre à jour de manière asynchrone en échangeant de petites quantités de données avec le serveur en arrière-plan. Cela signifie que certaines parties d'une page Web peuvent être mises à jour sans recharger la page entière.

Pourquoi utiliser AJAX ? Avantages d’AJAX ?

AJAX n'est pas un nouveau langage de programmation, mais une technologie permettant de créer des applications Web meilleures, plus rapides et plus interactives.

Utilisez Javascript pour envoyer des requêtes au serveur et gérer les réponses sans bloquer l'utilisateur ! Objet principal XMLHTTPRequest. Grâce à cet objet, votre JavaScript peut échanger des données avec le serveur web sans recharger la page.

AJAX utilise le transfert de données asynchrone (requêtes HTTP) entre le navigateur et le serveur Web, ce qui permet à une page Web de demander de petites quantités d'informations au serveur au lieu de la page entière.

AJAX rend les applications Internet plus petites, plus rapides et plus conviviales.

AJAX est une technologie de navigateur indépendante du logiciel du serveur Web. AJAX est basé sur les standards Web suivants : JavaScript, XML, HTML, CSS Les standards Web utilisés dans AJAX sont bien définis et pris en charge par tous les principaux navigateurs. Les applications AJAX sont indépendantes du navigateur et de la plate-forme.

Les applications Web présentent de nombreux avantages par rapport aux applications de bureau : elles peuvent atteindre un large éventail d'utilisateurs, elles sont plus faciles à installer et à maintenir, et elles sont plus faciles à développer.

Cependant, les applications Internet ne sont pas aussi complètes et conviviales que les applications de bureau traditionnelles. Grâce à AJAX, les applications Internet peuvent devenir plus complètes et plus conviviales.

Utilisation d'Ajax en JavaScript.

Implémentation de la méthode Get :

<script type="text/javascript">
     var xmlHttpRequest;
     //创建XHR对象
     function createXmlHttpRequest() {
         // if(typefo(XMLHttpRequest)!=&#39;undifine&#39;)
         if (window.ActiveXObject) { //如果是IE浏览器    
             return new ActiveXObject("Microsoft.XMLHTTP");
         } else if (window.XMLHttpRequest) { //非IE浏览器    
             return new XMLHttpRequest();
         }
     }
 
     //Ajax调用的方法
     function AjaxClick() {
         var url = "这里是你想要请求的URL，其中包括你的参数(?key1=value1&key2=value2)";
         //1.创建XMLHttpRequest组建    
         xmlHttpRequest = createXmlHttpRequest();
         //2.设置回调函数
         xmlHttpRequest.onreadystatechange = ajaxCallBack;
         //onreadystatechange。存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
         //3.初始化XMLHttpRequest组建    
         xmlHttpRequest.open("GET", url, true);
 
         //open(method,url,async),规定请求的类型、URL 以及是否异步处理请求。
         //method：请求的类型；GET 或 POST
         //url：文件在服务器上的位置
         //async：true（异步）或 false（同步）
 
         //GET方式请求可以设置浏览器不使用缓存，需加上下面这段
         //xhr.setRequestHeader("If-Modified-Since", "0");
 
         //4.发送请求    
         xmlHttpRequest.send(null);
     }
 
     //回调函数    
     function ajaxCallBack() {
         //readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
         //0: 请求未初始化
         //1: 服务器连接已建立
         //2: 请求已接收
         //3: 请求处理中
         //4: 请求已完成，且响应已就绪
 
         //status    请求响应状态码
         //200: "OK"
         //404: 未找到页面
         if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
             //表示请求成功，且正常响应
 
             //responseText    获得字符串形式的响应数据。
             //responseXML    获得 XML 形式的响应数据。
             var data = xmlHttpRequest.responseText;
 
             //你具体的代码操作写在这里，如对请求响应的数据如何处理
         }
     }
 </script>

Implémentation de la méthode Post :

<script type="text/javascript">
     var xmlHttpRequest;
     //创建XHR对象
     function createXmlHttpRequest() {
         if (window.ActiveXObject) { //如果是IE浏览器    
             return new ActiveXObject("Microsoft.XMLHTTP");
         } else if (window.XMLHttpRequest) { //非IE浏览器    
             return new XMLHttpRequest();
         }
     }
 
     //Ajax调用的方法
     function AjaxClick() {
         var url = "这里是你想要请求的URL，不包括参数";
         //1.创建XMLHttpRequest组建    
         xmlHttpRequest = createXmlHttpRequest();
         //2.设置回调函数
         xmlHttpRequest.onreadystatechange = ajaxCallBack;
         //3.初始化XMLHttpRequest组建    
         xmlHttpRequest.open("POST", url, true);
         //4.添加请求头：
         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
         //5.发送请求，send("这里是你的请求参数")
         xmlHttpRequest.send("key1=value1&key2=value2");
     }
 
     //回调函数    
     function ajaxCallBack() {
         if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
             var data = xmlHttpRequest.responseText;
 
             //你具体的代码操作写在这里，如对请求响应的数据如何处理
         }
     }
 </script>

【Recommandation de didacticiel associée : 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!