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对象，不同浏览器的创建方式略有不同：

  1. <script language="javascript">
  2. var xmlHttp = null;
  3. try
  4. {
  5. // Firefox, Opera 8.0+, Safari 非IE浏览器
  6. xmlHttp=new XMLHttpRequest();
  7. }
  8. catch (e)
  9. {
  10. //IE浏览器
  11. try
  12. {
  13. xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  14. }
  15. catch (e)
  16. {
  17. xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  18. }
  19. }
  20. </script>

在利用Ajax向服务器提交请求时，需要先确定三点：

  • 使用GET或POST方式提交请求？
  • 需要请求的页面（Page）或代码（Script）？
  • 将请求的页面或代码加载到页面什么位置？
  1. function makerequest(serverPage, objID)
  2. {
  3. //将要被替换的页面位置obj
  4. var obj = document.getElementById(objID);
  5. //发出页面（serverPage）请求
  6. xmlhttp.open("GET", serverPage);
  7. xmlhttp.onreadystatechange = function()
  8. {
  9. if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
  10. {
  11. //将服务器返回的信息替换到页面位置obj
  12. obj.innerHTML = xmlhttp.responseText;
  13. }
  14. }
  15. xmlhttp.send(null);
  16. }

其中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页面中。

  1. <html>
  2. <head>
  3. <title>Ajax Sample</title>
  4. <script type="text/javascript">
  5. var xmlHttp=null;
  6. try
  7. {
  8. xmlHttp=new XMLHttpRequest();
  9. }
  10. catch (e)
  11. {
  12. try
  13. {
  14. xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  15. }
  16. catch (e)
  17. {
  18. xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  19. }
  20. }
  21. function makerequest(serverPage,objId)
  22. {
  23. var obj = document.getElementById(objId);
  24. xmlHttp.open("GET", serverPage);
  25. xmlHttp.onreadystatechange = function()
  26. {
  27. if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
  28. {
  29. obj.innerHTML = xmlHttp.responseText;
  30. }
  31. }
  32. xmlHttp.send(null);
  33. }
  34. </script>
  35. <body onLoad="makerequest ('content1.html','hw')">
  36. <div align="center">
  37. <h1>My Webpage</h1>
  38. <a href="content1.html" onClick="makerequest('content1.html','hw'); return false;">Page 1</a>
  39. <a href="content2.html" onClick="makerequest('content2.html','hw'); return false;">Page 2</a>
  40. <a href="content3.html" onClick="makerequest('content3.html','hw'); return false;">Page 3</a>
  41. <a href="content4.html" onClick="makerequest('content4.html','hw'); return false;">Page 4</a>
  42. //这里就是将要替换content1～4.html的位置。
  43. <div id="hw"></div>
  44. </div>
  45. </body>
  46. </html>

