zoukankan      html  css  js  c++  java

  • Ajax基础原理例子PART.I (附部分参考资料)

    今天向企业I班同学讲了ajax的原理，并做了一个简单的例子，用于实现一个页面无刷新动态显示当前服务器的时间：

    可以看看放在网上的具体例子，访问地址为http://www.koonsoft.net/samples/ajax/now.html，该示例其实包含3个文件：

    文件now.asp的代码如下(注：这个只是用于普通页面与AJAX的比较，不属于Ajax技术应用内容！)：

    <%=now%>

    这是一个传统的asp文件，用于显示服务器的当前时间，如果不是点击刷新图标或者按下F5键，那么页面的内容永远不会刷新。

    文件now_ajax.asp的代码如下：

    <%
            ' 我是用来从服务器生成XML数据的文件
    %>
    <%
        Response.Write(    "<?xml version='1.0' encoding='UTF-8' ?>")
        Response.Write(    "<Z>")
        Response.Write(    "<hosttime>")
        Response.Write(    now)
        Response.Write(    "</hosttime>")
        Response.Write(    "</Z>")
    %>

    这个文件是用来生成并返回一个xml格式的数据文件，其中有一个节点为hosttime，它的值带代表当前服务器的时间。

    最后主要用来呈现的now.html文件内容如下

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
         <head>
          <title>Ajax显示当前服务器时间</title>
          <meta name="generator" content="editplus" />
          <meta name="author" content="" />
          <meta name="keywords" content="" />
          <meta name="description" content="" />
            <script type="text/javascript">
            var xmlHttp;

            // 判断浏览器类型，进而生成合适浏览器的xmlhttprequest对象
        function createXMLHttpRequest()    {
                if (window.ActiveXObject) {
                    // 如果是IE浏览器
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
                else if (window.XMLHttpRequest) {
                    // 如果是非IE浏览器
                xmlHttp = new XMLHttpRequest();
            }            
        }

            /*
        // 获取服务器的时间
        function getHostTime() 
        {    
            createXMLHttpRequest();        
            
            //xmlHttp.open("GET", "http://localhost/ajax/now_ajax.asp?timespan=" + new Date().getTime(),true);
            xmlHttp.open("GET", "http://localhost/ajax/now_ajax.asp?time=" + new Date().getTime(),true);                
            xmlHttp.onreadystatechange = callback;
            xmlHttp.send(null);

        }
            */

            // 当访问url的时候发生的回调
        function callback() {
                if (xmlHttp.readyState == 4) {
                    if (xmlHttp.status == 200) {
                    setTimeout(    "pollServer()", 2000);
                    refreshTime();
                }
                    else
                    {
                    alert(    "您访问的URL不存在!请检查网络.");
                }
            }
        }

            function pollServer() {
            createXMLHttpRequest();
                var url = "http://localhost/ajax/now_ajax.asp?time=" + new Date().getTime();
            xmlHttp.open(    "GET", url, true);
            xmlHttp.onreadystatechange     = callback;
            xmlHttp.send(    null);
        }

            function refreshTime()
            {
            document.getElementById(    "results").innerHTML = xmlHttp.responseText;
        }
             </script>
         </head> 
         <body>
            <span id="results">我是用来显示数据的html</span>
            <input type="button" value='进行httpRequest' onclick="pollServer()"></input>
         </body>
     
    </html>

    具体的例子请见示例页面。交给大家的练习就是课堂上所说的内容，如果不事先自己动手查阅资料，肯定无法完成我布置的练习，希望大家有问题跟贴留言。

    参考资料包括以下内容：
  • 相关阅读:
    MVC+jQuery开发B/S系统②：表单绑定
    插入排序
    笔记：实例管理
    文件读写冲突的解决办法:ReaderWriterLock
    MVC+jQuery数据绑定①：列表绑定（二）
    MVC+jQuery数据绑定①：列表绑定（三）
    非递归求 T(n) = [T(n1),n,T(n1)] 已知T1=[1]
    笔记：契约总结
    面试题：1~ n1 有n个数，是有序的，找出重复的那个数。
    Thread系列——ThreadPool
  • 原文地址：https://www.cnblogs.com/koon/p/1294972.html
Copyright © 2011-2022 走看看