1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Techniques AJAX - XMLHttpRequest</title>
<script type="text/javascript" src="oXHR.js"></script>
<script type="text/javascript">
<!--
function request(oSelect) {
var value = oSelect.options[oSelect.selectedIndex].value;
var xhr = getXMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
readData(xhr.responseXML);
document.getElementById("loader").style.display = "none";
} else if (xhr.readyState < 4) {
document.getElementById("loader").style.display = "inline";
}
};
xhr.open("POST", "XMLHttpRequest_getListData.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("IdEditor=" + value);
}
function readData(oData) {
var nodes = oData.getElementsByTagName("item");
var oSelect = document.getElementById("softwaresSelect");
var oOption, oInner;
oSelect.innerHTML = "";
for (var i=0, c=nodes.length; i<c; i++) {
oOption = document.createElement("option");
oInner = document.createTextNode(nodes[i].getAttribute("name"));
oOption.value = nodes[i].getAttribute("id");
oOption.appendChild(oInner);
oSelect.appendChild(oOption);
}
}
//-->
</script>
</head>
<body>
<fieldset>
<legend>Programmes</legend>
<div id="programBox">
<p id="editors">
<select id="editorsSelect" onchange="request(this);">
<option value="none">Selection</option>
<?php
mysql_connect($hote, $login, $m_d_p);
mysql_select_db($bdd);
$query = mysql_query("SELECT * FROM ajax_example_editors ORDER BY name");
while ($back = mysql_fetch_assoc($query)) {
echo "\t\t\t\t<option value=\"" . $back["id"] . "\">" . $back["name"] . "</option>\n";
}
?>
</select>
<span id="loader" style="display: none;"><img src="images/loader.gif" alt="loading" /></span>
</p>
<p id="softwares">
<select id="softwaresSelect"></select>
</p>
</div>
</fieldset>
</body>
</html> |
Partager