• [原创]Ajax基本原理讲解


    这段时间在学习ajax,前今天给公司同事讲解了一下基本原理,也随便放在网上给大家参考一下。
    我认为ajax简单的讲就是客户端通过javascript脚本获取服务器端的文本,通过解析返回值,更新部分的网页内容。
    下面结合一个获取QQ天气预报网页,并且对返回值进行处理的例子进行一下讲解。
    行数:解释。
    14:点击按钮开始获取。
    29:显示右上角的“正在加载...”的小区域(仿造gmail)。
    30:创建XMLHTTP,IE的方式,其它的浏览器创建方式不同。
    31:XMLHTTP状态发生变化时调用的回调函数,实现异步调用。
    32:指定调用的URL。
    33:开始调用(可以发送一段XML到服务器端,例子可以查看:用javascript通过MetaWeblog获取Blog )。

    37:xmlhttp的状态:1 装备阶段、2 发送、3 接收、4 所有数据接收完成。
    40:隐藏右上角提示。
    41:服务器返回的状态:200 正常返回。 404 网页不存在 等。

    45:以HTML格式显示获得的网页。
    46:以文本方式显示获得网页源代码。

    49-53:截取部分网页显示。

    58-60:没有正常获取网页的提示。
    ----------------------
    代码下载:weather.zip

     1<HTML>
     2<HEAD>
     3<TITLE> 天气预报 </TITLE>
     4<META NAME="Author" CONTENT="http://pharaoh.cnblogs.com">
     5</HEAD>
     6<BODY>
     7    <!--
     8    XMLHTTP 说明
     9    http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/7924f6be-c035-411f-acd2-79de7a711b38.asp    
    10    -->
    11<div id=load style="display:none; position:absolute;right:0px;top:0px;background:#FF5B5B;border:1px solid">正在加载</div> 
    12
    13<input id=wurl style="500px" value="http://appnews.qq.com/cgi-bin/news_qq_search?city=重庆">
    14<button onclick="GetWeather();">加载</button>
    15
    16<hr />
    17<div id=city>片断</div>
    18<hr />
    19<center><div id="wuhan_weather">数据区域</div></center>
    20<hr />
    21<div id=stext>代码区</div>
    22
    23<script language="javascript">
    24
    25 var xmlhttp ;
    26 function GetWeather()
    27 {
    28         window.status = '';
    29         document.all("load").style.display='';
    30     xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    31     xmlhttp.onreadystatechange = getReady;
    32     xmlhttp.Open("GET",document.getElementById('wurl').value,true);
    33     xmlhttp.Send(null);
    34}

    35function getReady()
    36{
    37    window.status += xmlhttp.readyState+' ';
    38   if(xmlhttp.readyState == 4)
    39   {
    40       document.all("load").style.display='none';
    41     if(xmlhttp.status == 200)
    42     {
    43        var xmlReturn = xmlhttp.responseText;
    44
    45        document.all("wuhan_weather").innerHTML=xmlReturn;
    46        document.all("stext").innerText=xmlReturn;
    47        
    48        
    49        var newText = xmlReturn.replace(/\n+/g,' ');
    50        //document.all("stext").innerText=newText;
    51        var re = /<table .+?table>/ig;
    52        var cityText = newText.match(re);
    53        document.all("city").innerHTML=cityText[2];
    54
    55     }

    56     else
    57     {
    58       document.all("wuhan_weather").innerHTML="<b>出现错误:</b><br />"+new Date()+"<br />"+xmlhttp.statusText+"<br />"+xmlhttp.status;
    59       document.all("stext").innerHTML="代码区";
    60       document.all("city").innerHTML="片断";
    61       
    62     }

    63     xmlhttp = null;
    64   }

    65
    66}

    67
    68
    </script>
    69</BODY>
    70</HTML>
    71
  • 相关阅读:
    poj 2763 Housewife Wind
    hdu 3966 Aragorn's Story
    poj 1655 Balancing Act 求树的重心
    有上下界的网络流问题
    URAL 1277 Cops and Thieves 最小割 无向图点带权点连通度
    ZOJ 2532 Internship 网络流求关键边
    ZOJ 2760 How Many Shortest Path 最大流+floyd求最短路
    SGU 438 The Glorious Karlutka River =) 拆点+动态流+最大流
    怎么样仿写已知网址的网页?
    5-10 公路村村通 (30分)
  • 原文地址:https://www.cnblogs.com/Pharaoh/p/349093.html
Copyright © 2020-2023  润新知