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 相关文章推荐
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
js实现分割上传大文件
Mar 09 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
webpack入门必知必会
Jan 16 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 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
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
更改localhost为其他名字的方法
2014/02/10 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
vue3.0 上手体验
2020/09/21 Javascript
python fabric实现远程部署
2017/01/05 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
Python基础教程之异常详解
2019/01/10 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
python pandas cumsum求累计次数的用法
2019/07/29 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
如何用python批量调整视频声音
2020/12/22 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
python time.strptime格式化实例详解
2021/02/03 Python
技术合作协议书范本
2014/04/18 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
逃课检讨书
2015/01/26 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android