Начать использовать jQuery очень просто, а вместе с ним и AJAX, который также становится очень простым в этой связке. Смотрите пример ниже. Для простоты библиотека jQuery берется с сайта googleapis.com, но вы можете разместить ее и локально. Обратите внимание, что все файлы должны быть в кодировке UTF-8.
Итак, листинг ajax.html (это файл, который необходимо вызвать в браузере):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="content"></div>
<input id="show_btn" type="button" value="Показать"/>
<input id="close_btn" type="button" value="Закрыть"/>
<input id="pos_id" type="hidden" value="5"/>
<script src="ajax.js" type="text/javascript"></script>
</body>
</html>
Далее листинг ajax.js:
$(document).ready(function(){
$('#show_btn').click(function(){
$.ajax({
url: 'ajax_servlet.php',
data: 'id='+$('#pos_id').val(),
cache: false,
success: function(html){
$('#content').html(html);
}
});
});
$('#close_btn').click(function(){
$('#content').html('');
});
});
Ну и наконец файл, отвечающий на AJAX-запрос на стороне сервера, ajax_servlet.php:
<?php
echo
"Привет мир!<br/>".
"Скрытый параметр id=".$_GET['id']
;
?>