Ответ 1
Это, по сути, то, что AJAX для. Ваша страница загружается, и вы добавляете событие к элементу. Когда пользователь вызывает запуск события, скажем, щелкнув что-то, ваш Javascript использует объект XMLHttpRequest для отправки запроса на сервер.
После ответа сервера (предположительно на выход) другая функция/событие Javascript дает вам возможность работать с этим выходом, в том числе просто вставлять его на страницу, как и любой другой фрагмент HTML.
Вы можете сделать это "вручную" с помощью простого Javascript, или вы можете использовать jQuery. В зависимости от размера вашего проекта и конкретной ситуации может быть проще просто использовать простой Javascript.
Обычный Javascript
В этом очень базовом примере мы отправляем запрос на myAjax.php
, когда пользователь щелкает ссылку. Сервер будет генерировать некоторый контент, в данном случае "привет мир!". Мы помещаем в HTML-элемент с id output
.
javascript
// handles the click event for link 1, sends the query
function getOutput() {
getRequest(
'myAjax.php', // URL for the PHP file
drawOutput, // handle successful request
drawError // handle error
);
return false;
}
// handles drawing an error message
function drawError() {
var container = document.getElementById('output');
container.innerHTML = 'Bummer: there was an error!';
}
// handles the response, adds the html
function drawOutput(responseText) {
var container = document.getElementById('output');
container.innerHTML = responseText;
}
// helper function for cross-browser request object
function getRequest(url, success, error) {
var req = false;
try{
// most browsers
req = new XMLHttpRequest();
} catch (e){
// IE
try{
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
// try an older version
try{
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
return false;
}
}
}
if (!req) return false;
if (typeof success != 'function') success = function () {};
if (typeof error!= 'function') error = function () {};
req.onreadystatechange = function(){
if(req.readyState == 4) {
return req.status === 200 ?
success(req.responseText) : error(req.status);
}
}
req.open("GET", url, true);
req.send(null);
return req;
}
HTML
<a href="#" onclick="return getOutput();"> test </a>
<div id="output">waiting for action</div>
PHP
// file myAjax.php
<?php
echo 'hello world!';
?>
Попробуйте: http://jsfiddle.net/GRMule/m8CTk/
С библиотекой javascript (jQuery и др.)
Возможно, это много кода Javascript. Вы можете сократить это, ужесточив блоки или используя более точные логические операторы, конечно, но там все еще много. Если вы планируете делать много таких вещей в своем проекте, вам может быть лучше с библиотекой javascript.
Используя тот же HTML и PHP сверху, это весь ваш script (с jQuery, включенным на странице). Я немного затянул код, чтобы быть более совместимым с общим стилем jQuery, но вы поняли:
// handles the click event, sends the query
var function getOutput() {
$.ajax({
url:'myAjax.php',
complete: function (response) {
$('#output').html(response.responseText);
},
error: function () {
$('#output').html('Bummer: there was an error!');
}
});
return false;
}
Попробуйте: http://jsfiddle.net/GRMule/WQXXT/
Не спешите с jQuery: добавление какой-либо библиотеки по-прежнему добавляет сотни или тысячи строк кода в ваш проект так же точно, как если бы вы их написали. Внутри библиотеки библиотеки jQuery вы найдете аналогичный код в первом примере плюс много больше. Это может быть хорошо, может и не так. Планируйте и учитывайте текущий размер вашего проекта и будущую возможность расширения, а также целевую среду или платформу.
Если это все, что вам нужно сделать, напишите простой javascript один раз, и все будет готово.
Documentation
- AJAX на MDN - https://developer.mozilla.org/en/ajax
-
XMLHttpRequest
на MDN - https://developer.mozilla.org/en/XMLHttpRequest -
XMLHttpRequest
на MSDN - http://msdn.microsoft.com/en-us/library/ie/ms535874%28v=vs.85%29.aspx - jQuery - http://jquery.com/download/
-
jQuery.ajax
- http://api.jquery.com/jQuery.ajax/