1.什么是Ajax？

  • Ajax是Asynchronous JavaScript and XML 的缩写，即异步的Javascript和XML。
  • 可以使用Ajax在不加载整个网页的情况下更新部分网页信息。
  • Ajax以XMLHttpRequest对象为核心，结合了Javascript、DOM、CSS的新技术。
  • Ajax的主要特征是异步发送请求以及动态加载相应数据。

2.Ajax应用的处理流程：

  1. 使用JavaScript脚本创建XMLHttpRequest对象
  2. 使用  XMLHttpRequest对象向服务器发送请求，GET和POST请求均可以发送，推荐使用POST
  3. 为XMLHttpRequest对象的onreadystatechange，绑定时间监听函数
  4. 当服务器响应送回到浏览器时，通过XMLHttpRequest对象获取服务器的相应数据
  5. 使用JavaScript通过DOM动态更新Html页面，也可为服务器响应数据增加CSS样式

3.下面是一个使用简单的Ajax的小例子：

首先使用JavaScript创建XMLHttpRequest对象，下面是创建XML对象的JS代码：

 JavaScript Code 
1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17
var xmlreq;

    

    function creatXMLHttpRequest(){

        if(window.XMLHttpRequest){

            xmlreq=new XMLHttpRequest();  //IE7以上版本及其它浏览器

        }else if(window.ActiveXObject){

            try {

                xmlreq=new ActiveXObject("Msxml2.XMLHTTP");

            } catch (e) {

                try {

                    xmlreq=new ActiveXObject("Micorosoft.XMLHTTP");//IE5、IE6

                } catch (e) {

                }

            }

        }

        

    }

然后是使用XMLHttpRequest对象向服务器发送请求，代码如下：

 JavaScript Code 
1

2

3

4

5

6

7

8

9

10

11

12

13

14
function sendRequest()

{

    

    creatXMLHttpRequest(); //创建XMLHttpRequest对象

    

    var uri = "index.jsp"; //定义请求url

    

    xmlreq.open("POST", uri, true); //打开与服务器的连接

    

    xmlreq.onreadystatechange = changeProcess; //定义XMLHttpRequest对象的状态改变时的处理函数

    

    xmlreq.send(null); //发送请求

}

定义XMLHttpRequest状态改变时的事件处理函数（回调函数），代码如下：

 JavaScript Code 
1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22
function changeProcess()

{

    

    ) //XMLHttpRequest对象处理状态为4，表示对象读取服务器响应结束

    {

        

        ) //服务器返回状态码为200表示响应完成

        {

            

            var students = xmlreq.responseText.split("$");

            

            //通过innerHTML属性来动态向DIV中填充内容,运行时删除Id后面_x_x的字符

            document.getElementById(];

            

            document.getElementById(];

            

            document.getElementById(];        

        }    

    }
           setInterval(sendRequest, 3000);

服务器对请求处理的jsp文件为index.jsp

 JSP Code 
1

2

3

4

5

6
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>

<%@ page import="java.util.Random" %>

<%

Random random=new Random(System.currentTimeMillis());

out.println(random.nextInt()+)+));

%>

页面文件ajax1.html，并且将上述的JavaScript代码均放入此文件中。

 html Code 
1

2

3

4

5

6
<body>

     mysql的学习人数是：<div id="mysql"></div>

     java的学习人数是：<div id="java"></div>

     Tomcat的学习人数是：<div id="tomcat"></div>

</body>

至此，打开服务器，访问：localhost：8080/工程名/ajax1.html

便可以看到，在页面上的人数会每隔3秒刷新一次。

