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.
| 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> ![Combat réel Front-end Vue3 [projet vue manuscrit]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![Tutoriel APIPOST [Vulgarisation des concepts techniques liés à la communication réseau]](https://img.php.cn/upload/course/000/000/068/63996f34c6c94370.png)
