JavaScript Ajax实现异步通信

<div>通过实现子页面刷新来实现异步刷新</div>
<iframe src="/UploadFiles/2021-04-02/data.php">

b.php页面代码：


<"htmlcode">

<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>



b.php页面代码：


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



三、Ajax实现异步刷新
1.使用get方法来发送请求：


/**
 * 使用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"htmlcode">

/**
 * 使用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"htmlcode">

<?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;
}

?>



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

            
           
            上一篇：详解vue.js组件化开发实践

            下一篇：JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)