JavaScript Ajax实现异步通信

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

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

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

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

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

a.主页面代码：

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

b.php页面代码：

<?php
  echo 1;
?>

B.通过在刷新子页面的同时在子页面做一些操作来访问父页面元素并且修改该元素的内容

a.主页面代码：

<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页面代码：

<?php
  echo 1;
?>
<script type="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?username='+nameValue + '&password='+ 
  passValue;

  xhr.open('get',url,true); // xhr.readyState = 1;

  /* 发送请求*/
  xhr.send(null); // xhr.readyState = 2;
  alert(2);
}

2.使用post方法来发送请求：

/**
 * 使用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页面代码

<?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  # 异步通信  # jquery实现异步文件上传ajaxfileupload.js  # AjaxFileUpload.js实现异步上传文件功能  # 如何快速解决JS或Jquery ajax异步跨域的问题  # JS 实现 ajax 异步浏览器兼容问题  # 原生javascript实现的ajax异步封装功能示例  # JavaScript的异步ajax详解  # 表单  # 放在  # 值为  # 来实现  # 就会  # 弹出  # 可以使用  # 不为  # 方法来  # 是否正确  # 可以通过  # 连接到  # 大家多多  # 象中  # 来访问  # text  # refreshTarget  # id  # parent  # input 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： php打包exe后无法访问网络共享_共享权限设置方法【教程】  大型企业网站制作流程,做网站需要注册公司吗？  再谈Python中的字符串与字符编码（推荐）  Java类加载基本过程详细介绍  ai格式如何转html_将AI设计稿转换为HTML页面流程【页面】  Windows10怎样连接蓝牙设备_Windows10蓝牙连接步骤【教程】  公司网站制作需要多少钱,找人做公司网站需要多少钱？  Win11怎么查看显卡温度 Win11任务管理器查看GPU温度【技巧】  家族网站制作贴纸教程视频,用豆子做粘帖画怎么制作？  厦门模型网站设计制作公司,厦门航空飞机模型掉色怎么办？  高端云建站费用究竟需要多少预算？  Laravel如何实现一对一模型关联？（Eloquent示例）  Laravel怎么生成URL_Laravel路由命名与URL生成函数详解  浅述节点的创建及常见功能的实现  Laravel如何设置自定义的日志文件名_Laravel根据日期或用户ID生成动态日志【技巧】  原生JS获取元素集合的子元素宽度实例  百度浏览器网页无法复制文字怎么办 百度浏览器复制修复  如何在 React 中条件性地遍历数组并渲染元素  如何在万网自助建站平台快速创建网站？  Laravel如何使用Spatie Media Library_Laravel图片上传管理与缩略图生成【步骤】  laravel怎么配置Redis作为缓存驱动_laravel Redis缓存配置教程  高防服务器租用指南：配置选择与快速部署攻略  车管所网站制作流程,交警当场开简易程序处罚决定书，在交警网站查询不到怎么办？  Laravel请求验证怎么写_Laravel Validator自定义表单验证规则教程  装修招标网站设计制作流程,装修招标流程？  动图在线制作网站有哪些,滑动动图图集怎么做？  黑客入侵网站服务器的常见手法有哪些？  如何制作一个表白网站视频,关于勇敢表白的小标题？  Laravel如何记录自定义日志？（Log频道配置）  Swift中swift中的switch 语句  Laravel如何实现用户角色和权限系统_Laravel角色权限管理机制  如何获取上海专业网站定制建站电话？  Claude怎样写约束型提示词_Claude约束提示词写法【教程】  如何用已有域名快速搭建网站？  JS弹性运动实现方法分析  宙斯浏览器怎么屏蔽图片浏览 节省手机流量使用设置方法  高防服务器租用如何选择配置与防御等级？  Laravel如何使用集合（Collections）进行数据处理_Laravel Collection常用方法与技巧  Laravel如何构建RESTful API_Laravel标准化API接口开发指南  如何在万网主机上快速搭建网站？  Android Socket接口实现即时通讯实例代码  Python文件操作最佳实践_稳定性说明【指导】  如何在阿里云部署织梦网站？  韩国网站服务器搭建指南：VPS选购、域名解析与DNS配置推荐  韩国服务器如何优化跨境访问实现高效连接？  使用Dockerfile构建java web环境  如何快速重置建站主机并恢复默认配置？  Laravel怎么实现软删除SoftDeletes_Laravel模型回收站功能与数据恢复【步骤】  Laravel怎么配置自定义表前缀_Laravel数据库迁移与Eloquent表名映射【步骤】  Laravel如何使用Passport实现OAuth2？（完整配置步骤）