热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

ajax的运行原理

ajax这个名字据说是AsynchronousJavaScript+XML的简写,实际上,它由下列几种技术组合而成。1.使用CSS和XHTML来表示。2.使用DOM模型来交互和动态显示。3.使用XMLHttpRequest来和服务器进行异步通信。4.使用javascript来绑定和调用。ajax的原理XMLHt

ajax这个名字据说是Asynchronous Javascript + XML的简写,实际上,它由下列几种技术组合而成。 

   1.使用CSS和XHTML来表示。 

   2. 使用DOM模型来交互和动态显示。 

   3.使用XMLHttpRequest来和服务器进行异步通信。 

   4.使用Javascript来绑定和调用。 

ajax的原理 

  XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是Javascript可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。 

  所以我们先从XMLHttpRequest讲起,来看看它的工作原理。 

  首先,我们先来看看XMLHttpRequest这个对象的属性。 

  它的属性有: 

  onreadystatechange  每次状态改变所触发事件的事件处理程序。 

  responseText     从服务器进程返回数据的字符串形式。 

  responseXML   从服务器进程返回的DOM兼容的文档数据对象。 

  status                 从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪) 

  status Text         伴随状态码的字符串信息 

  readyState         对象状态值,0—未初始化 1—正在加载  2—加载完毕 3—交互 4—完成。 

  

  但是,由于各浏览器之间存在差异,所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。 

下面是面对不同浏览器分别创建的XMLHttpRequest对象。 

 

这个过程分为三步,首先我们定义一个xmlHttp来引用创建的XMLHttpRequest。然后,我们尝试在微软的浏览器中创建该对象,先用Msxml.XMLHTTP对象来创建,如果失败再尝试用macrosoft.XMLHTTP来创建它.最后,我们面向非微软浏览器来创建该对象. 

 这样,我们创建了一个XMLHttpRequest对象,下面我们来看如何发出一个XMLHttpRequest请求。 function executeXMLHttpRequest(callback,url) 

//处理非微软浏览器的情况 

if(window.XMLHttpRequest)  

  xhr=new XMLHttpRequest(); 

  xhr.Onreadystatechange= callback; 

  xhr.open("Get",url,true); 

  xhr.send(null); 

//处理微软浏览器的情况 

else if(window.ActiveXObject) 

  xhr=new ActiveXObject("macrosoft.XMLHttp"); 

  if(xhr) 

  xhr.Onreadystatechage=callback; 

  xhr.open("Get",url,true); 

  xhr.send();  

由上面可见,执行XMLHttpRequest实际上大多数代码还是用在处理浏览器的区别上面,针对不同的浏览器它还是要做出不同的处理,但是这样看上去也非常的直观。 

在上面的代码中,最关键的是: 

xhr.Onreadystatechage=callback   它定义了回调函数,一旦响应它就会自动执行。 

xhr.open(""Get",url,true);   true表示您想要异步执行该请求。 

对于callback来说,我们有: 

function processAjaxResponse() { 

//状态标识为已完成 

  if (xhr.readyState == 4) { 

//已就绪 

    if (xhr.status == 200) { 

      502 502'votes').innerHTML = xhr.responseText; 

    } else { 

      alert("There was a problem retrieving the XML data: 

" + 

      xhr.statusText); 

   

 

就是说,一旦服务器处理完XMLHttpRequest并返回给浏览器,用xhr.onreadystatechange指派的回调方法将自动调用。 

上面差不多就是XMLHttpRequest的整个工作流程,它首先检查XMLHttpRequest的整体状态并且保证它已经完成(readyStatus=4),然后根据服务器的设定询问请求状态,如果一切已经就绪(status=200),那么就执行下面需要的操作。 

  知道了XMLHttpRequest的工作流程,我们可以看出,XMLHttpRequest是完全用来向服务器发出一个请求的,它的作用也局限于此,但它的作用是整个ajax实现的关键,因为ajax无非是两个过程,发出请求和响应请求。并且它完全是一种客户端的技术。而XMLHttpRequest正是处理了服务器端和客户端通信的问题所以才会如此的重要。 

  现在,我们对ajax的原理大概可以有一个了解了。我们可以把服务器端看成一个数据接口,它返回的是一个纯文本流,当然,这个文本流可以是XML格式,可以是Html,可以是Javascript代码,也可以只是一个字符串。这时候,XMLHttpRequest向服务器端请求这个页面,服务器端将文本的结果写入页面,这和普通的web开发流程是一样的,不同的是,客户端在异步获取这个结果后,不是直接显示在页面,而是先由Javascript来处理,然后再显示在页面。至于现在流行的很多ajax控件,比如magicajax等,可以返回DataSet等其它数据类型,只是将这个过程封装了的结果,本质上他们并没有什么太大的区别。 


推荐阅读
  • 本文探讨了如何通过WebBrowser控件在用户点击输入框时自动显示图片验证码。该过程可能涉及JavaScript事件的触发与响应。 ... [详细]
  • ServletContext接口在Java Web开发中扮演着重要角色,它提供了一种方式来获取关于整个Web应用程序的信息。通过ServletContext,开发者可以访问初始化参数、共享数据以及应用资源。 ... [详细]
  • 本文详细介绍如何利用已搭建的LAMP(Linux、Apache、MySQL、PHP)环境,快速创建一个基于WordPress的内容管理系统(CMS)。WordPress是一款流行的开源博客平台,适用于个人或小型团队使用。 ... [详细]
  • 本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例,涵盖从入门到进阶的各个阶段,帮助读者全面提升JavaScript编程能力。 ... [详细]
  • 理解文档对象模型(DOM)
    本文介绍了文档对象模型(DOM)的基本概念,包括其作为HTML文档的节点树结构,以及如何通过JavaScript操作DOM来实现网页的动态交互。 ... [详细]
  • 本周信息安全小组主要进行了CTF竞赛相关技能的学习,包括HTML和CSS的基础知识、逆向工程的初步探索以及整数溢出漏洞的学习。此外,还掌握了Linux命令行操作及互联网工作原理的基本概念。 ... [详细]
  • 本文详细介绍了如何使用PHP检测AJAX请求,通过分析预定义服务器变量来判断请求是否来自XMLHttpRequest。此方法简单实用,适用于各种Web开发场景。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文详细介绍超文本标记语言(HTML)的基本概念与语法结构。HTML是构建网页的核心语言,通过标记标签描述页面内容,帮助开发者创建结构化、语义化的Web页面。 ... [详细]
  • 本文探讨了浏览器的同源策略限制及其对 AJAX 请求的影响,并详细介绍了如何在 Spring Boot 应用中优雅地处理跨域请求,特别是当请求包含自定义 Headers 时的解决方案。 ... [详细]
  • 本文将介绍如何利用Python爬虫技术抓取国内主流在线学习平台的数据,并以51CTO学院为例,进行详细的技术解析和实践操作。 ... [详细]
  • 深入分析十大PHP开发框架
    随着PHP技术的发展,各类开发框架层出不穷,成为了开发者们热议的话题。本文将详细介绍并对比十款主流的PHP开发框架,旨在帮助开发者根据自身需求选择最合适的工具。 ... [详细]
  • Microsoft即将发布WPF/E的CTP(Community Technology Preview)和SDK,标志着RIA(Rich Internet Application)技术的新里程碑。更多详情及下载链接请参见MSDN官方页面。 ... [详细]
  • 本文深入探讨网页游戏的开发流程,涵盖从程序框架设计到具体实现的技术细节,旨在为开发者提供全面的指导。 ... [详细]
author-avatar
悠闲的大黄
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有