一定要注意文档中标注的注释,都是知识点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ems查询</title>
<style>
#ems {
position: absolute;
left: 50%;
top: 0;
height: auto;
width: 400px;
margin-left: -200px;
text-align: center;
background-color: lightGreen;
min-height: 50px;
overflow-y: scroll;
overflow-x: hidden;
}
#ems input {
height: 25px;
margin-top: 10px;
}
#ems #code {
padding: 0 5px;
}
#list {
background-color: lightBlue;
}
#list li {
text-align: left;
list-style: none;
/*height: 20px;*/
font-size: 14px;
}
</style>
</head>
<body>
<div id="ems">
<div>
<input type="text" id="code">
<input type="button" value="查询" id="searchBtn">
</div>
<div id="list">
</div>
</div>
<script>
window.onload = function() {
var searchBtn = document.getElementById("searchBtn");
console.log(8);
searchBtn.onclick = function() {
console.log(9);
var code = document.getElementById("code").value;
//定义ajax请求
var xhr = null;
//try中的代码执行的时候产生错误,回调到catch中执行代码。
// 然后try catch后的代码还是一样正常执行,
// 保证代码出错之后,后面的代码依然正常执行
//当然try中的代码可能不止一行,假设有100行,其中有一条错误,那么try里出错的代码后面的代码也不执行了。会直接跳到catch中执行。
// catch中的代码执行完毕后,外面的代码继续执行。如果catch中的代码也出错了,那么外面的代码都不会执行了。try catch可以嵌套使用。
// 出错的信息就是catch的参数e。可以用throw new Error("error")去抛出一个异常信息
// try{
// xhr = new XMLHttpRequest();
// }catch(e){
// xhr = new ActiveXObject('Microsoft.XMLHTTP');
// }
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
console.log(10);
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
console.log(11);
}
console.log(11.5);
xhr.open("get","ems.php?code="+code);
console.log(11.6);
xhr.send(null);
xhr.onreadystatechange = function() {
//一定要判断状态
console.log(12);
if (xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
// var data = JSON.parse(this.responseText)等同于上一句
console.log(13);
// console.log(xhr.responseText);
if (data.status == 0) {
//获得需要的数据,是一个数组
var list = data.data.info.context;
var tag = '';
var len = list.length;
for (var i=0; i<len; i++) {
//先获取其中的一条记录
var item = list[i];
// 其中有两条有用数据
var desc = item.desc;
var t = new Date();
// var t = item.time;
//注意这里一定要先把t变量创建为时间对象,不然后面str里的转换方法就不能调用了。
// console.log(t);
t.setTime(item.time + '000');
console.log(t);
var str = t.getFullYear()+'年'+(t.getMonth()+1)+'月'+t.getDay()+'日'+(t.getHours()>12?' 下午':' 上午')+t.getHours()%12+':'+t.getMinutes()+':'+t.getSeconds();
tag += '<li><div>'+str+'</div><div>'+desc+'</div></li>';
}
var ul = document.createElement("ul");
ul.innerHTML = tag;
document.getElementById("list").appendChild(ul);
}else {
var info = data.msg;
document.getElementById("list").innerHTML = info;
}
}
console.log(14);
console.log(15);
}
}
}
</script>
</body>
</html>
php文件简单只定义一个查询的快递单号:
<?php
$code = $_GET['code'];
//定义的json数据
$result = '{"msg":"","status":"0","data":{"info":{"status":"1","com":"ems","state":"3","context":[{"time":"1450252800","desc":"\u3010\u9f99\u9526\u82d1\u6295\u9012\u7ec4\u3011 \u5df2\u7b7e\u6536,\u4ed6\u4eba\u6536[\u9f99\u9526\u82d1\u6295\u9012\u7ec4]"},{"time":"1450172897","desc":"\u3010\u9f99\u9526\u82d1\u6295\u9012\u7ec4\u3011 \u9884\u7ea62015.12.16\u518d\u6295[\u9f99\u9526\u82d1\u6295\u9012\u7ec4]"},{"time":"1450153979","desc":"\u3010\u9f99\u9526\u82d1\u6295\u9012\u7ec4\u3011 [\u9f99\u9526\u82d1\u6295\u9012\u7ec410220812]\u6b63\u5728\u6295\u9012"},{"time":"1450088166","desc":"\u3010\u9f99\u9526\u82d1\u6295\u9012\u7ec4\u3011 \u9884\u7ea62015.12.15\u518d\u6295[\u9f99\u9526\u82d1\u6295\u9012\u7ec4]"},{"time":"1450062684","desc":"\u3010\u9f99\u9526\u82d1\u6295\u9012\u7ec4\u3011 [\u9f99\u9526\u82d1\u6295\u9012\u7ec410220812]\u6b63\u5728\u6295\u9012"},{"time":"1450000825","desc":"\u3010\u9f99\u9526\u82d1\u6295\u9012\u7ec4\u3011 \u5230\u8fbe[\u9f99\u9526\u82d1\u6295\u9012\u7ec410220812]"},{"time":"1449887960","desc":"\u3010\u5929\u901a\u897f\u82d1\u6295\u9012\u7ec4\u3011 \u8f6c\u4ed6\u5c40\u5904\u7406,\u539f\u56e0:\u975e\u672c\u7ad9\u8bd5\u4ed6\u5c40[\u5929\u901a\u897f\u82d1\u6295\u9012\u7ec4]"},{"time":"1449886219","desc":"\u3010\u5929\u901a\u897f\u82d1\u6295\u9012\u7ec4\u3011 [\u5929\u901a\u897f\u82d1\u6295\u9012\u7ec410221806]\u6b63\u5728\u6295\u9012"},{"time":"1449871677","desc":"\u3010\u5929\u901a\u897f\u82d1\u6295\u9012\u7ec4\u3011 \u5230\u8fbe[\u5929\u901a\u897f\u82d1\u6295\u9012\u7ec410221806]"},{"time":"1449866125","desc":"\u3010\u5317\u4eac\u3011 \u79bb\u5f00[\u5317\u4eac10000000]\uff0c\u4e0b\u4e00\u7ad9\u662f[\u4eac\u5929\u901a\u897f],\u603b\u5305[5602],\u90ae\u8def[\u6c99\u6cb3-J1]"},{"time":"1449838500","desc":"\u3010\u5317\u4eac\u5e02\u3011 [\u5317\u4eac\u5e0210000000]\u5df2\u7ecf\u5c01\u53d1,\u603b\u5305[5602]"},{"time":"1449827400","desc":"\u3010\u4e9a\u8fd0\u6751\u90ae\u5c40\u5927\u5b97\u4e8c\u7ec4\u3011 \u79bb\u5f00[\u4e9a\u8fd0\u6751\u90ae\u5c40\u5927\u5b97\u4e8c\u7ec410010120]\uff0c\u4e0b\u4e00\u7ad9\u662f[\u5317\u4eac\u5e02],\u603b\u5305[5434],\u90ae\u8def[\u5546\u51fd-\u5c0f\u5305\u51fa\u53e3]"},{"time":"1449820658","desc":"\u3010\u4e9a\u8fd0\u6751\u90ae\u5c40\u5927\u5b97\u4e8c\u7ec4\u3011 [\u5317\u4eac\u5e02\u4e9a\u8fd0\u6751\u90ae\u5c40\u5927\u5b97\u4e8c\u7ec410010120]\u5df2\u7ecf\u6536\u5bc4"}],"_source_com":""},"com":"ems","company":{"url":"http:\/\/www.kuaidi100.com\/all\/ems.shtml?from=openv","fullname":"EMS","shortname":"EMS","icon":{"id":"2","smallurl":"https:\/\/ss2.baidu.com\/6ONYsjip0QIZ8tyhnq\/it\/u=1807529516,3291075151&fm=58","smallpos":"0,944","middleurl":"https:\/\/ss1.baidu.com\/6ONXsjip0QIZ8tyhnq\/it\/u=1835223070,3312272045&fm=58","middlepos":"0,828","normal":"https:\/\/ss1.baidu.com\/6ONXsjip0QIZ8tyhnq\/it\/u=295567570,1377797753&fm=58"},"website":{"title":"www.ems.com.cn","url":"http:\/\/www.ems.com.cn\/"},"tel":"11183","auxiliary":[{"title":"\u7f51\u70b9\u67e5\u8be2","url":"http:\/\/www.ems.com.cn\/serviceguide\/tong_da_fan_wei.html"},{"title":"\u7f51\u4e0a\u5bc4\u4ef6","url":"http:\/\/www.ems.com.cn\/serviceguide\/zifeichaxun\/zi_fei_biao_zhun.html"}]},"source":{"logo":"https:\/\/ss2.baidu.com\/6ONYsjip0QIZ8tyhnq\/it\/u=1429564979,1787167512&fm=58","title":"\u6570\u636e\u6765\u81ea\u5feb\u9012100","url":"http:\/\/www.kuaidi100.com\/","name":"\u5feb\u9012100"}}}';
if ($code == '') {
// echo "请输入快递单号";
echo '{"msg":"请输入快递单号"}';
}else if($code == '9971121346085') {
echo "$result";
}else {
echo '{"msg":" 该单号暂无物流进展,请稍后再试,或检查公司和单号是否有误","status":"-2"}';
}
?>