XMLHttpRequest异步调用实现调用新浪天气预报页面

最新推荐文章于 2022-08-03 11:25:22 发布
最新推荐文章于 2022-08-03 11:25:22 发布
阅读量178 收藏
点赞数
文章标签： xhtml php c#
原文链接：http://www.cnblogs.com/accpxcb/archive/2007/12/15/AJax_weather-forecast.html
版权


没学习AJAX之前,最在想如何调用别人网页的内容,页且还要过滤其它不需要的内容,如何实现了,学到异步调用后,就可以实现了,闲话少话,先看代码;

//JScript.js

 1 //  JScript 文件
 2
 3      var  xmlhttp;
  4      function  getWeather()
  5      {
 6        //获取用户输入的城市名称
 7          var mycity=document.getElementById("txtCity").value;
 8        //创建异步对象
 9          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
10        //加载服务器-注意URL参数的使用
11        
12          xmlhttp.Open("GET","http://php.weather.sina.com.cn/search.php?city="+mycity,true)
13          xmlhttp.onreadystatechange=stateChange;
14       //发送请求-无参数
15          xmlhttp.Send();
16    }
17      function  stateChange()
 18      {
19       if(xmlhttp.readystate==4 && xmlhttp.status==200)
20       {
21          //获取所有返回的数据
22          var data=bytes2BSTR(xmlhttp.ResponseBody);
23         
24          //过滤自己需要的数据
25          var begin=data.indexOf("天气状况 begin");
26          var end=data.indexOf("天气状况 end");
27          var weather=data.substring(begin+15,end);
28          //填充天气内容
29          document.getElementById("divweather").innerHTML=weather;
30          //显示结果
31          document.getElementById("divweather").style.visibility="visible";
32       }
33    }

 //VBScript.vbs

 1 function  bytes2BSTR(vIn) 
  2     dim  strReturn,i,ThisCharCode,innerCode,Hight8,Low8,NextCharCode 
  3    strReturn = ""  
  4     for  i = 1   to  LenB(vIn) 
  5    ThisCharCode = AscB(MidB(vIn,i, 1 )) 
  6     if  ThisCharCode <& H80  Then  
  7    strReturn = strReturn  &   Chr (ThisCharCode) 
  8     else  
  9    NextCharCode = AscB(MidB(vIn,i + 1 , 1 )) 
 10    strReturn = strReturn & Chr ( CLng (ThisCharCode) *& H100 + CInt (NextCharCode)) 
 11    i = i + 1  
 12     end   if  
 13     next  
 14    bytes2BSTR = strReturn 
 15     end function  
 16

 

Code
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" 

Inherits="_Default" %>

<!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 runat="server">
    <title>XmlHttpRequest异步调用实现天气预报的调用</title>
/**//* 关键的两句先进行引用写好的异步调用脚本*/
    <script type="text/vbscript" src="VBScript.vbs"></script>
    <script type="text/javascript" src="JScript.js"></script>

</head>
<body>
    <form id="form1" runat="server">
        <table style="width: 627px; height: 204px">
            <tr height="30%">
                <td >
                    输入城市</td>
                <td >
                    <asp:TextBox ID="txtCity" runat="server" Text="武

汉"></asp:TextBox></td>
            </tr>
            <tr  height="30%">
                <td >
                </td>
                <td >
                    <input id="btnWeather"  type="button" value="天气情况" 

onclick="getWeather()" /></td>
            </tr>
             <tr  height="40%">
             <td colspan="2"  style="height: 31px">
              <div id="divweather"></div> 
              </td> </tr>  
            </table>
    </form>
</body>
</html>
有不对写的不好的地方 请园子里的各位高手多多指教,提
输入城市名称后，点击按钮显示如下结果:

转载于:https://www.cnblogs.com/accpxcb/archive/2007/12/15/AJax_weather-forecast.html

