AJAX基础

来源：互联网发布：window10装mac系统编辑：程序博客网时间：2024/06/04 19:14

说明：

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

例子：

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{

//创建XMLHttpRequest对象，XMLHttpRequest对象是AJAX基础
var xmlhttp;
/*为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject */

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
/*当请求被发送到服务器时，我们需要执行一些基于响应的任务。<P>每当 readyState 改变时，就会触发 onreadystatechange 事件。*/
xmlhttp.onreadystatechange=function()
{

/*readyState和status都是XMLHttpRequest的属性，readyState是表示状态信息：0：服务器未初始化；1: 服务器连接已建立；2: 请求已接收；3: 请求处理中；4: 请求已完成，且响应已就绪。status：200：“OK”，404：“未找到页面”*/
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText；

/*以上一句↑↑是JavaScript中的语句，作用是获取当前页面中id标识的对象
如:
<input type="text" value="123" id="username" name="username" />
document.getElementById("userName").value就等于123

<div id="mydiv"><span style="color:#F00;">gfdsgfd</span></div>
document.getElementById("mydiv").innerHTML就是 <span style="color:#F00;">gfdsgfd</span>

其中innerHTML作用是:获取位于对象起始和结束标签内的HTML。

而xmlhttp.responseText则是获取字符串形式的相应数据。

（因为这些代码的功能是改变界面的的字符串，并不是XML响应，如果是XML，则需要用responseXML)

}
}

将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send()

方法：open():

open(method,url,async) 中的属性：method：请求的类型；GET 或 POST。

url：文件在服务器上的位置。

async：true（异步）或 false（同步）

send():将请求发送到服务器。

*/
xmlhttp.open("GET","/ajax/demo_get2.asp?fname=Bill&lname=Gates",true);

xmlhttp.send();
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>

解释详见代码注释。

结果如图：

图1：

图2：单击“请求按钮”之后：

所以：

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。