实时更新的天气预报页面

这是一个实时更新的天气预报界面。

先说一下思路:由于我请求数据采用的是ajax的方式,ajax是不能直接想聚合数据申请数据的。所以这里通过服务器的php获取聚合数据里的天气的信息  再由我的页面想php申请数据

1.创建一个button 点击的时候开始数据的请求,具体步骤分为以下五部:

  var  btn=document.queryselector("button")获取页面的button元素,为元素添加一个点击方法

    btn.onclike=function(){

var cx=new XMLHttpRequest();定义一个AJAX

cx.open("GET","http://192.168.3.5/tianqi/index.php?cityname="+inputdiv.value+"&key=df0035098882d554ba70162e871f5e34")

这里的key是从聚合数据申请的

数据装入,这里的传输方式有两种 get和post  get方式会将我们数据的数据拼接到网页的url中,很不安全并且不能传输图片 视频 音乐等类型的文件。所以不推荐使用,一般都是用post  但是不是一定的 。具体还是看需求。

前后端数据传输的方式有两种ajax和form两种  submit只有在form中才有效  ajax可以实现页面不刷新的,form点击登录成功之后可以实现跳转

   post的传输方式:

cx.open("[POST","http://192.168.3.5/tianqi/index.php","true")

这里的true指的是是否异步,可以不写 一般来说不写的话默认是异步。

存在异步和同步两种方式,一般代表可以多线程可以同时操作,而同步指的是请求发出以后,要上一个请求执行完成后才会执行下一个请求,会出现阻塞情况。

将数据发送出去

cx.send() post的发送方式 cx.send(cityname="+inputdiv.value)   

请求成功的话服务器会返回数据,不成功的话服务器也会将错误的代码发回,需要我们查阅聚合数据的相关文档查明失败的原因


请求发送回来的数据是一大段的转码后字符串,需要我们将字符串转JSON格式的数据。就是JSON.parse的方法。

然后将我们需要的数据提取出来放到页面当中。




}




Document























你可能感兴趣的:(web)