ajax请求天气预报

最新推荐文章于 2024-04-22 15:07:14 发布

慧、新

最新推荐文章于 2024-04-22 15:07:14 发布

阅读量2.9k

点赞数

分类专栏： js jq

本文链接：https://blog.csdn.net/Endeavor_No1/article/details/78116778

版权

js 同时被 2 个专栏收录

54 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="huixin">
				<input type='text' id="txt" />
				<button>获取天气预报</button>
		</div>
		<script src="../public.js"></script>
		<script>
			document.querySelector('button').οnclick=function(){
				var hometown=document.getElementById('txt').value;//获取输入值
//				alert(hometown);
				ajax({
					url:'1php.php',
					data:{
						city:hometown
					},
					success:function(d){
						var mdj=JSON.parse(d);
						var html='<h2>'+mdj.city+'</h2>';
						html+='<table border=1>';
						for(var i=0;i<mdj.data.forecast.length;i++){
							html+='<tr>';
							for(var j in mdj.data.forecast[i]){//对象要用for...in遍历
								html+='<td>'+mdj.data.forecast[i][j]+'</td>';
							}
							html+='</tr>';
						}
						html+='</table>';
						document.querySelector('.huixin').innerHTML+=html;
						}
				})
			}
		</script>
	</body>
</html>

这个本来是昨天晚上就做了，无奈到JSON.parse()那里突然读不出数据，接口并不是很稳定。用eval也不管用，今早又做了一下，发现能用了。

<?php
	header('content-type:text/html;charset=utf-8');
	$city=isset($_GET['city'])?$_GET['city']:'牡丹江';//获取data中的值，要用中括号，默认牡丹江市的天气预报
	$info=file_get_contents("http://www.sojson.com/open/api/weather/json.shtml?city={$city}");//借口，用双引号自动解析
	echo $info;
?>

2017.11.25

今天有遇到ajax请求，之前的是jq写法但是忘记原生如何写了，复习一下。

var Ajax={
    get: function(url, fn) {
        var obj = new XMLHttpRequest();  // XMLHttpRequest对象用于在后台与服务器交换数据          
        obj.open('GET', url, true);
        obj.onreadystatechange = function() {
            if (obj.readyState == 4 && obj.status == 200 || obj.status == 304) { // readyState == 4说明请求已完成
                fn.call(this, obj.responseText);  //从服务器获得数据
            }
        };
        obj.send();
    },
    post: function (url, data, fn) {         // data应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
        var obj = new XMLHttpRequest();
        obj.open("POST", url, true);
        obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  // 添加http头，发送信息至服务器时内容编码类型
        obj.onreadystatechange = function() {
            if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {  // 304未修改
                fn.call(this, obj.responseText);
            }
        };
        obj.send(data);
    }
}

1. open(method, url, async) 方法需要三个参数:

　 method：发送请求所使用的方法（GET或POST）；与POST相比，GET更简单也更快，并且在大部分情况下都能用；然而，在以下情况中，请使用POST请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

　url：规定服务器端脚本的 URL(该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）)；

　async：规定应当对请求进行异步（true）或同步（false）处理；true是在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理；false是等待服务器响应再执行。

2. send() 方法可将请求送往服务器。

3. onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。

4. readyState：存有服务器响应的状态信息。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

5. responseText：获得字符串形式的响应数据。

6. setRequestHeader()：POST传数据时，用来添加 HTTP 头，然后send(data)，注意data格式；GET发送信息时直接加参数到url上就可以，比如url?a=a1&b=b1。

2017.12.6

1、AJAX 请求数据步骤是什么？传输的数据是用的暗文还是明文？
答：

v ar xhr；
xhr = new XMLHttpRequest()； //创建一个异步对象
xhr.open("Get"， "test.ashx"， true)；//Get 方式括号中的三个参数分别为：1.发送请求的方式 2.
样请求的页面 3.是否异步
//xhr.open("post"，"test.ashx"，true)；
//xhr.setRequestHeader("Content-Type"， "application/x-www-form-urlencoded")； Post
方式发送数据
//这个回调函数主要用来检测服务器是否把数据返回给异步对象
xhr.setRequestHeader("If-Modified-Since"，"0")；//设置浏览器不使用缓存
xhr.onreadystatechange = function () {
if (xhr.readystate == 4) {
//readyState 属 性 指 出 了 XMLHttpRequest 对 象 在 发 送 / 接 收 数 据 过 程 中 所 处 的 几 个 状 态 。
XMLHttpRequest 对象会经历 5 种不同的状态。
//0：未初始化。对象已经创建，但还未初始化，即还没调用 open 方法；
//1：已打开。对象已经创建并初始化，但还未调用 send 方法；
//2：已发送。已经调用 send 方法，但该对象正在等待状态码和头的返回；
//3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整；
//4：已加载。所有数据接收完毕
if(xhr.status==200){ //检测服务器返回的响应报文的状态码是否为 200
alert(xhr.responseText)；//服务器返回的 Response 数据
//解析服务器返回的 jason 格式的数据
var s=xhr.responseText；
var json=eval("("+s+")")；
alert(jason.data)；
}
}；
}；
xhr.send(null)；//异步对象发送请求
//xhr.send("txtName=roger&txtPwd=123")； 以 post 方式发送数据
ajax 中 get 和 post 方式请求数据都是明文的。

Ajax 应用程序的优势在于 ：

1. 通过异步模式，提升了用户体验

2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

2、AJAX最大的特点是什么。

Ajax可以实现动态不刷新（局部刷新）

就是能在不更新整个页面的前提下维护数据。这使得 Web 应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

慧、新

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
ajax请求天气预报

获取天气预报 document.querySelector('button').onclick=function(){ var hometown=document.getElementById('txt').value;//获取输入值// alert(hometown); ajax({ url:'1php.php', data:{
复制链接

扫一扫