Publier AJAX ou obtenir une demande de serveur

AJAX post ou get server request :

L'objet XMLHttpRequest est utilisé pour échanger des données avec le serveur.

Si vous souhaitez envoyer une requête au serveur, vous devez utiliser les méthodes open() et send() de l'objet XMLHttpRequest.

属性	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。（1）.method:请求的类型；GET或POST。（2）.url:文件在服务器上的位置。（3）.async:true（异步）或 false（同步）。
send(string)	将请求发送到服务器。 string:仅用于 POST 请求

Attributs

Description

open(méthode, url,async)

Spécifie le type de demande, l'URL et s'il faut traiter la demande de manière asynchrone.

(1).method : type de requête ; GET ou POST.

(2).url : L'emplacement du fichier sur le serveur.

(3).async:true (asynchrone) ou false (synchrone).

envoyer (chaîne)

Envoie la requête au serveur.

string : utilisé uniquement pour les requêtes POST

1 La différence entre get et post :

La méthode get est peut-être plus rapide et a une forte applicabilité, mais dans de nombreux cas, vous devez toujours utiliser post.

Les scénarios recommandés pour l'utilisation de la méthode post sont les suivants :

(1) Ne vous attendez pas à utiliser des fichiers en cache (mise à jour de fichiers ou de bases de données sur le serveur).

(2). Envoyez une grande quantité de données au serveur (POST n'a pas de limite de données).

(3). Lors de l'envoi d'une entrée utilisateur contenant des caractères inconnus, POST est plus stable et fiable que GET.

2. Méthode Get :

Regardez d'abord un code de méthode Get :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<script>
function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
  else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("show").innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET", "demo/ajax/net/demo.aspx", true);
  xmlhttp.send();
}
window.onload = function () {
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    loadXMLDoc();
  }
}
</script>
</head>
<body>
<div>
  <div id="show"></div>
  <input id="bt" type="button" value="查看效果"/>
</div>
</body>
</html>

Dans le code ci-dessus, cliquez sur Le bouton peut obtenir la date et l'heure actuelles du serveur. Le code c# est le suivant :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace ajax
{
    public partial class demo : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Response.Write(System.DateTime.Now);
        }
    }
}

Remarque : la méthode ci-dessus peut lire les données du cache dans le navigateur IE, ce qui signifie que l'heure sera obtenu normalement lorsque le bouton est cliqué pour la première fois. Après la date, les clics suivants n'auront aucun effet dans les navigateurs tels que Google ou Firefox. La solution est la suivante :

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>php中文网</title> 
<script>
function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
   }
   else {
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange = function () {
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
       document.getElementById("show").innerHTML = xmlhttp.responseText;
     }
   }
   xmlhttp.open("GET", "demo/ajax/net/demo.aspx?rnd=" + Math.random(), true);
   xmlhttp.send();
}
window.onload = function () {
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    loadXMLDoc();
  }
}
</script> 
</head> 
<body> 
<div> 
  <div id="show"></div> 
  <input id="bt" type="button" value="查看效果"/> 
</div> 
</body> 
</html>

Le. La solution est très simple, qui consiste à ajouter un nombre aléatoire après l'url, afin que chaque requête soit considérée comme une nouvelle URL, donc elle ne sera pas mise en cache.

Vous pouvez également utiliser GET pour envoyer des informations. Vous pouvez envoyer des informations via l'URL. Le code est le suivant :<🎜>

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<meta name="author" content="http://www.php.cn/" /> 
<title>php中文网</title> 
<script>
function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
  else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("show").innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET", "demo/ajax/net/demoPara.aspx?webName="+escape("php中文网")+"&age=3", true);
  xmlhttp.send();
}
window.onload = function () {
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    loadXMLDoc();
  }
}
</script>
</head>
<body>
<div>
  <div id="show"></div>
  <input id="bt" type="button" value="查看效果"/>
</div>
</body>
</html>

<🎜>Cliquez sur le bouton pour obtenir le contenu spécifié. :<🎜>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace ajax
{
    public partial class demoPara : System.Web.UI.Page
    {
        string webName;
        int age;
        protected void Page_Load(object sender, EventArgs e)
        {
            webName =Server.UrlDecode(Request.QueryString["webName"]);
            age = Convert.ToInt32(Request.QueryString["age"]);
            Response.Write("欢迎来到" + webName + "，本站已经成立" + age + "周年。");
        }
    }
}

<🎜> <🎜><🎜>3. Requête POST : <🎜><🎜><🎜><🎜>Regardez un exemple de code : <🎜>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<script>
function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
  else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("show").innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.open("POST", "demo/ajax/net/demo.aspx", true);
  xmlhttp.send();
}
window.onload = function () {
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    loadXMLDoc();
  }
}
</script>
</head>
<body>
<div>
  <div id="show"></div>
  <input id="bt" type="button" value="查看效果"/>
</div>
</body>
</html>

<🎜>Le code ci-dessus utilise la publication méthode pour obtenir l'heure et la date actuelles du serveur, ce qui n'existe pas. Problème de mise en cache à l'aide de la méthode get. <🎜><🎜>Si vous avez besoin de POSTer des données comme un formulaire HTML, vous pouvez utiliser setRequestHeader() pour ajouter des en-têtes HTTP, puis spécifier les données à envoyer dans la méthode send() :<🎜>

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<meta name="author" content="http://www.php.cn/" /> 
<title>php中文网</title> 
<script>
function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
  else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("show").innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.open("POST", "demo/ajax/net/postParam.aspx", true);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send("webName=php中文网&age=3");
}
window.onload = function () {
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    loadXMLDoc();
  }
}
</script>
</head>
<body>
<div>
  <div id="show"></div>
  <input id="bt" type="button" value="查看效果"/>
</div>
</body>
</html>

Formation continue

nouveau fichier

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="author" content="http://www.php.cn/" /> <title>php中文网</title> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("show").innerHTML = xmlhttp.responseText; } } xmlhttp.open("POST", "demo/ajax/net/demo.aspx", true); xmlhttp.send(); } window.onload = function () { var obt = document.getElementById("bt"); obt.onclick = function () { loadXMLDoc(); } } </script> </head> <body> <div> <div id="show"></div> <input id="bt" type="button" value="查看效果"/> </div> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Publier AJAX ou obtenir une demande de serveur

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]