JavaScript Ajax实现异步通信


Posted in Javascript onDecember 14, 2016

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

?>

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

Javascript 相关文章推荐
在JavaScript中使用NaN值的方法
Jun 05 Javascript
原生js模拟淘宝购物车项目实战
Nov 18 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
Sep 15 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
Vue路由前后端设计总结
Aug 06 Javascript
让JavaScript代码更加精简的方法技巧
Jun 01 Javascript
微信小程序 配置文件详细介绍
Dec 14 #Javascript
微信小程序 闭包写法详细介绍
Dec 14 #Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 #Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 #Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 #Javascript
实例解析Array和String方法
Dec 14 #Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 #Javascript
You might like
解析PHP对现有搜索引擎的调用
2013/06/25 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
CI框架中数据库操作函数$this-&gt;db-&gt;where()相关用法总结
2016/05/17 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
JS 分号引起的一段调试问题
2009/06/18 Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
使用PYTHON创建XML文档
2012/03/01 Python
python处理文本文件并生成指定格式的文件
2014/07/31 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
pytorch之添加BN的实现
2020/01/06 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
如何用python批量调整视频声音
2020/12/22 Python
文化宣传方案
2014/03/13 职场文书
岗位说明书范文
2014/05/07 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android