<!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.61、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 方式请求数据都是明文的。