AJAX - Envoyer une requête au serveur
Pour envoyer la requête au serveur, nous devons utiliser la méthode open() et méthode send( ). La méthode
open() nécessite trois paramètres :
Le premier paramètre définit la méthode utilisée pour envoyer la requête (GET ou POST).
Comparé au POST, GET est plus simple et plus rapide, et fonctionne dans la plupart des cas.
Veuillez toutefois utiliser les requêtes POST dans les situations suivantes :
Il n'est pas possible d'envoyer de grandes quantités de données au serveur à l'aide de fichiers mis en cache (mise à jour de fichiers ou de bases de données sur le serveur) (POST n'a pas de limite de taille de données). POST est plus stable et fiable que GET lorsque l'entrée utilisateur contient des caractères inconnus
Le deuxième paramètre spécifie l'URL du script côté serveur (le fichier peut être n'importe quel type de fichier, tel que comme .txt et .xml, ou des fichiers de script serveur tels que .asp et .php (peuvent effectuer des tâches sur le serveur avant de renvoyer une réponse)).
Le troisième paramètre précise que la requête doit être traitée de manière asynchrone (vrai (asynchrone) ou faux (synchrone)).
La méthode send() envoie la requête au serveur. Si l'on suppose que le fichier HTML et le fichier ASP se trouvent dans le même répertoire, alors le code ressemble à ceci :
xmlHttp.open("GET","time .asp",true) ;
xmlHttp.send(null);
GET ou POST ?
Comparé au POST, GET est plus simple et plus rapide, et fonctionne dans la plupart des cas.
Veuillez toutefois utiliser les requêtes POST dans les situations suivantes :
Il n'est pas possible d'envoyer de grandes quantités de données au serveur à l'aide de fichiers mis en cache (mise à jour de fichiers ou de bases de données sur le serveur) (POST n'a pas de limite de taille de données). POST est plus stable et fiable que GET lorsque la saisie de l'utilisateur contient des caractères inconnus
Une simple requête GET :
xmlhttp.open("GET","demo_get.html",true);
xmlhttp.send();Vous pouvez obtenir des résultats en cache.
Pour éviter cela, ajoutez un identifiant unique à l'URL :
xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);
xmlhttp.send();Si vous souhaitez envoyer l'information via la méthode GET, ajoutez l'information à l'URL :
xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
xmlhttp.send();Code complet :
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>Une simple requête POST :
xmlhttp.open("POST","demo_post.html",true);
xmlhttp.send();Si vous avez besoin de POST des données comme un formulaire HTML, veuillez utiliser setRequestHeader() pour ajouter des en-têtes HTTP. Précisez ensuite les données que vous souhaitez envoyer dans la méthode send()
xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");Syntaxe :
setRequestHeader(header,value) Ajoute un en-tête HTTP à la requête.
header : précise le nom de l'en-tête
value : précise la valeur de l'en-tête
Code complet :
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>url - fichier sur le serveur
Le paramètre url de la méthode open() est l'adresse du fichier sur le serveur :
xmlhttp.open("GET","ajax_test.html" ,true);
Le fichier peut être n'importe quel type de fichier, tel que .txt et .xml, ou un fichier de script serveur, tel que .asp et .php (qui peut effectuer des tâches sur le serveur avant de renvoyer une réponse).
Async - Vrai ou faux ?
AJAX fait référence à JavaScript et XML asynchrones.
Si l'objet XMLHttpRequest doit être utilisé pour AJAX, le paramètre async de sa méthode open() doit être défini sur true :
xmlhttp.open("GET"," ajax_test.html" ,true);
L'envoi de requêtes asynchrones est une énorme amélioration pour les développeurs Web. De nombreuses tâches effectuées sur le serveur prennent beaucoup de temps. Avant AJAX, cela pouvait entraîner le blocage ou l'arrêt de l'application.
Avec AJAX, JavaScript n'a pas besoin d'attendre une réponse du serveur. Au lieu de cela :
Exécutez d'autres scripts en attendant la réponse du serveur.
Async=true
Lors de l'utilisation de async=true, veuillez spécifier la fonction à exécuter en réponse à l'état prêt dans l'événement onreadystatechange :
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();Async = false
Si vous devez utiliser async= false, veuillez modifier le troisième paramètre de la méthode open() en false :
xmlhttp.open("GET","test1.txt",false) ;
Nous vous déconseillons d'utiliser async=false, mais pour certaines petites requêtes, c'est également possible.
N'oubliez pas que JavaScript attendra que la réponse du serveur soit prête avant de poursuivre l'exécution. Si le serveur est occupé ou lent, l'application se bloque ou s'arrête.
Remarque : lorsque vous utilisez async=false, veuillez ne pas écrire la fonction onreadystatechange - mettez simplement le code après l'instruction send() :
xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;Exemple :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<script>
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open('get','new.php',true); //引入new.php文件
xhr.send();
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
//alert( xhr.responseText ); 后端传来的格式是一个数组里面很多条json 自己可以测试下
var data = JSON.parse( xhr.responseText ); // 将后台获取的内容转为json类型 每一个json里面有两个键：title和date
var oUl = document.getElementById('ul1'); //获取显示新闻列表的节点
var html = '';
for (var i=0; i<data.length; i++) { // 循环所有的json数据，并把每一条添加到列表中
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html; //把内容放在页面里
} else {
alert('出错了,Err：' + xhr.status);
}
}
}
}
}
</script>
</head>
<body>
<input type="button" value="按钮" id="btn" />
<ul id="ul1"></ul>
</body>
</html>Créer un nouveau fichier.php :
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$news = array(
array('title'=>'女总理默克尔滑雪时摔倒 骨盆断裂','date'=>'2014-1-6'),
array('title'=>'驻英外交官撰文互称对方国家为"伏地魔"','date'=>'2014-1-6'),
array('title'=>'安倍:望与中国领导人会面 中方:你关闭了大门','date'=>'2014-1-6'),
array('title'=>'揭秘台湾驻港间谍网运作 湖北宜昌副市长被查','date'=>'2014-1-6'),
array('title'=>'：嫦娥三号是货真价实的中国创造','date'=>'2014-1-6'),
);
echo json_encode($news);
?>