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

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()
{
    
    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秒刷新一次。

你可能感兴趣的:(JavaScript,js,Ajax,XMLhttpREquest)