`
wandejun1012
  • 浏览: 2736670 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Ajax 原理图解

 
阅读更多

转自:http://www.nowamagic.net/ajax/ajax_PicForAjaxPrinciple.php(里面有很多讲AJAX的)

Ajax其实已经使用很久了,但一直也没有时间正经的找本书系统看看,最近时间比较充裕可以好好补习一下了。本系列是基于Ajax和PHP结合进行讲解,主要是想和正在学习或想要学习Ajax的朋友分享下经验。希望大家多多拍砖共同交流。

众所周知,Ajax并不是一个新生的语言,它是一系列语言的结合体:HTML/XHTML、CSS、DOM、XML、XSLT、XMLHttp、JavaScript。可以说Ajax涉及的知识面的确是很广的,在Web开发中为我们提供了很方便的交互式用户体验模式。以往我们浏览网页的原理是由Client向Server提交页面申请,再由Server将申请通过HTTP传回给Client生成浏览页面:



使用Ajax后的工作原理如下图,可见通过Ajax在用户交互方面有了很大改进,用户可以不用为提交了Form而长时间等待服务器应答,而且通过Ajax也可以开发出华丽的Web交互页面。



在使用Ajax时,需要创建XMLHttpRequest对象,不同浏览器的创建方式略有不同:



在利用Ajax向服务器提交请求时,需要先确定三点:
使用GET或POST方式提交请求?
需要请求的页面(Page)或代码(Script)?
将请求的页面或代码加载到页面什么位置?



其中readyState表示当前对象状态,分为0~4的类别,0: uninitialized, 1: loading, 2: loaded, 3: interactive, 4: complete。status表示HTTP响应状态,常见状态有200 OK,304 Not Modified,401 Unauthorized,403 Forbidden,404 Not Found,500 Internal Server Error,503 Service Unavailable。代码中认定readyState==4和status==200为正常状态。
一个简单的例子

下面再来看一个简单的代码,当用户点击Page1~4时,相应的链接文件将会显示在My Webpage页面中。

分享到:
评论

相关推荐

    Ajax原理图解借鉴.pdf

    Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的技术,它允许在不刷新整个页面的情况下,与服务器交换数据并更新部分网页内容。Ajax的核心是利用JavaScript、CSS、DOM以及XMLHttpRequest对象,实现...

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

    在漫长的前端开发旅途上,无可避免的会接触到ajax,而且一般情况下都是用在同一域下的ajax请求;但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,目前我没有找到明确的资料说明...

    《图解HTTP》完整彩色版1

    《图解HTTP》是一部深入浅出介绍Web和HTTP协议的著作,由上野宣撰写,于均良翻译...总的来说,《图解HTTP》是一本全面且实用的HTTP学习资料,适合初学者和有经验的开发者阅读,以深入理解Web工作原理和HTTP协议的细节。

    JavaScript and AJAX_ Visual QuickStart Guide

    书中会讲解AJAX的工作原理,如何创建XMLHttpRequest对象,发送异步请求,以及解析响应数据。此外,还会涉及JSON(JavaScript Object Notation)——一种轻量级的数据交换格式,它是AJAX通信中常用的替代XML的方式。 ...

    JavaScript中浅讲ajax图文详解

    首先,要理解Ajax的核心原理,它依赖于浏览器内置的XMLHttpRequest对象。这个对象提供了与服务器进行异步通信的能力。当用户触发某个事件(如点击按钮),JavaScript代码会创建一个新的XMLHttpRequest实例,然后通过...

    尚筹网-加餐-Ajax的同步和异步请求1

    本文将深入探讨Ajax的同步和异步请求,以及它们的工作原理。 ### 1. 异步工作方式 **1.1 图解** 在异步模式下,Ajax请求发送后,浏览器不会等待服务器的响应,而是继续执行后续的代码。当服务器返回响应时,会调用...

    jquery在sp中的应用图解

    通过理解jQuery的基本原理和SharePoint的特性,开发者可以充分利用这一工具,打造出更富吸引力和功能性的SharePoint解决方案。但同时,也需注意资源路径的准确性,避免因路径问题导致的错误,确保所有脚本和资源能够...

    JSF 多套资源,教程详解,开发图解

    这些图解将帮助你直观地理解JSF的工作原理,例如: 1. **JSF组件树**:展示了组件如何组成一个完整的视图,并解释了组件间的父子关系。 2. **生命周期流程图**:描绘了JSF请求处理的每个阶段,帮助理解何时何地...

    【图解+源码】前后台数据交互,方便纯前端程序员了解后台服务器处理

    前端开发者不仅要精通HTML、CSS和JavaScript,还要理解服务器的基本工作原理,以及如何利用AJAX和JSON进行数据交互。通过深入学习和实践,纯前端程序员能够更好地理解后台服务器处理,从而提高其在项目中的协同效率...

    dwr的简单应用程序

    至于文档中的“原理图.doc”,这可能是一个关于DWR工作原理的详细图解,通常会包含DWR通信过程的各个步骤、数据流向以及各组件之间的关系,对于理解DWR的工作机制非常有帮助。阅读这份文档,有助于深入理解DWR如何...

    IT技术学习资料合集

    - **jQuery图解系统**:通过丰富的示例来解析jQuery的工作原理,帮助理解其背后的机制。 - **jQuery视频教程**:通过视频形式,更加直观地展示jQuery的应用场景。 3. **jQuery项目案例** - **jQuery项目案例...

    ASP.NET MVC框架开发系列课程(17):Model Binder

    当用户提交表单或发送Ajax请求时,Model Binder会解析请求数据,然后尝试将这些数据与控制器方法的参数进行匹配,并填充相应的模型属性。 Model Binder的工作流程可以分为以下几个步骤: 1. **识别参数**:Model ...

    操作系统的Web设计与实现

    - PPT展示:可能包含操作系统原理的图解和流程演示。 - Flash展示:动态教学材料,用动画形式解释复杂的操作系统概念。 - 资料下载:可能包括教材、论文、实验指导等,帮助深入理解。 通过以上内容的学习,你...

    在Web项目中引入Jquery插件报错的完美解决方案(图解)

    在Web开发过程中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互。然而,当我们在Web项目中引入jQuery插件时,可能会遇到一些报错的情况,即使项目仍然能够正常运行。这通常与...

    javascript课件

    PPT中可能会以实例和图解的形式,生动地展示如何在实际编程中运用这些概念。 其次,教学源码部分是实践学习的重要环节。通过阅读和分析示例代码,学习者能更好地理解JavaScript语法和编程逻辑。源码可能涵盖了DOM...

    Head Firs tJavaScript

    本书通过丰富的图解、幽默的插图和互动式的学习方式,使复杂的概念变得易于理解。 在学习JavaScript的过程中,实践是必不可少的。书中提供的"JS examples"文件夹包含了与教材内容对应的代码示例,这些示例是理解并...

    Head First Servlets and JSP 中文版 第2版

    本书以生动有趣的图解和实例,将复杂的Web开发概念简化,使学习过程既有趣又高效。 Servlet是Java编程语言中用于扩展服务器功能的接口,它可以处理HTTP请求并生成响应。在Java Web开发中,Servlet扮演着服务器端...

    JavaScript对象变量图

    DOM浏览器对象(如IE的`ActiveXObject`)是浏览器特有扩展,用于与浏览器交互,如创建XMLHttpRequest对象进行Ajax操作。 了解以上知识点后,结合“结构图.gif”、“字符串函数.gif”、“正则表达.gif”、“基础DOM...

    java BBS论坛服务器端

    这张图片可能是Java编程语言的示例图,可能用于解释Java的语法特性,如类结构、对象关系、网络编程原理或数据库操作流程。在实际项目中,开发者可能会参考这样的图解来理解和实现相关功能。 5. **数据库设计**: ...

Global site tag (gtag.js) - Google Analytics