AJAX ? ??? ?? ?? ??
Ajax? ??? ??? ?? ?? ???:
ajax ?? ?? ??? ??? AJAX? ??? JavaScript ? XML(Asynchronous JavaScript and XML)? ?????.
??? ????? ??? ???? ????? ???? ? ?? ? ??? ?? ?? ? ?????. ???? ?? ??? ??? ?? ??? ????? ????? ???? ajax? ???? ????. ??? ??? ??? ??? ??? ??? ??? ?? ??? ?????.
(1) ??? ??? ???? ?? ?? ????? ?????.
(2). ??? ???? ?????.
1. open() ???? ???:
??? open() ???? ?? ??? ?????. ?? ??? ??? ????.
xmlhttp.open(method,url,async);
? ???? ?? ??? ??? Ajax ???? ????? get? ?????. ?? ?? ?.
open() ????? ? ?? ????? ?? ?? ? ? ????. ??? ????? ??? ?? ?? ??? ???? ? ???? ?? ????.
async=true? ?? ??? ??? ????? ?????. ?? ajax ??? ?? ??? ???? ???? ?????. ??? ??? ? onreadystatechange ???? ?? ??? ?????. :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ipnx.cn/" />
<title>php中文網(wǎng)</title>
<script>
function loadXMLDoc(){
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("show").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/asset/demo.ajax.php?dm=txt&act=getfruits",true);
xmlhttp.send();
}
window.onload=function(){
var obt=document.getElementById("bt");
obt.onclick=function(){
loadXMLDoc();
}
}
</script>
</head>
<body>
<div id="show"><h2>原來的內(nèi)容</h2></div>
<button type="button" id="bt">查看效果</button>
</body>
</html>? ??? ??? ???? ??? onreadystatechange ???? ?? ?????.
async=false? ?? ?? ??? ????? onreadystatechange ???? ??? ??? ????. send() ??? ?? ?? ?? ??? ??? ???.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ipnx.cn/" />
<title>php中文網(wǎng)</title>
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "/asset/demo.ajax.php?dm=txt&act=getfruits", false);
xmlhttp.send();
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("show").innerHTML = xmlhttp.responseText;
}
}
window.onload = function () {
var obt = document.getElementById("bt");
obt.onclick = function () {
loadXMLDoc();
}
}
</script>
</head>
<body>
<div id="show"><h2>原來的內(nèi)容</h2></div>
<button type="button" id="bt">查看效果</button>
</body>
</html>? ??? ???? ????. ??? ??, ajax ??? ??? ?? ?? ?? ?? ??? ??? ? ???? ???? ????.
?? ???? ? ??? ???? ??? ???? ?? ? ??? ? ??? ?? ? ???? ????. ? ?? ??? ???? ???? ????????.
?? ? 1:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>php中文網(wǎng)</title>
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("show").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "demo/ajax/net/Async.aspx", true);
xmlhttp.send();
}
window.onload = function () {
loadXMLDoc();
var odiv = document.getElementById("content");
odiv.innerHTML = "由于是異步操作，所以不會阻塞當(dāng)前內(nèi)容的顯示。";
}
</script>
</head>
<body>
<div id="show"><img src="wait.gif"></div>
<div id="content"></div>
</body>
</html>? ??? ??? ?????. ??? ajax ?? ??? ??????? ??? ? ?? ??? ??? ??? ??? ???? ??? ???? ???? ?? div? ??? ??? ??? ? ??? ?? ajax? ??? ?????.
?? ?? 2:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ipnx.cn/" />
<title>php中文網(wǎng)</title>
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "demo/ajax/net/Async.aspx", false);
xmlhttp.send();
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("show").innerHTML = xmlhttp.responseText;
}
}
window.onload = function () {
loadXMLDoc();
var odiv = document.getElementById("content");
odiv.innerHTML = "由于是同步操作，所以會阻塞當(dāng)前內(nèi)容的顯示。";
}
</script>
</head>
<body>
<div id="show"><img src="wait.gif"></div>
<div id="content"></div>
</body>
</html>? ??? ajax ????? ??? ??? ? ?? ??? ??? ? ????. ?? ??? ???? ?? ??? ??? ???? ??? ? ????.
? ???? ??? ?? ??? ???? ??, ??, ??? ? ????.
