--index.html--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmls="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX PHP: Quickstart</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="quickstart.js"></script>
</head>
<body onload="process()">
Сервер желает узнать ваше имя:
<input type="text" id="myName" onkeyup="process()" onmouseup="process()" />
<div id="divMessage" />
</body>
</html>
--quickstart.js--
// stores the reference to the XMLHttpRequest object
var xmlHttp = createXmlHttpRequestObject();
// retrieves the XMLHttpRequest object
function createXmlHttpRequestObject()
{
// will store the reference to the XMLHttpRequest object
var xmlHttp;
// if running Internet Explorer
if(window.ActiveXObject)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
xmlHttp = false;
}
}
// if running Mozilla or other browsers
else
{
try
{
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
xmlHttp = false;
}
}
// return the created object or display an error message
if (!xmlHttp)
alert("Error creating the XMLHttpRequest object.");
else
return xmlHttp;
}
// make asynchronous HTTP request using the XMLHttpRequest object
function process()
{
// proceed only if the xmlHttp object isn't busy
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
{
// retrieve the name typed by the user on the form
name = encodeURIComponent(document.getElementById("myName").value);
// execute the quickstart.php page from the server
// if(name.length > 0) { Эту проверку делать нельзя, иначе дальнейшие функции слетают, так как xmlHttp.open получается не выполена.
xmlHttp.open("GET", "quickstart.php?name=" + name, true);
// }
// define the method to handle server responses
xmlHttp.onreadystatechange = handleServerResponse;
// make the server request
xmlHttp.send(null);
}
}
// executed automatically when a message is received from the server
function handleServerResponse()
{
// move forward only if the transaction has completed
if (xmlHttp.readyState == 4)
{
// status of 200 indicates the transaction completed successfully
if (xmlHttp.status == 200)
{
// extract the XML retrieved from the server
xmlResponse = xmlHttp.responseXML;
// obtain the document element (the root element) of the XML structure
xmlDocumentElement = xmlResponse.documentElement;
// get the text message, which is in the first child of
// the the document element
helloMessage = xmlDocumentElement.firstChild.data;
// update the client display using the data received from the server
document.getElementById("divMessage").innerHTML =
'<i>' + helloMessage + '</i>';
// restart sequence
}
// a HTTP status different than 200 signals an error
else
{
alert("There was a problem accessing the server: " + xmlHttp.statusText);
}
}
}
--quickstart.php--
<?
// результаты будут отправлять в формате xml
header('Content-Type: text/xml');
// сгенирировать заголовок xml
print "<?xml version='1.0' encoding='UTF-8' standalone='yes'?>";
// создаём элемент <response>
print "<response>";
// получаем имя пользователя
$name = $_GET['name'];
// сгенирировать текст сообщения в зависимости
// от имени пользователя принятого от клиента
$userName = array('Владислав', 'Слава');
if (in_array(strtoupper($name), $userName)) { // Таким образом нельзя сделать регистронезависимое сравнение. При его необходимости можете попробовать сами разобраться.
print "Здравствуйте мастер " . htmlspecialchars($name). "!"; // Нельзя здесь все переводить в сущности функцией htmlentities, слетает XML. Кодировать надо функцией htmlspecialchars.
}
else {
if (trim($name) == '') {
print "Скажи мне, как зовут тебя незнакомец!";
}
else {
print htmlspecialchars($name). ", вы мне не знакомы!";
}
}
// закрыть элемент <response>
print "</response>";
?>
я апач на порт 8080 поставид, так как 80 порт у меня занят процессом tcp.