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 HandlerThread 使用

    HandlerThread 继承了 Thread,添加了 looper,queue 的支持.可以为 Handler 提供线程服务,并可对 执行的任务进行简单的管理. Handler 默认工作在主线程, ...

  2. 运行Android应用时提示ADB是否存在于指定路径问题

    打开eclipse,选择指定的Android应用工程并Run,提示: [2014-06-28 11:32:26 - LinearLayout] The connectionto adb is down ...

  3. Oracle学习之集合运算

    一.集合运算操作符  UNION:(并集)返回两个集合去掉重复值的所有的记录  UNION ALL:(并集)返回两个集合去掉重复值的所有的记录 INTERSECT:(交集)返回两个集合的所有记录,重复 ...

  4. 通过org.springframework.web.filter.CharacterEncodingFilter定义Spring web请求的编码

    通过类org.springframework.web.filter.CharacterEncodingFilter,定义request和response的编码.具体做法是,在web.xml中定义一个F ...

  5. C#手动回收内存的简单方法

    C#有自动回收内存的机制,但是有时自动回收有一定滞后,需要在变量使用后迅速回收,节约内存,这里介绍一个最简单的方法. 1.先对对象赋值 null; 2.System.GC.Collect(); 代码样 ...

  6. I.MX6 Android netperf

    /***************************************************************************** * I.MX6 Android netpe ...

  7. zoj 2770 Burn the Linked Camp (差分约束系统)

    // 差分约束系统// 火烧连营 // n个点 m条边 每天边约束i到j这些军营的人数 n个兵营都有容量// Si表示前i个军营的总数 那么 1.Si-S(i-1)<=C[i] 这里 建边(i- ...

  8. Struts2中date标签乱码问题解决

    1.出现的问题如下图 八月份以前没有问题,但从九月份开始就会出现乱码问题 2.开始解决 (1)在使用标签的JSP中加入: <%@taglib prefix="s" uri=& ...

  9. 【DFS,双向】NYOJ-20-吝啬的国度

    [题目链接:NYOJ-20] 很巧妙,要好好想想 #include <iostream> #include <stdio.h> #include <vector> ...

  10. [端API] 控件在一个页面里open了，但其他页面打开这个控件怎么关闭

    加在控件的参数里<script type="text/javascript" src="../script/api.js"></script& ...