ajax原理图解
Ajax 原理图解
摘自: http://www.nowamagic.net/ajax/ajax_PicForAjaxPrinciple.php
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对象,不同浏览器的创建方式略有不同:
- <script language="javascript">
- var xmlHttp = null;
- try
- {
- // Firefox, Opera 8.0+, Safari 非IE浏览器
- xmlHttp=new XMLHttpRequest();
- }
- catch (e)
- {
- //IE浏览器
- try
- {
- xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
- }
- catch (e)
- {
- xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
- }
- }
- </script>
在利用Ajax向服务器提交请求时,需要先确定三点:
- 使用GET或POST方式提交请求?
- 需要请求的页面(Page)或代码(Script)?
- 将请求的页面或代码加载到页面什么位置?
- function makerequest(serverPage, objID)
- {
- //将要被替换的页面位置obj
- var obj = document.getElementById(objID);
- //发出页面(serverPage)请求
- xmlhttp.open("GET", serverPage);
- xmlhttp.onreadystatechange = function()
- {
- if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
- {
- //将服务器返回的信息替换到页面位置obj
- obj.innerHTML = xmlhttp.responseText;
- }
- }
- xmlhttp.send(null);
- }
其中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页面中。
- <html>
- <head>
- <title>Ajax Sample</title>
- <script type="text/javascript">
- var xmlHttp=null;
- try
- {
- xmlHttp=new XMLHttpRequest();
- }
- catch (e)
- {
- try
- {
- xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
- }
- catch (e)
- {
- xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
- }
- }
- function makerequest(serverPage,objId)
- {
- var obj = document.getElementById(objId);
- xmlHttp.open("GET", serverPage);
- xmlHttp.onreadystatechange = function()
- {
- if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
- {
- obj.innerHTML = xmlHttp.responseText;
- }
- }
- xmlHttp.send(null);
- }
- </script>
- <body onLoad="makerequest ('content1.html','hw')">
- <div align="center">
- <h1>My Webpage</h1>
- <a href="content1.html" onClick="makerequest('content1.html','hw'); return false;">Page 1</a>
- <a href="content2.html" onClick="makerequest('content2.html','hw'); return false;">Page 2</a>
- <a href="content3.html" onClick="makerequest('content3.html','hw'); return false;">Page 3</a>
- <a href="content4.html" onClick="makerequest('content4.html','hw'); return false;">Page 4</a>
- //这里就是将要替换content1~4.html的位置。
- <div id="hw"></div>
- </div>
- </body>
- </html>
ajax原理图解的更多相关文章
- Ajax原理与图解
Ajax原理 Ajax 的全称是Asynchronous JavaScript and XML. Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后 ...
- AJAX原理总结
AJAX全称 Asynchronous JavaScript and XML(异步的JavaScript 和XML) 同步和异步 异步传输是面向字符的传输,单位是字符 同步传输是面向比特,单位是帧,传 ...
- 《Java虚拟机原理图解》 1.2、class文件里的常量池
[最新更新:2014/11/11] 了解JVM虚拟机原理 是每个Java程序猿修炼的必经之路. 可是因为JVM虚拟机中有非常多的东西讲述的比較宽泛.在当前接触到的关于JVM虚拟机原理的教程或者博客中 ...
- 什么是ajax,ajax原理是什么 ,优缺点是什么
AJAX工作原理及其优缺点 1.什么是AJAX?AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页 ...
- Java基础知识强化之网络编程笔记02:Socket通信原理图解
1. Socket (1)Socket套接字 网络上具有唯一标识的IP地址和端口号组合在一起才能构成唯一能识别的标识符套接字 (2)Socket原理机制: • 通信两端都有Socket. • 网 ...
- 《Java虚拟机原理图解》1.4 class文件里的字段表集合--field字段在class文件里是如何组织的
0.前言 了解JVM虚拟机原理是每个Java程序猿修炼的必经之路.可是因为JVM虚拟机中有非常多的东西讲述的比較宽泛.在当前接触到的关于JVM虚拟机原理的教程或者博客中,绝大部分都是充斥的文字性的描写 ...
- 《Java虚拟机原理图解》 1.2.2、Class文件里的常量池具体解释(上)
[last updated:2014/11/27] NO1.常量池在class文件的什么位置? 我的上一篇文章<Java虚拟机原理图解> 1.class文件基本组织结构中已经提到了clas ...
- 《Java虚拟机原理图解》1.3、class文件里的訪问标志、类索引、父类索引、接口索引集合
讲完了class文件里的常量池,我们就相当于克服了class文件里最麻烦的模块了.如今,我们来看一下class文件里紧接着常量池后面的几个东西:訪问标志.类索引.父类索引.接口索引集合. 1. 訪问标 ...
- 浅析ajax原理与用法
1 ajax原理 Ajax(Asynchronous JavaScript and XML (异步的JavaScript和XML)),是一种快速创建 动态网页的技术,目的是显示动态局部刷新.通过XML ...
随机推荐
- Got Stucked in C++ Static Library Loading.. for some time
I used to load library using 1 single .dll file, so when I happen to do method calling between 2 pro ...
- 关于前台主键输入错误对后台hibernate方法的影响
由于前台输入时开始不小心打错了主键为value=“${conf_id}”/ 导致后台得到的主键不是数字“1”而是“1/”所以到后台就算是进的updata方法结果运行的却是添加方法 原因可能是传入的对象 ...
- java数据结构之链表的实现
这个链表的内部是使用双向链表来表示的,但是并未在主函数中进行使用 /** * 链表 * 2016/4/26 **/ class LinkList{ Node head = new Node(); No ...
- Camera Path插件的使用
rpg游戏类型的游戏,猪脚走过一个个场景,一个个死角.拐弯处,摄像机镜头也能很好的跟踪对焦,很多朋友都会想,这摄像机如何智能跟踪并且对焦呢? 之前 itween也有demo,但它做法是 两条线,一条摄 ...
- “找回” Envi 快捷方式
Envi+IDL文件夹挪到别的电脑,不用安装,直接可以使用.但是桌面和开始菜单没有了Envi,IDL,envi+idl的快捷方式,很不方便. 记录一下快捷方式命令行,备用: envi快捷方式 ...
- 微软企业库3.1DIY编译使用(数据库连接符写在企业库DLL里)
1.在winform项目app.config文件中去掉"PublicKeyToken=b03f5f7f11d50a3a"(不然无法加载使用新编译的企业库DLL文件) 2.在企业库所 ...
- PAT (Advanced Level) 1111. Online Map (30)
预处理出最短路再进行暴力dfs求答案会比较好.直接dfs效率太低. #include<cstdio> #include<cstring> #include<cmath&g ...
- hdu_5724_Chess(组合博弈)
题目链接:hdu_5724_Chess 题意: 给你一个n行20列的棋盘,棋盘里面有些棋子,每个棋子每次只能往右走一步,如果右边有棋子,可以跳过去,前提是最右边有格子,如果当前选手走到没有棋子可以走了 ...
- Android编程之SparseArray<E>详解
最近编程时,发现一个针对HashMap<Integer, E>的一个提示: 翻译过来就是:用SparseArray<E>来代替会有更好性能.那我们就来看看源码中SparseAr ...
- 转 Goldengate常用命令
1.Goldengate的起停 启动goldengate a> 启动goldengate时最好先从target节点开始,然后是source节点.否则data pump进程可能会由于没有收到t ...