首先, 也是最重要的是互联网上免费的天气预报源:
http://www.webxml.com.cn/WebServices/WeatherWebService.asmx
用浏览器打开这个网页, 可以看到简要的说明, 通过 soap 想这个地址发送 GET 或 POST 请求, 能够得到需要的地区天气预报信息, 每 2.5 个小时更新一次.
第二, 写简单的 html 页面并且向里面添加 js 函数访问上面的页面, 递交请求, 简单的 html 页面如下:
- <html>
- <head>
- <script type="text/javascript">
- function get(){
- //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
- }
- </script>
- </head>
- <body onload="get()">
- <input type=text id="data" name="sd">
- </body>
- </html>
在简单的页面中写 js 函数, 当这个页面被浏览器打开的时候这个 get 函数里面的内容就可以执行. 这里我们 get 函数实现的功能是创造 soap 头, 发送请求, 返回请求, 处理返回的 xml
第三, 添加访问的链接地址:
var URL="http://www.webxml.com.cn/WebServices/WeatherWebService.asmx";
第四, 添加一个变量, 作用为城市:
var city = "北京";
第五, 再创造发送的数据包:
- var data = '<?xml version="1.0"encoding="UTF-8"?>';
- data = data + '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:xsd="http://www.w3.org/2001/XMLSchema"xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">';
- data = data + '<soap:Body>';
- data = data + '<getWeatherbyCityName xmlns="http://WebXml.com.cn/">';
- data = data + '<theCityName>'+city+'</theCityName>';
- data = data + '</getWeatherbyCityName>';
- data = data + '</soap:Body>';
- data = data + '</soap:Envelope>';
第六, 再新建一个 xmlhttp 对象:
- if(window.ActiveXObject)
- {
- xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
- }
- else if(window.XMLHttpRequest)
- {
- xmlhttp=new XMLHttpRequest();
- }
第七, 添加 xmlhttp 的发送方式, 发送头和发送该包.
- xmlhttp.open("POST",URL, false);
- xmlhttp.setRequestHeader("CONTENT-TYPE","text/xml;charset=UTF-8");
- xmlhttp.setRequestHeader ("SOAPAction","http://WebXml.com.cn/getWeatherbyCityName");
- xmlhttp.send(data);
第八, 处理 xmlhttp 返回的内容, 这里使用一个 23 位的数组接受这个字符串,
- var xmlDoc = xmlhttp.responseXML;
- var weather = new Array(23);
- for(i=0;i<23;i++)
- weather[i] = xmlDoc.documentElement.childNodes(0).childNodes(0) .childNodes(0).childNodes(i).text;
最后, 完成的这个字符串, 想怎么处理就怎么处理, 可以 alert, 可以 document.write, 随你. 这里我 alert 一下.
alert(weather);
大功告成了! 当然这个代码好想有很多不兼容的问题, 例如目前不兼容 firefox,
来源: http://www.bubuko.com/infodetail-2601926.html