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. VB 语言学习笔记.

    暂时用到,学习学习. 变量声明 Dim 变量名 as 数据类型类型 Set 实例 = new 类名 自定义数据类型 Type 数据类型标识符 域名 As 数据类型; 域名 As 数据类型; 域名 As ...

  2. Java中静态代码块，代码块，构造方法优先级、区别及代码示例

    在项目中遇到了代码块的知识点,跑了下测试,写下结论 代码优先级:静态代码块 -> 构造代码块 -> 构造方法 多个代码块优先级,按照“先定义的代码先执行,后定义的代码后执行”原则执行 静态 ...

  3. poj 1067 取石子游戏( 威佐夫博奕)

    题目:http://poj.org/problem?id=1067 题意:有两堆石子,数量任意,可以不同.游戏开始由两个人轮流取石子.游戏规定,每次有两种不同的取法,一是可以在任意的一堆中取走任意多的 ...

  4. axis : java.lang.NoSuchMethodError

    Hi friends,Iam getting the following error when deploying my app in jboss error.Iam new to axis .can ...

  5. 结构体key

    http://www.cnblogs.com/xpchild/p/3770823.html http://blog.sae.sina.com.cn/archives/3968 实例 http://bl ...

  6. bzoj1499: [NOI2005]瑰丽华尔兹

    dp. 首先我们可以看到每个时间段只能往一个方向转移最多t步(t为时间段的长度),所以我们可以按时间段dp.因为这个前后值互不影响,也不用占用这一维空间就可以省去. 然后每个时间段内是一列一列(行) ...

  7. I.MX6 bq27441 driver porting

    /************************************************************************** * I.MX6 bq27441 driver p ...

  8. hdu 5310 Souvenir (水)

    题意:今天是BestCoder一周年纪念日. 比赛管理员Soda想要给每个参赛者准备一个纪念品. 商店里纪念品的单价是p元, 同时也可以花q元购买纪念品套装, 一个套装里有m个纪念品.今天总共有n个参 ...

  9. Mysql,SqlServer,Oracle主键自动增长的设置

    1.把主键定义为自动增长标识符类型 MySql 在mysql中,如果把表的主键设为auto_increment类型,数据库就会自动为主键赋值.例如: )); insert into customers ...

  10. Java [Leetcode 257]Binary Tree Paths

    题目描述: Given a binary tree, return all root-to-leaf paths. For example, given the following binary tr ...