Ajax学习(1)-简单ajax案例

1.什么是Ajax？

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

2.Ajax应用的处理流程：

使用JavaScript脚本创建XMLHttpRequest对象
使用 XMLHttpRequest对象向服务器发送请求，GET和POST请求均可以发送，推荐使用POST
为XMLHttpRequest对象的onreadystatechange，绑定时间监听函数
当服务器响应送回到浏览器时，通过XMLHttpRequest对象获取服务器的相应数据
使用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()
{

    if (xmlreq.readyState == 4) //XMLHttpRequest对象处理状态为4，表示对象读取服务器响应结束
    {

        if (xmlreq.status == 200) //服务器返回状态码为200表示响应完成
        {

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

            //通过innerHTML属性来动态向DIV中填充内容,运行时删除Id后面_x_x的字符
            document.getElementById("mysql").innerHTML = students[0];

            document.getElementById("java").innerHTML = students[1];

            document.getElementById("tomcat").innerHTML = students[2];
        }
    }

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(10)+"$"+random.nextInt(10)+"$"+random.nextInt(10));
%>

页面文件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秒刷新一次。