初识AJAX
概述，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学习笔记” 博客，转载请与作者联系！