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. 1002: A+B for Input-Output Practice (II)

    问题描述: http://acm.wust.edu.cn/problem.php?id=1002&soj=0 代码实现: import java.util.Scanner; public cl ...

  2. Android之界面刷新(invalidate和postInvalidate使用)

    Android中实现view的更新有两组方法,一组是invalidate,另一组是postInvalidate,其中前者是在UI线程自身中使用,而后者在非UI线程中使用. Android提供了Inva ...

  3. Java Web编程的主要组件技术——Servlet

    参考书籍:<J2EE开源编程精要15讲> Servlet是可以处理客户端传来的HTTP请求,并返回响应,由服务器端调用执行,有一定编写规范的Java类. 例如: package test; ...

  4. Exception in thread "main" java.lang.NoClassDefFoundError: UDP_Receive (wrong na me: com/ray/net/UDP_Receive)

    一.事件经过 今晚学习java网络编程,在eclipse中写了两个个java文件,一个发送端UDP_Send2.java,一个接收端UDP_Receive.java.实现发送端键盘录入信息,通过UDP ...

  5. UVA 10537 The Toll! Revisited uva1027 Toll（最短路+数学坑）

    前者之所以叫加强版,就是把uva1027改编了,附加上打印路径罢了. 03年的final题哦!!虽然是水题,但不是我这个只会做图论题的跛子能轻易尝试的——因为有个数学坑. 题意:运送x个货物从a-&g ...

  6. 【再见RMQ】NYOJ-119-士兵杀敌（三），区间内大小差值

    [题目链接:NYOJ-119] 思路:转自 点我 ,讲的挺好. #include <cstdio> #include <math.h> #define max(a,b) ((a ...

  7. CocoaPods一个Objective-C第三方库的管理利器

    转:http://blog.csdn.net/totogo2010/article/details/8198694 介绍: 开发应用的时候第三方的库是不可缺少的,能提高开发的效率. 一些经常用到的库, ...

  8. HDU 3695-Computer Virus on Planet Pandora（ac自动机）

    题意: 给一个母串和多个模式串,求模式串在母串后翻转后的母串出现次数的的总和. 分析: 模板题 /*#include <cstdio> #include <cstring> # ...

  9. Long Dominoes(ZOJ 2563状压dp)

    题意:n*m方格用1*3的方格填充(不能重叠)求有多少种填充方法 分析:先想状态,但想来想去就是觉得不能覆盖所有情况,隔了一天,看看题解,原来要用三进制 0 表示横着放或竖放的最后一行,1表示竖放的中 ...

  10. 软件测试技术（六）——白盒测试之控制流覆盖准则＋Visual Studio 2013单元测试

    一.目标程序 单片机发送的A/D转换结果的整体格式为:[DLE][STX]Message[CHKSUM][DLE][ETX],其中[]括号中的字符为16进制的助记符,并非ASCII码.其中:[DLE] ...