a687690727
关注
分享XmlHttpRequest调用Webservice的一点心得
11-30
首先，因为JSON对于JS的便利性，考虑通过JSON来请求和返回数据。在JS中实例化一个xmlHttpRequest对象，然后根据网上的说明POST的地址为：asmx页面地址/Web方法名。在RequestHeader中设置Content-Type为application/json; charset=utf-8，SOAPAction设为Web方法名。Web方法的参数用JSON格式send出去。 代码如下： 代码如下: function getXmlHttp() { var xmlHttp; if (window.XMLHttpRequest) { // code for IE7+, Fire
XMLHTTPRequest对象详解与实例
康董--致力于JavaScript
06-15 639
<br />XMLHTTPRequest是由一组方法和属性组成的对像．是ajax技术的核心．所有的异步交互和所谓的局部刷新都建立在XMLHTTPRequest基础之上．XMLHTTPRequest是由微软公司发明，最初被应用在IE5.0．但经过发展几乎所有的现代浏览器都支持XMLHTTPRequest对像，不过在不同的浏览器中创建该对像的方法略有不同．利用XMLHTTPRequest神奇之处就是无需刷新网页便可更改网页中的内容．如果你想要在你的网页中实现这种效果，就必须利用JavaScript或Jscrip
JS异步Ajax请求查看天气预报小案例
qq_44241861的博客
10-17 1471
异步Ajax请求查看天气预报小案例 需要一个天气预报的后台接口：http://wthrcdn.etouch.cn/weather_mini?city=XX 通过Ajax访问后台 获取后台数据 后台JSON数据格式的解析读取操作 动态添加多个嵌套样式标签展示到前台时，采用字符串拼接与变量替换的方法 `$(变量名)` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> &l
JQuery-Ajax异步请求获取天气预报（$.get）
weixin_41574976的博客
03-06 640
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery-get</title> <!--武汉5天天气预报--> <script src="js/jquery.min.js">...
数据大屏显示天气情况，获取实时的天气信息(js进行异步请求获取响应的内容)
yolo_link的博客
08-03 2301
话不多说，直接看效果：一个基本的数据大屏，一般都是要展示时间信息，这不必多说，大家都会。但是实时的天气数据我们怎么显示呢？权威的就是中央气象台的数据，那我们该怎样拿到这个数据嘞？项目内使用链接获取信息 js进行异步请求获取响应的内容——>>> 首先创建 XMLHttpRequest 对象： **XMLHttpRequest 用于在后台与服务器交换数据。**...
javascript、jQuery调用webservice实现的天气预报
03-07
在这个项目中，它们被用来调用一个 Web Service 来获取并展示天气预报数据。Web Service 是一种通过网络提供服务的应用程序，通常使用 SOAP（简单对象访问协议）或 RESTful（表述性状态转移）接口。在这个实例中，...
Ajax客户端异步调用服务端的实现方法(js调用cs文件)
10-18
通过以上步骤，我们可以实现Ajax客户端异步调用服务端的C#方法。这种方式提高了用户体验，因为它允许在不刷新整个页面的情况下更新部分内容。在实际应用中，还需要考虑错误处理、安全性以及性能优化等问题。此外，...
天气预报_HTML静态页面_带时钟.zip
06-19
开发者可能使用JavaScript发送异步请求（如`fetch`或`XMLHttpRequest`）获取实时天气数据，并将其显示在页面上。 8. **网页部署**: 将这个HTML页面部署到Web服务器上，用户可以通过浏览器访问。这可能涉及FTP上传、...
JavaScript 异步调用框架 (Part 1 - 问题 & 场景)
10-29
在JavaScript开发中，异步调用是一个核心概念，尤其是在Ajax应用中，通过XMLHttpRequest进行数据交互是常见的操作。然而，JavaScript作为单线程语言，其异步调用的机制与传统同步编程存在较大差异。在异步调用中，...
不使用XMLHttpRequest实现异步加载 Iframe和script
09-05
本文将探讨如何不依赖XMLHttpRequest来实现异步加载，并给出具体示例。 首先，XMLHttpRequest（XHR）是JavaScript中的一个对象，它允许我们与服务器进行异步数据交换。然而，当处理某些特定场景时，如加载外部HTML...
js 实现 使用XMLHTTP获取天气预报
03-30
js 实现 使用XMLHTTP获取天气预报! 值得下载看看!资源免费,大家分享!!
VB XMLHTTP 异步调用
大鸟的专栏
07-17 1157
例 Set XmlHttp2 = CreateObject("Msxml2.XMLHTTP") XmlHttp2.Open "GET", Url, True XmlHttp2.setRequestHeader "CONTENT-TYPE", "application/json;charset=utf-8" XmlHttp2.send PostMsg 1、使用MSXML2.XMLHTTP open中参数设置为True 2、onreadystatechange 进行设置 方式有：1）使用Timer..
wininet,winhttp,xmlhttprequest,ServerXmlHttpRequest区别
monkey_me的博客
03-10 1673
wininet,winhttp,xmlhttprequest,ServerXmlHttpRequest各版本区别 一、标准API接口WinINet(Microsoft Windows Internet)和WinHTTP(Microsoft Windows HTTP) 实现Http访问，微软提供了二套API：WinINet, WinHTTP（分别封装于system32目录下的wi
XMLHTTPRequest的属性和方法简介
鸟儿飞的专栏
07-26 1188
1、XMLHTTPRequest对象什么是？最通用的定义为：XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。（这个功能正是AJAX的一大特点之一：））来自MSDN的解释：XmlHttp提供客户端同http服务器通讯的协议。客户端
XMLHttpRequest的请求方法
weixin_42119552的博客
07-27 1683
XMLHttpRequest 等级 2 介绍 2013年06月21日 10:59:27 苍月代表我 阅读数 718 介绍 XMLHttpRequest 可以让开发者发送 HTTP 与 HTTPS 请求并在不重載当前页面的情况下更动页面。一般常用的两个使用情景是：提交表单与取得更多内容。 在之前的 XMLHttpRequest 中，请求的内容只能是文本、HTML 或 XML。要发送索引键值配对需要使...
你真的会使用XMLHttpRequest吗？
weixin_33885676的博客
01-17 3641
看到标题时，有些同学可能会想：“我已经用xhr成功地发过很多个Ajax请求了，对它的基本操作已经算挺熟练了。” 我之前的想法和你们一样，直到最近我使用xhr时踩了不少坑儿，我才突然发现其实自己并不够了解xhr，我知道的只是最最基本的使用。于是我决定好好地研究一番xhr的真面目，可拜读了不少博客后都不甚满意，于是我决定认真阅读一遍W3C的X...
转载---XMLHTTP Request 的属性和方法简介
weixin_30455661的博客
05-05 176
转载---XMLHTTP Request 的属性和方法简介 由于现在在公司负责制作标准的静态页面，为了增强客户体验，所以经常要做些AJAX效果，也学你也和我一样在，学习AJAX。而设计AJAX时使用的一个重要的技术（工具）就是XMLHTTPRequest对象了。这里海啸把我学习XMLHTTPRequest对象的一点资料拿出来跟大家一起分享。文中...
使用xmlhttprequest对象完成异步调用
最新发布
03-16
XMLHttpRequest对象可以用于异步调用，它可以向服务器发送请求并接收响应，而不需要刷新整个页面。通过使用XMLHttpRequest对象，可以实现更加流畅的用户体验，同时也可以提高网站的性能和响应速度。在使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值