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

 更新时间:2016年05月12日 08:49:11   投稿:jingxian  
如何做到异步和局部刷新?下面小编就为大家带来一篇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的原理—如何做到异步和局部刷新【实现代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Ajax技术(WEB无刷新提交数据)-

    Ajax技术(WEB无刷新提交数据)-

    Ajax技术(WEB无刷新提交数据)-...
    2006-07-07
  • 各种AJAX方法的使用比较详解

    各种AJAX方法的使用比较详解

    AJAX技术经过这么多年的发展,出现了一些框架或类库用于简化开发工作,不同的框架类库的使用方法也各不相同。 现在,再回头看看这些技术,看看这些框架类库,我们能感受到技术在不断地发展,AJAX开发越来越容易了。
    2015-09-09
  • 基于Jquery.history解决ajax的前进后退问题

    基于Jquery.history解决ajax的前进后退问题

    本文主要给大家介绍基于Jquery.history解决ajax的前进后退问题,涉及到jquery前进后退相关方面的知识,本文内容经典,非常具有参考价值,特此把jquery前进后退相关知识分享在脚本之家网站供大家参考
    2015-10-10
  • jquery通过AJAX从后台获取信息并显示在表格上的实现类

    jquery通过AJAX从后台获取信息并显示在表格上的实现类

    今天小编抽给时间把jquery通过AJAX从后台获取信息并显示在表格上的实现类,单独写出来,这样程序员,不需要每次写代码了,可以节省大量的时间,感兴趣的朋友一起来看看吧
    2015-09-09
  • AJAX乱码与异步同步以及封装jQuery库实现步骤详解

    AJAX乱码与异步同步以及封装jQuery库实现步骤详解

    这篇文章主要介绍了异步通信技术AJAX乱码问题、异步与同步、手动封装一个jQuery库,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-01-01
  • 强烈推荐-ajax开发者必看的文章

    强烈推荐-ajax开发者必看的文章

    强烈推荐-ajax开发者必看的文章...
    2007-03-03
  • 零基础学习AJAX之AJAX的简介和基础

    零基础学习AJAX之AJAX的简介和基础

    本系列我们将来逐步学习ajax,作为本系列的开篇文章,我们还是俗套些,先来讲解下ajax的简介和基础知识吧。
    2015-01-01
  • Ajax中的循环方案

    Ajax中的循环方案

    在开发中,当一个列表页面加载完成后,我需要根据列表每一项的id去服务器端获取对应的数据然后再把获取的数据赋给当前id对应的标签,怎么实现的呢?下面小编给大家介绍下ajax中的循环方案,感兴趣的朋友一起学习吧
    2016-10-10
  • 让ajax更加友好的实现方法(实时显示后台处理进度。)

    让ajax更加友好的实现方法(实时显示后台处理进度。)

    我们能否让ajax更加友好点,实时显示服务器处理的进度了?这在一些长时间的请求中尤其重要,比如上传文件、发送邮件、批量处理数据。
    2010-06-06
  • $.ajax()方法参数详解

    $.ajax()方法参数详解

    这篇文章主要介绍了$.ajax()方法参数详解的相关资料,需要的朋友可以参考下
    2015-10-10

最新评论