`
miracle9i
  • 浏览: 34581 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

AJAX的整个页面过程

    博客分类:
  • AJAX
阅读更多

 

AJAX的核心是其事件处理函数,其典型过程如下:
1.初始化 XMLHttpRequest对象
2. 指定回调函数,即设定 XMLHttpRequest对象的onreadystatechange属性
3.创建http请求,即调用 XMLHttpRequest对象的open()方法
4.设置http请求头,即调用 XMLHttpRequest对象的setResourceHeader方法
5.发送http请求,即调用 XMLHttpRequest对象的send()方法
 
当open()的asynchoronize参数设定为true(也就是默认值)时,当readystate的值发生改变时,就会将控制转交给回调函数处理。
回调函数可以分为请求处理函数和业务处理函数。前者判断http请求头,并做必要的异常处理;后者分析并加工相应的数据,根据既定业务需求更新页面内容。
回调函数的一般过程:
1.判断http请求的状态,并做相应的处理
    仅当 readystate==4&&status==200 时,才可返回相应的属性
2.处理返回的responseText或responseXML,可以做主要两类处理:
            (1 ) 处理解析XML并存储于客户端的JS领域模型对象中
            (2) 处理的数据存储于缓存数组中
3.调用业务处理函数,解析DOM,定位节点,更新页面
因此,整个页面的AJAX的过程如下:
1.初始化页面
2.对页面操作,触发元素的事件处理函数
3.元素的事件处理函数调用AJAX事件处理函数,同时传给AJAX事件处理函数必要的发给服务器端的参数数据
4.AJAX事件处理函数创建XMLHttpRequest对象,发送http请求,接收请求,必要时将控制权交由回调函数
5.请求处理函数:判断http请求
6.业务处理函数,更新到视图
以下的时序图完整诠释了以上描述的繁琐过程:
分享到:
评论

相关推荐

    基于AJAX技术的邮件系统

    浏览器不需要将整个页面提交到服务器,就能够实现页面的部分更新。并且在这一个与服务器交互过程中,用户不会感觉到页面被刷新。微软公司在ASP.NET 2.0之上也推出了AJAX技术,即ASP.NET AJAX技术。本章将介绍创建一...

    基于Ajax+div的“左边菜单、右边内容”页面效果实现

    这样就使用Ajax+div实现了左边菜单选择,右边内容显示的效果,下面就来看看具体的实现过程吧 一: 整个演示用的示例程序包含默认页面(index.jsp),用户列表页(userList.jsp),产品列表页(productList.j

    day22_Ajax&Json.zip

    ASynchronous JavaScript And XML 异步的JavaScript 和 XML 1. 异步和同步:客户端和服务器端相互通信的基础上 ... 传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。 提升用户的体验

    AJAX 源码范例

    当展开菜单时,自动向服务器发送请求,查询该菜单下的子菜单,并在客户端显示子菜单,而无需刷新整个页面。 源码结构说明 1.TreeWiewDemo文件夹下为源文件 2.TreeWiewDemo.war为部署文件 <br>第15章...

    input type file 使用ajax上传文件

    注明:既然有了表单上传为什么又要ajax上传呢?因为表单上传过程中,整个页面就刷新了!ajax异步上传就可以达到只刷新局部位置,下面就简单看看ajax上传吧!

    Ajax课件学习(免费)

    2、从图上可以看出来,客户端没有再发送http请求,而是用JavaScript调用一个叫Ajax engine来发送数据,所以不用提交整个页面。 3、从返回来看,返回的也不再是客户需要的页面,而是客户需要的数据 4、优点: 1、...

    Django 通过JS实现ajax过程详解

    AJAX无须刷新整个页面 因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高 小练习:计算两个数的和 方式一:这里没有指定contentType:默认是urlencode的方式发的 index.html <!DOCTYPE html>...

    javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】

    本文实例讲述了javascript和 jQuery中的AJAX技术。...传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。 2.AJAX在原生JS中的实现 尽管随着JS框架的盛行,在jQuery中,实现AJAX过程相当简单,但是对于

    AJAX——新手快车道

    首先、AJAX是一种很酷的技术,一旦采用了AJAX,就能让你的Web页面, 你的网站,甚至连同你们公司,都变得很酷。在Web2.0的时代里,不使用一点 AJAX技术的网站,就会显得很老土,很落伍。 但是,这样的理解,其实是很...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    当展开菜单时,自动向服务器发送请求,查询该菜单下的子菜单,并在客户端显示子菜单,而无需刷新整个页面。 /simpleTree.jsp 简单树 /staticTree.jsp 静态树 /dynamicTree.jsp 动态树 /css/tree....

    thinkphp中ajax与php响应过程详解

    一般将前台页面搜索结果中,不喜欢的内容(链接),删除掉,因为整个网站的编程框架式thinkphp,运用js中的ajax对页面进行响应,调用后台php接口,实现前台和后台数据库的同时更新. 首先我们需要做的就是在前台页面中添加一...

    Python3爬虫中Ajax的用法

    对于传统的网页,如果想更新其内容,那么必须要刷新整个页面,但有了Ajax,便可以在页面不被全部刷新的情况下更新其内容。在这个过程中,页面实际上是在后台与服务器进行了数据交互,获取到数据之后,再利用...

    通过实例解析jQ Ajax操作相关原理

    对于传统的网页,如果想更新内容,那么必须要刷新整个页面,但有了Ajax,便可以在页面不被全部刷新的情况下更新其内容。在这个过程中,页面实际上是在后台与服务器进行了数据交互,获得数据之后,再利用JavaScript...

    使用Ajax更新ASP.Net MVC项目中的报表对象方法

    大家都同意,每次点击按钮时整个页面都会被刷新这一点不太友好。如果你的网速不是很快,那么这个过程会很烦人,因为所有的元素都会先消失,再慢慢重新出现。如果只刷新一部分页面,那就美滋滋了。而这正是Ajax所提供...

    从浅到深,带你彻底搞懂AJAX异步请求

    在同步请求时如果对网页的部分内容进行更新时,是不是就必须重载整个页面。这样肯定是不行的,这时就可以采用异步请求来解决此问题。 文章目录什么是 AJAX实例用法1、AJAX load() 方法2、$.get() 方法3、$.post() ...

    javascript原生ajax写法分享

    ajax:一种请求数据的方式,不需要刷新整个页面; ajax的技术核心是 XMLHttpRequest 对象; ajax 请求过程:创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据; /** * 得到ajax对象 */ function ...

    健身俱乐部Web网站-JSP+Servlet+Hibernate+jQuery+Ajax

    这是我做的第一个Web网站,前台页面主要利用JSP、jQuery(数据验证),部分页面用到Ajax。控制转发层采用Servlet,数据访问层采用Hibernate(bean和dao是由Hibernate逆向工程自动生成)。 系统采用分层架构,由上...

    Ajax与服务器(JSON)通信实例代码

    Ajax之前所有的服务器通信都是在服务器上完成的,所以那是若想重绘页面的一部分,要么使用iframe(已淘汰),要么刷新整个页面。这两种方式都称不上是良好的用户体验。 Ajax提供了两类服务器通信手段:同步通信和...

    详解JavaScript中jQuery和Ajax以及JSONP的联合使用

    借助于 XMLHttpRequest,浏览器可以在整个页面不刷新的情况下与服务端进行交互,这就是所谓的 Ajax(Asynchronous JavaScript and XML)。Ajax 可以为用户提供更为丰富的用户体验。 Ajax 请求由 JavaScript 驱动,...

    使用Ajax与服务器(JSON)通信实例

    Ajax之前所有的服务器通信都是在服务器上完成的,所以那是若想重绘页面的一部分,要么使用iframe(已淘汰),要么刷新整个页面。这两种方式都称不上是良好的用户体验。 Ajax提供了两类服务器通信手段:同步通信和...

Global site tag (gtag.js) - Google Analytics