ajax初步

  Ajax并非是一种新的技术么日式由早期已经存在的XMlHttpRequest,Javasctipt,HTML,CSS,XML组成的。
(1)XmlHttpRequest:XmlHttpRequest对象允许浏览器通过它与Web服务器进行通讯。这个对象为页面提供了客户端和服务
器的一部通信功能。在Internet Explore中,这个功能是由MSXML ActiveX组件提供:在FireFox中,这个功能由一个叫做
XmlHttpRequest的对象来提供。在编写Ajax代码时,需要判断浏览器类型,并为不同的浏览器提供不同的XmlHttpRequest
调用代码。
(2)JavaScript:所有浏览器都支持JavaScript脚本语言。Ajax使用JavaScript脚本语言来操作XmlHttpRequest对象,操作
DOM和CSS等。
(3)DHTML/DOM:能正确显示Ajax应用程序页面的浏览器必须要能通过DOM动态更新HTML元素。
(4)使用XML解析技术,虽然也能使用HTML或其他格式在客户端和服务器之间传递数据,不过XML显然是标准的做法,并且使
用XML容易结构化和层次化。
XmlHttpRequest可以说是Ajax核心中的核心,通过它可以和服务器通信。例如下面是一个异步获取服务器时间:
index.jsp


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>XmlHttpRequest Demo</title>
    <script type ="text/javascript" language ="javascript" >
        var req; 
//创建xmlhttprequest
        function creatReq() 
        {
            var url="ajaxserver.jsp"; 
            if(window.XMLHttpRequest) 
            {
                req=new XMLHttpRequest();
            }
            else 
            {
                alert("你的浏览器不支持,换一个吧!");
            }
            if(req) 
            {
                req.open("GET",url,true); //与服务端建立连接(请求方式post或get,地址,true表示异步)
                req.send(null); 
                req.onreadystatechange = callback; //指定回调函数
                
            }
        }
        
        function callback() 
        {
            if(req.readyState==4) //请求状态为4表示成功
            {
                if(req.status==200)
                {
                    Dispaly(); //显示数据
                }
                else 
                {
                    alert("服务端返回状态" + req.statusText);
                }
            }
            else 
            {
                document .getElementById ("myTime").innerHTML ="数据加载中";
            }
        }
        
        function Dispaly() 
        {
            document.getElementById ("myTime").innerHTML =req.responseText;
        }
        
    </script>
</head>
<body>
    <div id="myTime"></div>
        
    <input id="Button1" type="button" value="时间"  onclick ="creatReq();"/>
</body>
</html>


index.jsp中的JavaScript代码将向服务器发送请求,并获取ajaxserver.jsp发出的数据显示在index.jsp页面。
ajaxserver.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head> 
    <title>My JSP 'ajaxserver.jsp' starting page</title>
  </head>
  
  <body>
   hello,ajax
    <%
  Date d = new Date();
    out.println(d.toLocaleString());
    %>
  </body>

</html>





你可能感兴趣的:(ajax初步)