概述,AJAX使用 HTML javascript™ DHTML 和DOM組件組成,實現的效果是使呆板的web表現形式,變成交互性更強的 AJAX形式
重點,掌握核心 創建組件等
一,核心 創建組件
xmlHttp = new XMLHttpRequest(); 很遺憾,這種方法微軟的IE是不支持的
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP'); 微軟隻能使用這種方法
所以一般情況下,我們要做一個判斷
var xmlHttp; function A_xmlHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject('Microsoft.HTTP'); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest; } } 二,用方法聲明,打開請求,獲取執行結果
1.方法聲明
xmlHttp.open('傳遞方式','地址',是否允許異步傳輸)
xmlHttp.open("GET","for.php?id="+url,true);
2.打開請求狀態
xmlHttp.onreadystatechange = 方法名稱
xmlHttp.onreadystatechange = byphp;
3.獲取執行結果
var 結果名 = xmlHttp.responseText
var byphp100 = xmlHttp.responseText;
實例1,制作初級AJAX程序
xunhuan.php
<? $id=$_GET[id]; if ($id) { for ($i=0;$i<10;$i++) { echo $id; } } ?> ajax.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ajax入門實例</title> <script language="javascript" src="ajax1.js" type="text/javascript"></script> </head> <body> <table width="600" border="0" align="center"> <tr align="center"> <td width="25%"><a href="#" onclick="funphp100('o')">o</a></td> <td width="25%"><a href="xunhuan.php?id=x">x</a></td> <td width="25%"><a href="xunhuan.php?id=t">t</a></td> <td width="25%"><a href="xunhuan.php?id=v">v</a></td> </tr> <tr> <td colspan="4" id="php100" align="center"> </td> </tr> </table> </body> </html> ajax1.js
var xmlHttp; function A_xmlHttpRequest() { if(window.ActiveXObject) { xmlHttp = new ActiveXObject('Microsoft.XMLHTTP'); } if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function funphp100(url) { A_xmlHttpRequest(); xmlHttp.open('GET','xunhuan.php?id='+url,true); xmlHttp.onreadystatechange = byphp; xmlHttp.send(null); } function byphp () { var byphp100 = xmlHttp.responseText; document.getElementById('php100').innerHTML = byphp100; }
作者“PHP學習筆記”