ajax原理图解的更多相关文章

  1. Ajax原理与图解

    Ajax原理 Ajax 的全称是Asynchronous JavaScript and XML. Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后 ...

  2. AJAX原理总结

    AJAX全称 Asynchronous JavaScript and XML(异步的JavaScript 和XML) 同步和异步 异步传输是面向字符的传输,单位是字符 同步传输是面向比特,单位是帧,传 ...

  3. 《Java虚拟机原理图解》 1.2、class文件里的常量池

    [最新更新:2014/11/11]  了解JVM虚拟机原理 是每个Java程序猿修炼的必经之路. 可是因为JVM虚拟机中有非常多的东西讲述的比較宽泛.在当前接触到的关于JVM虚拟机原理的教程或者博客中 ...

  4. 什么是ajax，ajax原理是什么 ，优缺点是什么

    AJAX工作原理及其优缺点   1.什么是AJAX?AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页 ...

  5. Java基础知识强化之网络编程笔记02：Socket通信原理图解

    1. Socket (1)Socket套接字  网络上具有唯一标识的IP地址和端口号组合在一起才能构成唯一能识别的标识符套接字 (2)Socket原理机制:  • 通信两端都有Socket.  • 网 ...

  6. 《Java虚拟机原理图解》1.4 class文件里的字段表集合--field字段在class文件里是如何组织的

    0.前言 了解JVM虚拟机原理是每个Java程序猿修炼的必经之路.可是因为JVM虚拟机中有非常多的东西讲述的比較宽泛.在当前接触到的关于JVM虚拟机原理的教程或者博客中,绝大部分都是充斥的文字性的描写 ...

  7. 《Java虚拟机原理图解》 1.2.2、Class文件里的常量池具体解释（上）

    [last updated:2014/11/27] NO1.常量池在class文件的什么位置? 我的上一篇文章<Java虚拟机原理图解> 1.class文件基本组织结构中已经提到了clas ...

  8. 《Java虚拟机原理图解》1.3、class文件里的訪问标志、类索引、父类索引、接口索引集合

    讲完了class文件里的常量池,我们就相当于克服了class文件里最麻烦的模块了.如今,我们来看一下class文件里紧接着常量池后面的几个东西:訪问标志.类索引.父类索引.接口索引集合. 1. 訪问标 ...

  9. 浅析ajax原理与用法

    1 ajax原理 Ajax(Asynchronous JavaScript and XML (异步的JavaScript和XML)),是一种快速创建 动态网页的技术,目的是显示动态局部刷新.通过XML ...

随机推荐

  1. 天天果园，中粮我买网等生鲜APP竞品分析

    奈何对生鲜行业的品类,价格,供应链不熟悉,想先从APP开始来了解生鲜行业和各个生鲜企业,若有不足之处,还望海量,也请帮忙指正. 选取了以下竞品:天天果园,易果生鲜,一米鲜,中粮我买网,爱鲜蜂,每日优鲜 ...

  2. php 批量导入数据的一种思维

    <?php $str="风湿免疫科 消化内科 内分泌科 神经内科 感染内科 心血管内科放疗中心";$arr=explode(' ',$str);$sql="&quo ...

  3. 使用HttpUtils 上传视频文件

    private void shangchuan(){                 //文件的路径        //File file=new File(path);        File fi ...

  4. g++ 编译c文件

    //编译c文件为.o文件 g++ -c virify.c //打包.o文件为.a静态库文件 ar crv libandroid_um36_virify.a virify.o //将静态库.a文件编译进 ...

  5. linux下安装rabbitmq

    1.安装erlang虚拟机 Rabbitmq基于erlang语言开发,所有需要安装erlang虚拟机.安装erlang有两种方式: 第一种:使用yum安装: wget -O /etc/yum.repo ...

  6. Android Studio中有没有类似于Eclipse中的ctrl+2+L的快捷键? \Android Studio快捷键之代码提示

    问:Android Studio中有没有类似于Eclipse中的ctrl+2+L的快捷键? 答:有,as中的快捷键是Ctrl+Alt+V AndroidStudio和Eclipse常用快捷键对比 功能 ...

  7. Android开发之如何保证Service不被杀掉（broadcast+system/app）

    序言 最近项目要实现这样一个效果:运行后,要有一个service始终保持在后台运行,不管用户作出什么操作,都要保证service不被kill,这可真是一个难题.参考了现今各种定制版的系统和安全厂商牛虻 ...

  8. C#入门经典第八章面向对象编程简介-1

    面向对象编程(Object-Oriented Programming,OOP)技术 本章中的OPP实际上是.NET OOP,这里讲的一些技术不能应用于其他OOP环境.

  9. oracle-创建表空间报错 提示ora-01119 ora-27040：无法创建文件

    create tablespace syx datafile 'D:\yangk\oraclespace\syx.ora' size 1000m; 低级错误,这是因为指定路径的路径问题,因为指定的路径 ...

  10. Java中使用poi导入、导出Excel

    一.介绍 当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样子要求:你要把我们的报表直接用Excel打开(电信系统.银行系统).或者是:我们已经习惯用Excel打印.这样在我们实际 ...