JSON
什么是json
json: javascript object notation（js对象符号）
其是一种数据交换格式，xml也是数据交换格式，json对比xml的生成和处理要更加方便。
因此在许多领域，json正逐步取代xml的使用。
天气预报接口数据需要通过一定的格式组织并提供出来，该数据格式最好还是各个语言都可以识别的，因此xml或json就被应用上了。
json的使用
javascript里边json体现
json在javascript里边就是字面量对象
var obj = {名称:值，名称:值，名称:function(){}}
通过php生成json信息
json_encode(数组/对象)------------>生成json信息
<?php
//PHP中生成json信息
//json_encode(数组/对象)
$color = array('red','green','blue');//索引数组
echo json_encode($color), '<br/>';//["red","green","blue"]
$animal = array('east'=>'tiger','north'=>'wolf','south'=>'monkey');//关联数组
echo json_encode($animal),'<br/>';//{"east":"tiger","north":"wolf","south":"monkey"}
//索引关联数组
$animal2 = array('east'=>'tiger','north'=>'wolf','duck','south'=>'monkey');
echo json_encode($animal2),'<br/>';//{"east":"tiger","north":"wolf","0":"duck","south":"monkey"}
//【对象生成json信息】
class Person{
public $addr = 'beijing';
public $height = 170;
public function study(){
echo '好好学习';
}
}
$tom = new Person();
echo json_encode($tom);//{"addr":"beijing","height":170}
php处理json信息
json_decode(json信息); 反编码json信息
对json字符串信息进行反编码，变为当前语言可以识别的信息。
<?php
//反编码json信息
//json_decode(json字符串,true-arr/false-obj)
$animal = array('east'=>'tiger','north'=>'wolf','south'=>'mokdey');//关联数组
$j_animal = json_encode($animal);
$aml = json_decode($j_animal,true);
var_dump($aml);//array(3) { ["east"]=> string(5) "tiger" ["north"]=> string(4) "wolf" ["south"]=> string(6) "mokdey" }
echo '<br/>';
//$j_str = "{'first':'hanmeimei','second':'lilie','three':'baoqiang'}";//NULL 反编码失败，双引号的原因
$j_str = '{"first":"hanmeimei","second":"lilie","three":"baoqiang"}';
var_dump(json_decode($j_str,false));//object(stdClass)#1 (3) { ["first"]=> string(9) "hanmeimei" ["second"]=> string(5) "lilie" ["three"]=> string(8) "baoqiang" }javascript接收处理json信息
通过eval()把接收的json字符串变成真实的对象信息
03.php
<?php
//提供接口的天气信息
$weather = array('addr'=>'北京','temp'=>'9-22','wind'=>'north4-5');
echo json_encode($weather);<html>
<head>
<meta charset='utf-8' />
<script type='text/javascript'>
function show(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
//通过eval()把接收的json字符串变成真实的对象信息
eval('var info=' + xhr.responseText);
var str = '地址：' + info.addr + ' 温度：' + info.temp + ' 风向：' + info.wind;
document.getElementsByTagName('div')[0].innerHTML = str;
}
}
xhr.open('get','./03.php');
xhr.send(null);
}
window.onload = function(){
show();
}
</script>
</head>
<body>
<div></div>
</body>
</html>json改造ajax无刷新分页
ajax的每次请求都要从服务器获得三部分信息，对 带宽、服务器资源、用户等待时间 等资源都要占据三份，我们要做优化：把不发生变化的css样式、html标签 放到客户端手动生成，把服务器端的工作给减轻。
那么我们的数据就可以通过json格式传递回来(之前是html标签格式)
json使用的好处：
ajax的使用是对 带宽、用户等待时间、服务器资源 有节省
json的使用是在ajax的基础上对 带宽、用户等待时间、服务器资源 的进一步去节省。
无刷新表单信息提交
收集表单信息
利用新技术FormData表单数据对象可以实现快速收集表单信息。
FormData是html5的新技术，在主流浏览器都可以正常使用。
04.php
<?php
//接收客户单传递过来的form表单信息
print_r($_POST);<html>
<head>
<title>ajax+dom 实现无刷新提交</title>
<meta charset='utf-8' />
<script type='text/javascript'>
window.onload = function(){
var fm = document.getElementsByTagName('form')[0];
fm.onsubmit = function(){
//dom收集表单信息
var nm = document.getElementById('username').value;
var pwd = document.getElementById('password').value;
var email = document.getElementById('email').value;
var info = 'name='+nm+'&pass='+pwd+'&email='+email;
//ajax 传递表单信息
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
alert(xhr.responseText);
}
}
xhr.open('post','./04.php');
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send(info);
return false;//阻止浏览器提交跳转
}
}
</script>
</head>
<body>
<form method='post' action=''>
<input type='text' id='username' name='username' /><br/>
<input type='text' id='password' name='password' /><br/>
<input type='text' id='email' name='email' /><br/>
<input type='submit' value='提交'>
</form>
</body>
</html>利用FormData快速收集(ie测试有问题，有时间再继续)
<script type='text/javascript'>
window.onload = function(){
var fm = document.getElementsByTagName('form')[0];
fm.onsubmit = function(){
//dom收集表单信息
//利用 FormData 快速收集
//实例化表单数据对象，同时收集fm的表单信息
var fd = new FormData(fm);//实例化对象
//fd对象内部有收集的fm表单域信息
//ajax 传递表单信息
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
alert(xhr.responseText);
}
}
xhr.open('post','./04.php');
//使用FormData不需要设置header头
//xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
console.log(fd);
xhr.send(fd);
return false;//阻止浏览器提交跳转
}
}
</script>ajax实现附件上传
<form enctype=”multipart/form-data”>
<input type=”file”>
服务器端：$_FILES接收附件信息(name/error/size/type/tmp_name)
move_uploaded_file(临时附件，真实附件路径名);
收集附件信息：
dom方式只可以收集普通的表单域信息，并且浏览器由于安全方面的限制也禁止通过javascript语言操作本地文件。
可以利用FormData实现附件信息的收集，普通表单域 和 上传文件域 均可以收集。
05.php
<?php
//echo "post:";
//print_r($_POST);
//echo "file:";
//print_r($_FILES);
//$_FILES['user_pic']['error']
//0->ok 1->大小超过php.ini限制 2->大小超过MAX_FILE_SIZE限制
//3->附件只上传了一部分(不完整) 4->没有上传附件
if($_FILES['user_pic']['error']>0){
exit('上传附件有问题，有可能没有附件');
}
//服务器保存附件名字为本身名字
//本地文件------>上传(php程序处理)------>服务器
//本地文件名字的 字符集 gb2312
//php程序的 字符集 utf-8--->gb2312
// (在程序里边把utf-8编码的附件名字 转码为 gb2312)
//服务器的 字符集 gb2312
$name = $_FILES['user_pic']['name'];
$name = iconv('UTF-8','GB2312',$name); //$name的编码由utf-8---变为--->gb2312
$path = "./upload/";
//附件上传逻辑
//move_uploaded_file(临时路径名，真实路径名);
if(move_uploaded_file($_FILES['user_pic']['tmp_name'],$path.$name))
echo "success";
else
echo "fail";
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
window.onload = function(){
var fm = document.getElementsByTagName('form')[0];
fm.onsubmit = function(){
//利用FormData实现form表单信息收集
var fd = new FormData(fm);
//fd 内部会把普通表单域 和 上传文件域 的信息都收集
//ajax传递表单信息
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
alert(xhr.responseText);
}
}
//设置监听事件ajax.upload.onprogress
xhr.upload.onprogress = function(evt){
//感知附件上传情况,利用事件对象感知
var loaded = evt.loaded;
var total = evt.total;
var per = Math.floor((loaded/total)*100)+"%";
document.getElementById('son').innerHTML = per;
document.getElementById('son').style.width = per;
}
xhr.open('post','./05.php');
xhr.send(fd);
return false;//组织浏览器提交
}
}
</script>
<style type="text/css">
#pat {width:430px;height:40px; border:5px solid blue;}
#son {width:0;height:100%; background-color:lightblue;}
</style>
</head>
<body>
<h2>ajax+FormData实现 无刷新文件上传</h2>
<form method="post" action="" >
<p>用户名：<input type="text" name="username" /></p>
<p>密码：<input type="password" name="password" /></p>
<p>邮箱：<input type="text" name="email" /></p>
<div id="pat"><div id="son"></div></div>
<p>头像：<input type="file" name="user_pic" /></p>
<p><input type="submit" value="注册" /></p>
</form>
</body>
</html>使用FormData注意：
① 每个表单域必须有name属性
② 在form标签里边无需设置enctype=”multipart/form-data”属性(即时有上传域)
③ ajax传递FormData的数据不需要设置setRequestHeader()函数
上传大附件进度条设置
php.ini开放大附件上传限制：
和上面的代码写一个里了ajax聊天室
分析
及时显示聊天内容
CREATE TABLE `message` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`msg` text,
`sender` varchar(32) NOT NULL DEFAULT '',
`receiver` varchar(32) NOT NULL DEFAULT '',
`color` char(7) NOT NULL DEFAULT '',
`biaoqing` varchar(32) NOT NULL DEFAULT '',
`add_time` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8
发表聊天信息
聊天室优化
- 设置滚动条，避免信息溢出
- 显示聊天内容的时候，滚动条在最下边
divnode.scrollHeight; 获得div元素高度(包括滚动条)
divnode.scrollTop; 设置滚动条卷起高度
聊天室源码
数据表在上边
data.php
<?php
//连接数据库、获得最新的聊天内容
$link = mysql_connect('localhost','root','123456');
mysql_select_db('shop', $link);
mysql_query('set names utf8');
$maxID = $_GET['maxID'];
$sql = "select * from message where id>'$maxID'";
$qry = mysql_query($sql);
$info = array();
while($rst = mysql_fetch_assoc($qry)){
$info[] = $rst;
}
//聊天信息通过json格式传给ajax
echo json_encode($info);send.php
<?php
//连接数据库、获得最新的聊天内容
$link = mysql_connect('localhost','root','123456');
mysql_select_db('shop', $link);
mysql_query('set names utf8');
//发表聊天内容
$msg = $_POST['msg'];
$color = $_POST['color'];
$biaoqing = $_POST['biaoqing'];
$receiver = $_POST['receiver'];
$sql = "insert into message values (null,'$msg','admin','$receiver','$color','$biaoqing',now())";
if(mysql_query($sql)){
echo "发表聊天成功";
}else{
echo "发表聊天失败";
}
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" style="text/css" href="./css/talk.css" />
<script type="text/javascript">
var maxID = 0;//声明已经获得的最大的信息id值变量
//获得聊天信息
function showmsg(){
//ajax去服务器端(php)获得聊天信息
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
eval("var info="+xhr.responseText);
var s = "";
//info外维是数组，内部有字面量对象元素
for(var i=0; i<info.length; i++){
s += "<p style='color:"+info[i].color+"'>";
s += info[i].sender+" 对 "+info[i].receiver+" "+info[i].biaoqing;
s += " 说:"+info[i].msg+"("+info[i].add_time+")";
s += "</p>";
//把已经获得信息的id值赋予给maxID
maxID = info[i].id;
}
//把拼装好的消息追加给div显示
var divnode = document.getElementById('show_msg');
divnode.innerHTML += s;
//设置滚动条卷起高度=========div本身高度
divnode.scrollTop = divnode.scrollHeight;
}
}
xhr.open('get','./data.php?maxID='+maxID);
xhr.send(null);
}
window.onload = function(){
showmsg();
setInterval("showmsg()",2000);
}
</script>
<style type="text/css">
</style>
</head>
<body>
<div id="main">
<div id="left">
<h2>在线名单：（5人）</h2>
<ul id="user">
<li>帅哥：恶魔</li>
<li>靓妹：甜甜</li>
<li>帅哥：诸葛</li>
<li>帅哥：成就梦想</li>
<li>靓妹：郁金香</li>
</ul>
<ul id="anniu">
<li><input type="button" value="刷新名单" ></li>
<li><input type="button" value="刷新屏幕" ></li>
<li><input type="button" value="退出聊天" ></li>
</ul>
</div>
<div id="right">
<div id="content">
<h2 id="content-title">有什么意见和建议欢迎大家踊跃提出</h2>
<hr />
<div id="show_msg">
<p style="color:red">PHP爱好者聊天室公告：欢迎恶魔来到聊天室(22:05:35)</p>
<p>恶魔 对 大家 微笑 说：对啊(22:05:35)</p>
<p>恶魔 对 大家 微笑 说：对啊(22:05:35)</p>
<p style="color:#800080">恶魔 对 大家 微笑 说：好久不见了啊(22:05:35)</p>
<p style="color:red">PHP爱好者聊天室公告：欢迎天使来到聊天室(22:05:35)</p>
<p>天使 对 大家 微笑 说：你来了啊(22:05:35)</p>
</div>
</div>
<div id="send">
<div id="control">
<form>
颜色：
<select name="color" id="color">
<option value="">请选择</option>
<option style="color:#FF8888" value="#FF8888">爱的暗示</option>
<option style="color:#00BBFF" value="#00BBFF">忧郁的蓝</option>
<option style="color:#0000FF" value="#0000FF">碧空蓝天</option>
<option style="color:#9F88FF" value="#9F88FF">灰蓝种族</option>
<option style="color:#000088" value="#000088 ">蔚蓝海洋</option>
<option style="color:#77FFEE" value="#77FFEE">清清之蓝</option>
<option style="color:#4400B3" value="#4400B3">发亮篮紫</option>
<option style="color:#A500CC" value="#A500CC">紫的拘谨</option>
<option style="color:#B088FF" value="#B088FF">卡其制服</option>
<option style="color:#D1BBFF" value="#D1BBFF">伦敦灰雾</option>
<option style="color:#DC143C" value="#DC143C">卡布其诺</option>
<option style="color:#A52A2A" value="#A52A2A">苦涩心红</option>
<option style="color:#FF0000" value="#FF0000">正宗喜红</option>
<option style="color:#990099" value="#990099">红的发紫</option>
<option style="color:#FF0000" value="#FF0000">红旗飘飘</option>
<option style="color:#D2691E" value="#D2691E ">黄金岁月</option>
<option style="color:#800080" value="#800080">紫金绣贴</option>
<option style="color:#006400" value="#006400">橄榄树绿</option>
<option style="color:#000000" value="#000000">绝对黑色</option>
</select>
表情：
<select name="biaoqing">
<option value="">请选择</option>
<option value="笑着">笑着</option>
<option value="高兴地">高兴地</option>
<option value="含情脉脉">含情脉脉</option>
<option value="微笑">微笑</option>
<option value="幸福">幸福</option>
<option value="有点脸红">有点脸红</option>
<option value="使劲安慰">使劲安慰</option>
<option value="自言自语">自言自语</option>
<option value="差点要哭">差点要哭</option>
<option value="嚎啕大哭">嚎啕大哭</option>
<option value="一把鼻涕">一把鼻涕</option>
<option value="很无辜">很无辜</option>
<option value="流口水">流口水</option>
<option value="神秘兮兮">神秘兮兮</option>
<option value="幸灾乐祸">幸灾乐祸</option>
<option value="很不服气">很不服气</option>
<option value="不怀好意">不怀好意</option>
<option value="拳打脚踢">拳打脚踢</option>
<option value="不知所措">不知所措</option>
<option value="翻箱倒柜">翻箱倒柜</option>
<option value="很遗憾">很遗憾</option>
<option value="很严肃">很严肃</option>
<option value="善意警告">善意警告</option>
<option value="正气凛然">正气凛然</option>
<option value="哈欠连天">哈欠连天</option>
<option value="小声的">小声的</option>
<option value="大声的">大声的</option>
<option value="尖叫一声">尖叫一声</option>
<option value="遗憾的">遗憾的</option>
<option value="无精打采">无精打采</option>
<option value="想吐">想吐</option>
<option value="真诚">真诚</option>
<option value="不好意思">不好意思</option>
<option value="扭捏的">扭捏的</option>
<option value="腼腆的">腼腆的</option>
<option value="很诧异">很诧异</option>
<option value="依依不舍">依依不舍</option>
</select>
聊天对象：
<select name="receiver">
<option value="所有人">所有人</option>
<option value="恶魔">帅哥：恶魔</option>
<option value="甜甜">靓妹：甜甜</option>
<option value="诸葛">帅哥：诸葛</option>
<option value="成就梦想">帅哥：成就梦想</option>
<option value="郁金香">靓妹：郁金香</option>
</select>
<br />
<textarea id="msg" name="msg"></textarea>
<input type="button" value="发送" onclick="sendmsg()" />
<span id="sendresult"></span>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
//ajax+FormData实现聊天内容的发送
function sendmsg(){
var fm = document.getElementsByTagName('form')[0];
var fd = new FormData(fm);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
document.getElementById('sendresult').innerHTML = xhr.responseText;
setTimeout('cleara()',2000);
}
}
xhr.open('post','./send.php');
xhr.send(fd);
}
function cleara(){
document.getElementById('sendresult').innerHTML = "";
document.getElementById('color').value = "";
}
</script>
天气预报设置
ajax由于浏览器的限制，禁止跨域请求
解决：利用php代理，跨域请求天气信息
天气信息获取注意事项：
不同地区需要显示该地区对应的天气信息
获得访问用户的ip地址信息，通过ip地址获得其对应的城市信息
城市信息获得出来还要获得城市的编码信息。
ip——->城市——->编码
www.tianqi.com网站已经把 ip/城市/编码 的关系都给处理好了，可以直接调用获得城市对应的天气信息。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
