JavaScript Ajax实现异步通信

一、浏览器与服务器的同步和异步通信

1.同步:是阻塞的,浏览器在向服务器发送请求之后一直等待服务器的响应,而没有做其他事情。
2.异步:非阻塞的,浏览器向服务器发送请求之后,继续执行其他代码,知道服务器响应,浏览器中断当前的任务,处理服务器响应。

二、没有Ajax之前浏览器是通过iframe来实现异步刷新

1.iframe标签:iframe标签通过src连接到一个页面,其实就是将需要实现异步刷新的内容使用
iframe标签包裹,

A.对iframe实现整个页面刷新,其实是通过刷新一个页面的子页面来实现异步刷新;

a.主页面代码:

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

?>

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

标签:
js,ajax,异步通信

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“JavaScript Ajax实现异步通信”

暂无“JavaScript Ajax实现异步通信”评论...