JavaScript Ajax实现异步通信

<div>通过实现子页面刷新来实现异步刷新</div><iframe src="../testphp/data.php" frameborder="0"></iframe>

<?php  echo 1;?>

<div id="refreshTarget"></div><form action="../php/data.php" method="post" target="targetIframe"><input type="submit" value="提交"></form><iframe name="targetIframe" frameborder="0">iframe</iframe>

<?php  echo 1;?><script type="text/javascript">  parent.document.querySelector('#refreshTarget').innerHTML = '刷新成功';</script>

/** * 使用ajax get方式来验证用户名密码是否正确 * 1.区别于表单，我们需要自己拼接查询字符串，不是表单提交，可 * 以不为表单添加name属性 * 2.将数据放在查询字符串中传到请求的页面，然后页面获得数据进 * 行操作，然后对前端返回响应数据，解析数据，刷新 */var submit = document.querySelector('#submit');submit.onclick = function(){  var nameValue = document.querySelector('#username').value;  var passValue = document.querySelector('#password').value;  var target = document.querySelector('#refreshTarget');  /* 实例化XMLHttpResquest*/  var xhr = new XMLHttpRequest();  /* 监控xhr对象的状态,只要xhr.readyState值改变就会触发事件由alert弹出框的值可以知道    a.以下xhr.readyState值为4的时候表示请求响应结束，数据接收完毕并且可以使用    b.xhr.status值为200表示请求成功  */  xhr.onreadystatechange = function() {    alert(1);    if(xhr.readyState == 4) {      if(xhr.status == 200){        var data = xhr.responseText;        if(data == 1) {          target.innerHTML = '验证成功';        }else if(data == 2) {          target.innerHTML = '验证失败';        }      }    }  }  /* 打开请求*/  var url = '../testphp/inspector.php?username='+nameValue + '&password='+   passValue;  xhr.open('get',url,true); // xhr.readyState = 1;  /* 发送请求*/  xhr.send(null); // xhr.readyState = 2;  alert(2);}

/** * 使用ajax post方式来验证用户名密码是否正确 * 1.区别于表单，我们需要自己拼接查询字符串，不是表单提交，可 * 以不为表单添加name属性 * 2.将数据放在查询字符串中传到请求的页面，然后页面获得数据进 * 行操作，然后对前端返回响应数据，解析数据，刷新 * 3.区别于ajax,get方法就是数据是放在send发送不是添加到查询字符串 */var submit = document.querySelector('#submit');submit.onclick = function(){  var nameValue = document.querySelector('#username').value;  var passValue = document.querySelector('#password').value;  var target = document.querySelector('#refreshTarget');  /* 实例化XMLHttpResquest*/  var xhr = new XMLHttpRequest();  /* 监控xhr对象的状态,只要xhr.readyState值改变就会触发事件由alert弹出框的值可以知道    a.以下xhr.readyState值为4的时候表示请求响应结束，数据接收完毕并且可以使用    b.xhr.status值为200表示请求成功  */  xhr.onreadystatechange = function() {    alert(1);    if(xhr.readyState == 4) {      if(xhr.status == 200){        var data = xhr.responseText;        if(data == 1) {          target.innerHTML = '验证成功';        }else if(data == 2) {          target.innerHTML = '验证失败';        }      }    }  }  /* 打开请求*/  var url = '../testphp/inspector.php?';  xhr.open('post',url,true); // xhr.readyState = 1;  /* 修改请求头模拟from表单的post提交,  a.设置Content-type可以使得在php页面中$_POST[‘key']的方式来获取对应的值，不然的话必  须在$HTTP_RAW_POST_DATA对象中获取  b.设置'Content-type'既是使用类似表单方式提交数据，所以一下必须对send发送的数据序列  化为‘name=name&value=value'的形式*/  xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');  var data = 'username='+nameValue+'&password='+passValue;  /* 发送请求*/  xhr.send(data); // xhr.readyState = 2;}

<?php/* 设置响应数据的内容格式，和字符集*/header('Content-type:text/html;charset=utf-8');/*使用表单的post请求php页面中可以通过$_POST来获取*/$username = $_POST['username'];$password = $_POST['password'];if($username == 'admin' && $password == '123'){  echo 1;}else{  echo 2;}?>