XMLHttpRequest

Comment charger une portion de page sans chargée la fenêtre courante ?

La réponse est l'utilisation du class XMLHttpRequest d'AJAX.

Je vous propose une exemple concrée de l'utilisatin de XMLHttpRequest.

Résumé :

On va charger tous les personnes qui habite dans la ville séléctionnée et afficher les résultats dans la balise

sans charger la page.

Création du base de donnée PERS et du table PERSONNE(id,nom,ville)
Création du fichier script.js
Création du fichier de traitement traitement.php
Création du page index.html

1 - Création du base de donnée PERS :

Executer ce requête SQL dans votre PHPMyAdmin préférée.

CREATE DATABASE `PERS` ;
CREATE TABLE `PERSONNE` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
 `nom` VARCHAR( 100 ) NOT NULL ,
 `ville` VARCHAR( 100 ) NOT NULL
) ENGINE = MyISAM;

Puis, essayer d'ajouter quelques données d'exemple dans la table PERSONNE

2 - Création du fichier javascript nommée script.js :

// JavaScript Document
function createXhrObject(){
     if (window.XMLHttpRequest)
         return new XMLHttpRequest();
  
     if (window.ActiveXObject){
         var names = [
             "Msxml2.XMLHTTP.6.0",
             "Msxml2.XMLHTTP.3.0",
             "Msxml2.XMLHTTP",
             "Microsoft.XMLHTTP"
         ];
         for(var i in names){
             try{ return new ActiveXObject(names[i]); } catch(e){}
         }
     }
     window.alert("Votre navigateur ne prend pas en charge l'objet XMLHTTPRequest.");
     return null;
 }
 
function sendData(param, traitement, idObjet){
    if(document.all){
        //Internet Explorer
        var XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ;
    }else{
        //Mozilla
        var XhrObj = new XMLHttpRequest();
    }
    
    //définition de l'endroit d'affichage:
    var content = document.getElem8entById(idObjet);

    XhrObj.open("POST", traitement);
    
    //Ok pour la page cible
    XhrObj.onreadystatechange = function(){
        if (XhrObj.readyState == 4 && XhrObj.status == 200)
            content.innerHTML = XhrObj.responseText ;
    }
    
    XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    XhrObj.send(param);
}//fin fonction SendData

3 - Création du fichier nommée traitement.php :

<?php
$connexion = mysql_connect("Hôte", "Utilisateur", "Mot de passe");
mysql_select_db("PERS", $connexion);
$query = "SELECT nom FROM PERSONNE WHERE ville=".$_POST['ville'];
$rows = mysql_query( $query );
foreach($rows as $value):
      echo $value->nom." 
";
endforeach;
mysql_free_result($query);
mysql_close($connexion);
?>

4 - Création du page HTML nommée index.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Exemple d'utilisation de XMLHttpRequest</title>
<script src="/script.js" langage="javascript" type="text/javascript" ></script>
</head>

<body>
<p>
<Entrer votre ville : <input type="text" id="ville" value="" />
<br>
<input type="button" value="Charger" onClick="sendData('id='+document.getElementById('ville').value,'tratement.php','content')"/>
</p>
<hr />
<div id="content"></div>
</body>
</html>

Commentaires (14)

<< Begin < Préc 1 2 Suivant > Fin >>

|2010-02-24 14:03:35 NFL jerseys - NFL jerseys

nfl jerseys wholesale Customers can purchase our company's product nhl jerseys in retail or wholesale way in the store.nhl jerseys for sale Any quality of merchandizes can be free refund.nfl youth jerseys At the same time, we will keep on working hard for nfl jerseys cheap everyone to provide a better shopping experience on mlb jerseys cheap store.We hope you find our satisfaction guarantee to be the foundation of a long standing relationship with us wholesale nfl jerseys.
- 0
- 0
Répondre | Citer

|2010-02-10 14:59:05 Air Max Shoes and Cheap jeans - Air Max Shoes and Cheap jeans

We offer Air Max Shoes and nike air jordan shoes at the lowest price, ... Nike Air Max 360 Shoes the white is very good. Air Max Shoes Discount,Air Jordan Shoes Cheap,Nike Air Max 2 Shoes,Nike Dunk,Nike Shox,Nike Air Max 89 Shoes. We accpet Paypal!Free Shipping! wholesale brand sport shoes and Nike Air Max 2003 Shoes etc.and clothes hoodies,jackets,jeans,t-shirt, all ages clothings.cheap and top quality. We sell different kind of Nike Air Max 2009 Shoes for men,women. nike air max. Offering Nike Air Max 1 Shoes,women air max 360,women air max 2006,and so on.Get your favorite pair of women air max sheos.

Find perfect fitting Cheap jeans, bras and plus size clothing at Christian Audigier Jeans. You also get free personalized clothes fit and style recommendations. buy cheap ed hardy men/women clothing/clothes,keychains,bags,purses,Red Monkey Jeans ,hats,hoodies,jackets,long sleeve,slippers,tees,watches,scarves COOGI Jeans. We hope to get a long, Steady Business with all Sorts of buy...
- 0
- 0
Répondre | Citer

|2010-02-03 10:30:21 replica watches

Panerai Ferrari Rattapante Automatic with Red Dial
Panerai Ferrari Rattapante Chronograph Automatic with White Dial
Panerai Ferrari Rattapante Chronograph Automatic with Yellow Dial
Panerai Ferrari Rattapante Chronograph Automatic with Yellow Dial
Panerai Ferrari Rattapante Automatic with White Dial
Panerai Ferrari Rattapante Chronograph Automatic with White Dial
Panerai Ferrari Rattapante Chronograph Automatic with Yellow Dial
Panerai Ferrari Rattapante Chronograph Automatic with Red Dial and ...
Panerai Ferrari Rattapante Chronograph Automatic with Black Dial an...
Panerai Ferrari Rattapante Automatic with Black Dial and Strap
Panerai Ferrari Rattapante Chronograph Automatic with White Dial
Panerai Ferrari Rattapante Chronograph Automatic with White Dial
Panerai Radiomir Black Seal With Unitas 6497 Swan Neck Movement-Aut...
Panerai PAM088 Luminor GMT With Asia Valjoux 7750 Movement Black Di...
- 0
- 0
Répondre | Citer

|2010-01-30 02:47:26 replica handbags - http://www.dropshippingwatch.com

In China, there are many coach handbags shops, they can sell every kinds of replica coach handbags, even the different color of handbags, if you like, you can make an order, they will send out the fake coach handbags in three days.

I offen go shopping, but i need new BURBERRY handbags, because last week my replica BURBERRY handbags were broken, which is buying from a fake BURBERRY handbags shop, but now i hate these so bad replica handbags, even it is so cheaper.
- 0
- 0
Répondre | Citer

|2010-01-28 14:00:03 cheapuggs

UGG Boots has a strong comfort, but also very fashionable, which is the leading fashion and trend of UGG Cardy Boots . The new products of Discount UGG Classic Short models provide with 10 different colors for your choice to meet a variety of customer preferences. The UGG Bailey Button of the other features are: a flexible lightweight, wear-resistant anti-slip, comfortable and warm.Cheap UGG Classic Tall sale low price but good quality, are exported to the UK and other parts of the world. http://www.uggsbootssaleonline.com/
- 0
- 0
Répondre | Citer

|2010-01-20 14:50:48 Nike Air Max zll - Nike Air Max zll

Our Nike Air Max 90 Shoes, Nike Air Max 360 Shoes, Nike Air Max 2009 Shoes etc. are popular all over the world with high quality. Nike shoes never make its fans dispointed about Nike Air Max shoes.
Likeairmax Online Store, there are all the newest as well as the best Nike Air Max shoes like Nike Air Light Shoes, Nike Air Max 2 Shoes, so it is Nike Air Max III Shoes will be a center piece of the Air Max shoes collection this year. Just add to your shipping cart, then it will with your.
Are you looking for latest Air Max - Nike Air Yeezy Shoes and Nike Football Shoes, online store like Air Max be your good choice.
Along with the arrival of the Nike Air Max TN Shoes Snakeskin it looks as tho another model will be getting a scaled upper.
Authentic Nike Air Max 1 Shoes, Nike Air Max 2003 Shoes, Nike Air Max 89 Shoes Plus Nike Air Max Ltd Shoes limited edition. We only sell authentic Nike Max shoes.Get discounted Nike Air Max 97 Shoes. Your source for Nike shoes and sneakers, Buy disc...
- 0
- 0
Répondre | Citer

|2010-01-20 14:48:56 Christian Louboutin zll - Christian Louboutin zll

The Legends Of Valentines Day
Christian Louboutin Shoes is Valentines Day. Tiffany Jewellery is celebrated as a lovers holiday today, with the giving of candy,flowers,or other Cheap Handbags gifts between couples in love.Valentines Day has Tiffany on sale in several different legends that have found their way to us through the ages.
In Tiffany Bangles its said that it originated in 5th Century Paul Smith as a tribute to St.Valentine,a Catholic bishop.
For eight hundred years prior to the establishment of Valentines Day,the Romans had practiced a pagan celebration in mid-February commemorating young mens rite of passage to the god Lupercus.The celebration featured a lottery in which young men would draw the names of teenage girls from a box.The girl assigned to each young man in that manner would be his female companion during the remaining Uggs year.
Fashion Handbags an effort to do away with the pagan festival. Tiffany Accessories Gelasius ordered a slight change in the lot...
- 0
- 0
Répondre | Citer

|2010-01-09 08:05:22 Ugg Boots

To do whatever needs cardy ugg boots to be done to preserve this last and greatest uggs classic tallbastion of freedom .In delay there lies no plenty , Then come kiss me , sweet and twenty , Youth a stuff that ugg classic short sale will not endure . He raised his mournful eyes towards the deep blue sky.Never leave that bailey button boot until tomorrow , which you can do today . It was New Year's Night. An aged man was standing at a window. The time of life is short ; to spend that Ugg Classic Crochet shortness basely, it would be too long . We always have time enough , if we will but use it aright. where the stars were floating like white lilies on the surface of a clear calm lake.
- 0
- 0
Répondre | Citer

|2009-12-29 16:11:29 Cardy Ugg Boots - http://www.sharingugg.com/

091229C1LAH
Great boots really comfortable and llok great.ugg classic tallThey do not get too hot and they are comfortable enough to walk long distances in.ugg classic shortThey do come up big but since that is explanied on the website this is not an issue.ugg classic cardyall in all great boots that I would recommend to anyone."
- 0
- 0
Répondre | Citer

|2009-12-29 15:27:19 cheap ugg boots

091229C1PWF
[Since they are limited,ugg classic cardytake action to get it.free shipping cost worldwide,no sale tax,7 days delivery time to your address.ugg boots australia,nice hereugg boots,get itugg australia
- 0
- 0
Répondre | Citer