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. gdb 基本命令

    backtrace(或bt) 查看各级函数调用及参数 finish 连续运行到当前函数返回为止,然后停下来等待命令 frame(或f) 帧编号 选择栈帧 info(或i) locals 查看当前栈帧局 ...

  2. testNG小试牛刀

    testNG是一个测试框架,其灵感来自JUnit和NUnit的,但引入了一些新的功能,使其功能更强大,使用更方便. testNG是一个开源自动化测试框架:testNG表示下一代. testNG是类似于 ...

  3. css实现缩进无限嵌套

    使用css实现缩进带背景无限嵌套,支持Ie6,代码如下: <!DOCTYPE html> <html lang="en"> <head> < ...

  4. gulp自动刷新插件

    gulp自动刷新的插件很多,但是感觉最好用的还是 browser-sync 插件.如果不想用命令行,也可以使用 browser-sync界面工具 先安装 browser-sync 插件: npm in ...

  5. devDependencies和dependencies的区别

    我们在使用npm install 安装模块或插件的时候,有两种命令把他们写入到 package.json 文件里面去,比如: --save-dev --save 在 package.json 文件里面 ...

  6. Web内容管理系统 Magnolia 安装使用-挖掘优良的架构（2）

    在Windows上安装社区版  tomcat集成版 Magnolia CMS社区版本为免费发行,不需要任何GNU通用公共许可协议(第3版)条款下的授权(这个许可协议允许您在特定条款和条件下,重新分配和 ...

  7. [POJ 3498] March of the Penguins

    March of the Penguins Time Limit: 8000MS   Memory Limit: 65536K Total Submissions: 4378   Accepted:  ...

  8. cocos2d-x中的Jni使用（C++与Andriod方法互调）

    作者:何卫 转载请注明,原文链接:http://www.cnblogs.com/hewei2012/p/3376616.html 前提条件: 1.操作的游戏工程和cocos2d_x游戏引擎是一个目录的 ...

  9. Android 仿百度网页音乐播放器圆形图片转圈播放效果

    百度网页音乐播放器的效果  如下 : http://www.baidu.com/baidu?word=%E4%B8%80%E7%9B%B4%E5%BE%88%E5%AE%89%E9%9D%99& ...

  10. 【转】u盘不显示盘符

    转自http://jingyan.baidu.com/article/f3ad7d0fd0793e09c3345b31.html 我的情况: 电脑只有一个c盘,插入u盘,u盘的盘符为d. 弹出u盘,但 ...