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的原理—如何做到异步和局部刷新【实现代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 谈谈Ajax原理实现过程

    谈谈Ajax原理实现过程

    1.什么是AJAX? AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.它使用: 使用XHTML+CSS来标准化呈现: 使用XML和XSLT进行数据交换及相关操作: 使用XMLHttpRequest对象与Web服务器进行异步数据通信: 使用Javascript操作Document Object Model进行动态显示及交互: 使用JavaScript绑定和处理所有数据. 2.AJ

  • Ajax工作原理深入理解

    1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax的流行.而这也让微软感到无比的尴尬,因为早在97年,微软便已经发明了ajax中的关键技术,并且在99年IE5推出之时,它便开始支持XmlHttpRequest对象,并且微软之前已经开始在它的一些产品中应用ajax,比如说MSDN网站菜单中的一些应用.遗憾的是,不知道出于什么想法,当时微软发明了aja

  • JQuery的Ajax跨域请求原理概述及实例

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式. 什么是jsonp格式呢?API原文:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.

  • 图文解析AJAX的原理

    图文解析AJAX的原理

    先上原理图: 背景: 1.传统的Web网站,提交表单,需要重新加载整个页面. 2.如果服务器长时间未能返回Response,则客户端将会无响应,用户体验很差. 3.服务端返回Response后,浏览器需要加载整个页面,对浏览器的负担也是很大的. 4.浏览器提交表单后,发送的数据量大,造成网络的性能问题. 问题: 1.如何改进? 2.AJAX是什么? 3.有什么优势? 4.有什么缺点? 一.什么是 AJAX 1.为什么需要AJAX 当需要从服务器获取数据,并刷新页面的操作,如果不采用AJAX,则需

  • 关于Ajax技术原理的3点总结

    ajax:Asynchronous Javascript and XML   异步Javascript 和XML. 是一种创建交互式网页应用的网页开发技术. 1.0 优势:         1.1 通过异步模式,提升了用户体验.         1.2 优化了浏览器与服务器之间的传输,减少了不必要的数据往返,减少了带宽占用.         1.3 Ajax引擎在客户端运行,承担了一部分本来由服务器承担的共组,从而减少了大用户量下的服务器负载. 2.0 工作原理 Ajax核心是Javascrip

  • ajax 技术和原理分析

    ajax所包含的技术 大家都知道ajax并非一种新的技术,而是几种原有技术的结合体.它由下列技术组合而成. 1.使用CSS和XHTML来表示. 2. 使用DOM模型来交互和动态显示. 3.使用XMLHttpRequest来和服务器进行异步通信. 4.使用javascript来绑定和调用. 在上面几中技术中,除了XmlHttpRequest对象以外,其它所有的技术都是基于web标准并且已经得到了广泛使用的,XMLHttpRequest虽然目前还没有被W3C所采纳,但是它已经是一个事实的标准,因为目

  • 利用iframe实现ajax跨域通信的实现原理(图解)

    利用iframe实现ajax跨域通信的实现原理(图解)

    在漫长的前端开发旅途上,无可避免的会接触到ajax,而且一般情况下都是用在同一域下的ajax请求:但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,目前我没有找到明确的资料说明这是为什么,我觉得应该是出于安全性的考虑吧.纵然如此,要实现跨域访问的话,方法还是有的,而且不只一种,在这里介绍其中一种解决方案:如何利用iframe完成ajax的跨域请求. 如下图所示:域a.com的页面request.html(即http://a.com/request.html)里面嵌

  • 完成了AJAX树附原理分析

    首先要纠正一个上篇博文<Rails中的Ajax初体验>中的一个错误:上篇博文中,我说"要在Rails中使用Ajax,局部模板是必须的",经实践检验,是错误的,特此更正.实践是检验真理的唯一标准,此言不虚.经过项目中真正通过RJS实现AJAX树,可知,通过使用insert_html.replace_html等辅助方法,可直接操作页面上的元素,无须使用局部模板. 整个的实现过程还是有点曲折: 之前使用的生成树结构的页面,是利用从服务器获取的所有数据,通过一系列javascrip

  • 浅析Ajax的 原理及优缺点

    1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax的流行.而这也让微软感到无比的尴尬,因为早在97年,微软便已经发明了ajax中的关键技术,并且在99年IE5推出之时,它便开始支持XmlHttpRequest对象,并且微软之前已经开始在它的一些产品中应用ajax,比如说MSDN网站菜单中的一些应用.遗憾的是,不知道出于什么想法,当时微软发明了aja

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

    Overriew: onReadyStateChange被回调函数赋值,则能实现异步调用,回调函数直接操作DOM,则能实现局部刷新.那么XMLHttpRequest的onReadyStateChange如何知道服务ready了呢?状态如何change了呢(观察者模式)?则是通过客户端对服务的状态询问(定期轮询)所实现的. 详解: 1.  XMLHttpRequest 负责与服务器端的通讯,其内部有很多重要的属性:readyStatus=4,status=200等等.当XMLHttpRequest

  • Springmvc加ajax实现上传文件并页面局部刷新

    1.点击上传按钮进行如下操作,通过表单名称以及input名称获取相应的值,对于上传的文件,使用.files来获取, 因为包含文件的上传,所以采用FormData的形式来进行数据交互,通过append将数据放到fm对象当中. 在默认情况下,contentType = "application/x-www-form-urlencoded".此内容编码类型满足大多数情况. 但是上传文件时,我们对form的属性进行如下设置:contentType = multipart/form-data.在

  • jQuery 翻页组件yunm.pager.js实现div局部刷新的思路

    jQuery 翻页组件yunm.pager.js实现div局部刷新的思路

    前端的翻页插件有很多,bootstrap的翻页界面看起来就不错,做起来也易于上手,但应用于项目中的翻页实现还有有几个难点,分别是: 如何封装一个翻页插件,如题中的yunm.pager.js. 涉及到的div局部刷新该如何做. 在没给大家介绍正文之前,先给大家展示下效果图,如果感觉还不错,请继续往下阅读: 翻页的总体流程涉及到的知识点很多,这篇文章我们也主要来关注以上两点,其余的内容,请自悟. 一.如何定义局部刷新的div 翻页时,我们一般只会刷新页面中涉及到翻页的父级div,那么该如何定义呢?

  • 实现AJAX异步调用和局部刷新的基本步骤

    目录 引言 1.创建XMLHttpRequest对象 2.创建HTTP请求 3.设置响应HTTP请求状态变化的函数 4.设置获取服务器返回数据的语句 5.发送HTTP请求 6.局部更新 7.完整的AJAX实例 总结 引言 要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤: (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象. (2)创建一个新的HTTP请求,并指定该HTTP请求的方法.URL及验证信息. (3)设置响应HTTP请求状态变化的函数. (4)发送HT

  • 利用ajax实现简单的注册验证局部刷新实例

    1,ajax(asynchronouse javascript and xml)异步的 javascrip 和xml 2,(包含了7种技术:javascript xml xstl dom xhtml css xmlhttpRequest) 3,是一种与服务器语言无关的技术,可以用在(php/jsp/asp.net) 4,ajax的工作原理: 创建一个ajax引擎->发送数据给服务器-->通过回调函数接收数据--->将数据赋给指定的页面 下面是注册验证案例register.php是注册页面

  • Ajax工作原理及优缺点实例解析

    1.Ajax是什么? 全称是 asynchronous javascript and xml,是已有技术的组合,主要用来实现客户端与服务器端的异步通信效果(无需重新加载整个网页的情况下),实现页面的局部刷新. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,用于创建快速动态网页. 早期的浏览器并不能原生支持 ajax,可以使用隐藏帧(iframe)方式变相实现异步效果,后来的浏览器提供了对 ajax 的原生支持. 2. Ajax的工作原理 使用 Ajax 原生方式发送请求主

  • Ajax+php数据交互并且局部刷新页面的实现详解

    Ajax+php数据交互并且局部刷新页面的实现详解

    什么是Ajax? 国内翻译常为"阿贾克斯"和阿贾克斯足球队同音,AJAX 是一种用于创建快速动态网页的技术,他不是新语言,而是一种使用现有标准的新方法.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,这样就可以在不重新加载整个网页的情况下,对网页的某部分进行更新. XMLHttpRequest 是 AJAX 的基础,用于和服务器交换数据.所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject) 下面这篇文章主

随机推荐