function ajax(method,url,data,fnsuccess){
//1号线:创建ajax对象
var xhr;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}
else{
xhr=new ActiveXObject('Microsoft.XMLHTTP');
}
//2号线:发送HTTP请求(准备数据。真正的发送)
if(method=='GET' && data){
//如果是get方式,并且有data:传数据到服务器
url=url+'?'+data;
}
xhr.open(method,url,true);
if(method=='GET'){
xhr.send(null);
}
else{
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(data);
}
//4号线:拿到的数据返回给调用ajax函数的地方
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
if(fnsuccess){
fnsuccess(xhr.responseText);//注意这里只能接收字符串,json和html数据。如果传过来的是xml数据格式,要换成responseXML属性
}
}
else{
alert('出错了,出错状态是:'+xhr.status);
}
}
}
}
ajax(异步javascript xml)功能: 能够刷新局部网页数据而不是重新加载整个网页。
ajax运作的四个步骤:
第一步,创建xmlhttprequest对象,var xmlhttp =new XMLHttpRequest();XMLHttpRequest对象用来和服务器交换数据。
var xhr;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}
else{
xhr=new ActiveXObject('Microsoft.XMLHTTP');
}
if(method=='GET' && data){
//如果是get方式,并且有data:传数据到服务器
url=url+'?'+data;
}
xhr.open(method,url,true);
if(method=='GET'){
xhr.send(null);
}
else{
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(data);
}
第四步,onreadystatechange函数,当发送请求到服务器,我们想要服务器响应执行一些功能就需要使用onreadystatechange函数,每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
if(fnsuccess){
fnsuccess(xhr.responseText);//注意这里只能接收字符串,json和html数据。如果传过来的是xml数据格式,要换成responseXML属性
}
}
else{
alert('出错了,出错状态是:'+xhr.status);
}
}
}
封装ajax函数,需要考虑变动的地方有:传输方式(method)、路径(url)、传输数据(data)、回调函数(fnsuccess)等。
下面以一个表单验证为例说明:
html部分
<html>
<head>
<title>异步表单验证</title>
<script type='text/javascript' src='jquery.js' ></script>
<script>
function checkname(){
//$("input[name='name']").val()
$.ajax({
type:"get",
url:'index.php',
data:"name="+$("input[name='name']").val(),
success:function(msg){
$("#show").append(msg);
}
});
}
</script>
</head>
<body>
<form name='form'>
<input name='name' type='text' οnblur='checkname();'>
<span id='show'></span><br />
<input type='submit' name='submit' value='提交' />
</form>
</body>
</html>
php部分
<?php
header("Content-Type: text/html;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control: no-cache");
$username=$_GET['name'];
//php的方法:用日记文件来检测ajax是否成功传数据到该页面
file_put_contents("d:/mylog.log", $username."\r\n",FILE_APPEND);
if($username=='admin'){
echo '该用户名不合法';
}
else if($username=='malin'){
echo '该用户名已经被注册啦';
}
else{
echo '该用户名可以被注册';
}
?>
运行结果示例: