AJAX的原理—如何做到异步和局部刷新【实现代码】


Overriew: onReadyStateChange被回调函数赋值,则能实现异步调用,回调函数直接操作DOM,则能实现局部刷新。那么XMLHttpRequest的onReadyStateChange如何知道服务ready了呢?状态如何change了呢(观察者模式)?则是通过客户端对服务的状态询问(定期轮询)所实现的。

详解:

1.  XMLHttpRequest 负责与服务器端的通讯,其内部有很多重要的属性:readyStatus=4,status=200等等。当XMLHttpRequest的整体状态并且保证它已经完成(readyStatus=4),即数据已经发送完毕。然后根据服务器的设定询问(类似于客户端会轮询服务器的返回状态,仍然是http短连接,并非长连接的服务器端push)请求状态,如果一切已经就绪(status=200),那么就执行需要的操作。

操作一般就是直接操作DOM,所以AJAX能做到所谓的“无刷新”用户体验。

document.getElementById("user1").innerHTML = "数据正在加载...";
      if (xmlhttp.status == 200) {
        document.write(xmlhttp.responseText);
      }

2.  那么在AJAX客户端如何做到的异步呢?实际上就是Javascript的回调函数起的作用

提供一个回调JavaScript函数,一旦服务器响应可用,该函数就被执行

业务函数:

function castVote(rank) {
 var url = "/ajax-demo/static-article-ranking.html";
 var callback = processAjaxResponse;
 executeXhr(callback, url);
}
需要异步通讯的函数: 


function executeXhr(callback, url) {
 // branch for native XMLHttpRequest object
 if (window.XMLHttpRequest) {
  req = new XMLHttpRequest();
  req.onreadystatechange = callback;
  req.open("GET", url, true);
  req.send()(null);
 } // branch for IE/Windows ActiveX version
 else if (window.ActiveXObject) {
  req = new ActiveXObject("Microsoft.XMLHTTP");
  if (req) {
   req.onreadystatechange = callback;
   req.open("GET", url, true);
   req.send()();
  }
 }
}
req.onreadystatechange = callback
req.open("GET", url, true)

第一行定义了JavaScript回调函数,一旦响应就绪它就自动执行,而req.open()方法中所指定的“true”标志说明想要异步执行该请求。

一旦服务器处理完XmlHttpRequest并返回给浏览器,使用req.onreadystatechange指派所设置的回调方法将被自动调用。

回调函数:

function processAjaxResponse() {
 if (req.readyState == 4) {
  // only if "OK"
  if (req.status == 200) {
   document.getElementById("user1").innerHTML = req.responseText;
  } else {
   alert("There was a problem retrieving the XML data:
" + req.statusText);
  }
 }
}

以上这篇AJAX的原理—如何做到异步和局部刷新【实现代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持phpstudy。



相关阅读:
php图片处理函数获取类型及扩展名实例
win10新版本10540又更新了 Edge浏览器的用户代理字符串升级
Android中使用achartengine生成图表的具体方法
101个MySQL的配置和优化的提示
MAC用户如何通过MAC管理自己的通讯录
在JavaScript的jQuery库中操作AJAX的方法讲解
JavaScript利用正则表达式去除日期中的“-”
php启动时候提示PHP startup的解决方法
Mac下去除一分钟以上的优酷广告的方法
JavaScript正则表达式验证中文实例讲解
为指定的元素添加遮罩层的示例代码
PHP使用NuSOAP调用Web服务的方法
JavaScript中的call方法和apply方法使用对比
使用SQL Server 获取插入记录后的ID(自动编号)
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 2015年某市妇幼保健工作计划 加油站经理竞聘报告 转角作文450字 我是荷花450字 一分耕耘一分收获作文400字 补牙三部曲 散文:明天会更好 2014年度学校团委、少先队工作计划-少先队工作计划_少先队工作计划 青秀山之旅】 【精品】采购员工作总结 标准委托代理合同书 世界上最真挚的爱作文900字 2015大班健康计划 你是我的书作文600字 2016年银行柜员年终工作总结 小学六年级作文350字:云朵 迂腐的父亲 我的大学,我的梦征文4篇 春游泉城公园作文400字 滴水之恩 年终总结开头怎么写 一支笔一砚墨!便是最惬意的休闲! 水的浮力作文 “全市优质课评选活动”反思 初心作文600字 计划生育办公室秘书的竞职演讲 关于平安夜的日记 入党积极分子思想汇报范文精选 建党90周年思想汇报 漂流瓶(一)作文800字 小学六年级作文550字:豆子的变化 悲伤--成长的方式 微冷作文400字 爱的风华 高中高一作文1000字:青春,曾是个瞬间 谐音歇后语及答案 挑战者 黎明的反义词是什么 标准答案 珍藏回忆作文550字 我是一个热爱夏天的少女作文200字 高一语文学习方法:四个经验一个总结 亲爱的你还好吗? 早安心语:不与消极为伍,要与奋进为生 无人岛探险记读后感300字 大连的海作文400字 中秋的烤肉 放大镜中的优点 乡下的天空 小学一年级作文450字:跑步去作文 小学六年级作文500字:秋,来了、、、、、、

Copyright © 2016 phpStudy |