本质上,这就是AJAX的用途。您的页面加载,并向元素添加一个事件。当用户触发事件时,比如通过单击某物,您的 Javascript 使用XMLHttpRequest 对象向服务器发送请求。
在服务器响应后(大概是输出),另一个 Javascript 函数/事件为您提供了一个处理该输出的地方,包括像任何其他 HTML 一样简单地将其粘贴到页面中。
您可以使用普通的 Javascript 来“手工”完成,也可以使用 jQuery。根据项目的大小和特定情况,使用普通的 Javascript 可能更简单。
纯Javascript
在这个非常基本的例子中,我们myAjax.php
在用户点击链接时发送一个请求。服务器将生成一些内容,在本例中为“hello world!”。我们将放入带有 id 的 HTML 元素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,这是您的整个脚本(页面中包含 jQuery)。为了与 jQuery 的一般风格更加一致,我稍微收紧了代码,但你明白了:
// handles the click event, sends the query
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 就大功告成了。
文档