实现异步通信:
1、定义
AJAX的核心对象XMLHttpRequest
XMLHttpRequest:是XMLHTTP组件的对象,通过该对象AJAX可以应用
程序一样同服务器进行数据层面的交互,不需要每次都进行整个页面的刷新
2、步骤
1)初始化对象并发送XMLHttpRequest请求
针对IE7.0、8.0、firefox、mozillar、opera、safari浏览器
var xmlht=new XMLHttpRequest
针对IE5.0、5.5、6.0
var xmlhr=new ActiveXObject()
2)指定相应处理函数
onreadystatechange
3)发出HTTP请求
Open()
Send()
status:由服务器返回的 HTTP 状态代码,如 200 表示成功,而 404 表示 "Not Found"
4)处理服务器返回的数据
responseXML
responseText
例如:
index.html
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>使用ajax异步交互</title>
<script type="text/javascript" src="yanzheng.js">
</script>
</head>
<body>
检验用户名称是否存在<br>
用户名:<input type="text" id="username" value="1" />
<input type="button" οnclick="yanzheng()" value="提交" />
<div id="result">
</div>
<p>欢迎光临!</p>
</body>
</html>
yanzheng.js:
function yanzheng(){
var xmlhttp;
var username=document.getElementById("username").value;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=callback;
function callback(){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
var responseText=xmlhttp.responseText;
var divnode=document.getElementById("result");
divnode.innerHTML=responseText;
}
}
}
xmlhttp.open('GET','demo.php?name='+username,true);
xmlhttp.send(null);
}
demo.php
<?php
$get=$_GET[‘name’];
if($get==”gaozhisheng”)
echo ”成功”;
else
echo $get.”不存在”;
?>