Ajax学习(1)-简单ajax案例的更多相关文章

  1. 《ajax学习》之ajax+JavaScript事件验证用户名是否可注册

    当用户注册时,服务器数据库需要对用户输入的用户信息(以用户名为例子)进行验证,在不刷新页面的情况下又需要页面和服务器进行数据请求,最好的方法是用ajax异步请求. 一.实现思路: 1.用户输入信息 2 ...

  2. 基于ThinkPHP3.23的简单ajax登陆案例

    本文将给小伙伴们做一个基于ThinkPHP3.2.的简单ajax登陆demo.闲话不多说.直接进入正文吧. 可能有些小伙伴认为TP自带的跳转页面挺好,但是站在网站安全的角度来说,我们不应该让会员看到任 ...

  3. $.ajax()方法详解 ajax之async属性 【原创】详细案例解剖——浅谈Redis缓存的常用5种方式（String，Hash，List，set，SetSorted ）

    $.ajax()方法详解   jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Str ...

  4. Ajax学习重点总结

    1.什么是AJAX AJAX=Asynchronous JavaScript and XML(异步的JavaScript和XML). AJAX是在不重新加载整个页面的情况下,后台与服务器交换数据并更新 ...

  5. 基于PHP的AJAX学习笔记（教程）

    本文转载自:http://www.softeng.cn/?p=107 这是本人在学习ajax过程所做的笔记,通过本笔记的学习,可以完成ajax的快速入门.本笔记前端分别使用原生态的javascript ...

  6. Ajax学习资源大全[本来是转载的,但是现在我增加了很多]

    本欲放转载区,但是这样一文章放那里基本是没有用的,帮助不了任何人!所以放新手了!! 我一般非经典或者自己用不上不转载,所以如果你不幸看见了的话,恰恰你又对AJAX有兴趣的话不防看下,也许对你有用的!! ...

  7. Ajax 学习笔记

    什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味 ...

  8. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  9. Python学习---基于JQuery的Ajax实现[快捷+底层$.ajax]

    快捷API <1>$.get(url, [data], [callback], [type]) <2>$.post(url, [data], [callback], [type ...

随机推荐

  1. Android新版本SDK打开旧版本项目报错解决

    1.Description Resource Path Location Type Unable to resolve target 'android-19 解决:打开project.properti ...

  2. 【C#设计模式——创建型模式】简单工场模式

    进入码农行列也有一年半载了,仍然感觉自己混混沌沌,无所事事,无所作为,,,想想都下气,下气归下气,仍要奋起潜行,像愤怒的小鸟一边又一遍的冲向猪头也好,像蜗牛一样往前蹭也罢,总之要有蚂蚁啃骨头的精神!! ...

  3. RecyclerView(6)自定义RecyclerView.LayoutManager

    A LayoutManager is responsible for measuring and positioning item views within a RecyclerView as wel ...

  4. Failed to initialize monitor Thread: Unable to establish loopback connection解决方法

    原因一: android中出现该异常的原因,是pid产生了冲突,将服务中的windows Firewall 服务停用就行了 原因二: http://stackoverflow.com/question ...

  5. windows2003 iis6.0站点打不开，找不到服务器或 DNS 错误。

    最近服务器经常出现打不开网站的现象,有时出现在上午,有时出现在中午,几乎天天都会出现一次,出现问题时,无论是回收程序池还是重启IIS或者关闭其它一些可能有影响的服务,都不能解决问题.网站打不开时,有如 ...

  6. Codeforces Round #206 (Div. 1)B(记忆化）

    这题刚开始理解错题意了 以为只能往右和下走 这题挺好的 看题解看了N久啊 二维的DP 第一维表示走到第几步 可以画一个正方形 以左上角斜着划线 第i步走的点只能是第i条线上的点 而dp的第二维 就表示 ...

  7. LA 3029 - City Game （简单扫描线）

    题目链接 题意:给一个m*n的矩阵, 其中一些格子是空地(F), 其他是障碍(R).找一个全部由F 组成的面积最大的子矩阵, 输出其面积乘以3的结果. 思路:如果用枚举的方法,时间复杂度是O(m^2 ...

  8. Android布局详解之一：FrameLayout

      原创文章,如有转载,请注明出处:http://blog.csdn.net/yihui823/article/details/6702273 FrameLayout是最简单的布局了.所有放在布局里的 ...

  9. phpDoc 注释案例说明

    <?php /** * start page for webaccess * * PHP version 5 * * @category PHP * @package PSI_Web * @au ...

  10. Spring学习之Ioc

    Ioc原理讲解:http://www.cnblogs.com/xdp-gacl/p/4249939.html Ioc IoC是一种编程思想,由主动编程变为被动接收. 也就是说,所有的组件都是被动的(p ...