DOM XML - HttpRequest objets
Grâce à l'objet XMLHttpRequest, vous pouvez mettre à jour une partie d'une page Web sans recharger la page entière.
XMLHttpRequest Object
objet XMLHttpRequest est utilisé pour échanger des données avec le serveur dans les coulisses.
objet XMLHttpRequest estle rêve d'un développeur, parce que vous pouvez:
- Mettre à jour la page Web sans recharger la page
- Après que la page est chargée à partir des données de demande de serveur
- Une fois la page chargée des données reçues du serveur
- L'envoi de données vers le serveur en arrière-plan
Créer un objet XMLHttpRequest
Tous les navigateurs modernes (IE7 +, Firefox, Chrome, Safari et Opera) a un objet intégré XMLHttpRequest.
Créer syntaxe d'objet XMLHttpRequest
Les anciennes versions d'Internet Explorer (IE5 et IE6) en utilisant des objets ActiveX:
Pour gérer tous les navigateurs modernes, y compris IE5 et IE6, s'il vous plaît vérifier si le navigateur prend en charge l'objet XMLHttpRequest. Si oui, alors créer un objet XMLHttpRequest, si elle ne le fait pas, créer un objet ActiveX:
Exemples
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
Essayez »
Envoyer une demande au serveur
Pour envoyer une demande au serveur, nous utilisons l'ouverture de l'objet XMLHttpRequest () et send () méthode:
xmlhttp.send();
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 规定请求的类型，URL，请求是否应该进行异步处理。 method：请求的类型：GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步） |
| send(string) | 发送请求到服务器。 string：仅用于 POST 请求 |
GET ou POST?
GET simple que POST et rapide et peut être utilisé dans la plupart des cas.
Cependant, toujours utiliser une requête POST dans les circonstances suivantes:
- les fichiers mis en cache est pas une option (ou un fichier de base de données sur le serveur de mise à jour)
- La quantité de données envoyées au serveur (POST aucune limite de taille) grand
- Envoi d'entrée de l'utilisateur (peut contenir des caractères inconnus), POST forte et plus sûre que GET
URL - fichier sur le serveur
l'argument url de méthode open (), est l'adresse d'un fichier sur le serveur:
Le fichier peut être tout type de fichier (comme .txt et .xml), ou des fichiers de script serveur (comme .html et .php, peut effectuer des actions sur le serveur avant de renvoyer la réponse).
Asynchronous - Vrai ou Faux?
Pour toute demande de transmission asynchrone, méthode ouverte argument async () doit être définie sur true:
Envoyer une demande asynchrone pour un développeur Web est un grand pas en avant. Sur le serveur pour effectuer la plupart des tâches sont très chronophage.
Grâce envoyé de manière asynchrone, JavaScript n'a pas besoin d'attendre la réponse du serveur, mais peut être remplacé par:
- En attendant la réponse du serveur, d'exécuter des scripts supplémentaires
- Prêt à gérer la réponse lorsque la réponse
Async = true
Lorsque vous utilisez async = true, alors qu'en réponse à un événement de fonction onreadystatechange prédéterminée prêt à être exécuté:
Exemples
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();
Essayez »
Async = false
Pour le troisième paramètre async = false, changer la méthode open () est fausse:
Non recommandé async = false, mais si manipulé plusieurs petites demande ou peut.
Rappelez-vous, JavaScript dans la réponse du serveur ne continue pas jusqu'à ce que vous êtes prêt. Si le serveur est occupé ou lent, l'application sera suspendue ou arrêtée.
Remarque: Lorsque vous utilisez le async = false, ne pas écrire onreadystatechange fonction - juste besoin de placer le code après l'envoi () déclarations:
Exemples
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
Essayez »
Réponse du serveur
Pour obtenir une réponse du serveur, utilisez responseText ou responseXML la propriété de l'objet XMLHttpRequest.
| 属性 | 描述 |
|---|---|
| responseText | 获取响应数据作为字符串 |
| responseXML | 获取响应数据作为 XML 数据 |
propriété responseText
Si la réponse du serveur ne sont pas XML, s'il vous plaît utiliser la propriété responseText.
propriété responseText renvoie la réponse sous forme de chaîne, vous pouvez l'utiliser en conséquence:
propriété responseXML
Si la réponse est non XML à partir du serveur, et que vous voulez le résoudre à un objet XML, utiliser les propriétés responseXML:
Exemples
Demander fichier cd_catalog.xml et analyser la réponse:
var txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "
";
}
document.getElementById("myDiv").innerHTML=txt;
Essayez »
événement onreadystatechange
Lorsque la demande est envoyée au serveur, il faut effectuer une action basée sur la réponse.
événement onreadystatechange est déclenché chaque fois que les changements readyState.
propriété XMLHttpRequest readyState détient le statut.
Trois propriétés importantes de l'objet XMLHttpRequest:
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数的名称）在每次 readyState 属性变化时被自动调用 |
| readyState | 存放了 XMLHttpRequest 的状态。从 0 到 4 变化： 0：请求未初始化 1：服务器建立连接 2：收到的请求 3：处理请求 4：请求完成和响应准备就绪 |
| status | 200："OK" 404：找不到页面 |
Dans le cas onreadystatechange, nous précisons ce qui se passera lorsque le temps est prêt à traiter la réponse du serveur.
Lorsque le readyState est 4 ou 200 état, la réponse préparée:
Exemples
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
Essayez »
Remarque: onreadystatechange événement est déclenché chaque fois que les changements de readyState, a déclenché un total de quatre fois.
D'autres exemples
Par getAllResponseHeaders () pour récupérer des informations d' en- tête
Pour récupérer la ressource (document) des informations d'en-tête.
() Récupère les informations d' en- tête spécifié getResponseHeader
Pour récupérer la ressource (fichier) pour spécifier les informations d'en-tête.
récupération de contenu fichier ASP
Lorsque les utilisateurs tapent des caractères dans le champ de saisie, comment les pages Web communiquent avec le serveur Web.
Récupérer le contenu de la base de données
page Web comment extraire des informations à partir de la base de données via l'objet XMLHttpRequest.
fichier XML de récupération de contenu
Créer un XMLHttpRequest pour récupérer des données à partir du fichier XML et afficher les données dans un tableau HTML.