• [原创]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
  • 相关阅读:
    javascript小记
    好看的echart的词云效果(wordCloud)
    工作中经常用到的git的简单操作记录
    积累就是提升之浅谈分时函数
    有意思的面试小试题
    分享张鑫旭大神的,纯css打字小技巧,我顺便收藏一下
    模仿也是提高,纯css小技巧实现头部进度条
    推荐好用的css调试工具,两个
    There appears to be trouble with your network connection. Retrying
    Enter passphrase for key ‘/root/.ssh/id_rsa’ : git push 重复输入密码的问题
  • 原文地址:https://www.cnblogs.com/Pharaoh/p/349093.html
Copyright © 2020-2023  润新知