这实际上是
AJAX是什么。您的网页加载,并向元素添加事件。当用户导致事件被触发时,例如通过单击某事,您的Javascript使用
XMLHttpRequest object向服务器发送请求。
在服务器响应(假设输出)后,另一个Javascript函数/事件给你一个地方处理该输出,包括像任何其他HTML一样粘贴到页面。
你可以用普通的Javascript来“手工”,或者你可以使用jQuery。根据您的项目的大小和特定的情况,它可能更简单,只使用纯JavaScript。
普通Javascript
在这个非常基本的示例中,当用户单击链接时,我们向myAjax.php发送请求。服务器将生成一些内容,在这种情况下是“hello world!”。我们将放入具有id输出的HTML元素。
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
PHP
// file myAjax.php
echo 'hello world!';
?>
使用javascript库(jQuery等)
可以说,这是很多Javascript代码。你可以通过拧紧块或使用更简洁的逻辑运算符来缩短它,当然,但仍然有很多。如果你打算在你的项目上做很多这种类型的事情,你可能会更好一个javascript库。
从上面使用相同的HTML和PHP,这是你的整个脚本(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;
}
不要急于jQuery:添加任何库仍然添加成百上千行代码到你的项目,就像你写的一样。在jQuery库文件中,你会发现类似的代码,在第一个例子,加上更多。这可能是一件好事,可能不是。计划,并考虑您的项目的当前大小和未来的扩展和目标环境或平台的可能性。
如果这是所有你需要做的,写一个简单的javascript一次,你做完了。
文档