jquery框架的ajax方法虽然好用，但是如果我们的项目需求简单，交互功能少，引入jquery会造成页面臃肿。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ems</title>
<style type="text/css">
#ems{
position: absolute;
left: 50%;
400px;
height: auto;
margin-left: -200px;
background: lightGreen;
text-align: center;
min-height: 50px;
height: 500px;
overflow-y: scroll;
overflow-x: hidden;
}
#ems input{
height: 25px;
margin-top: 10px;
}
#list{
background: lightBlue;
}
#list li{
text-align: left;
}
</style>
</head>
<body>
<div id="ems">
<div>
<input type="text" id="code">
<input type="button" value="查询" id="btn">
</div>
<div id="list">
</div>
</div>
<script type="text/javascript">
function ajax(data) {
//我们封装的函数为了能实现可传入无限多个参数，在我们即将封装函数时，需要使用对象进行传参
//data = {data:"",dataType:"xml/json",type:"get/post",url:"",asyn:"true/false",success:function(){},filure:function(){}}
//
//data:{username:123,password:456} 发送的参数形式，用这种形式需要转换，所以用下面的字符串拼接的形式
//data = 'username=123&password=456';
//第一步：创建xhr对象
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//第二步：准备发送前的一些配置参数
var type = data.type == 'get'?'get':'post';
var url ='';
if(data.url){
url = data.url;
if(type == 'get'){
url += "?" + data.data + "&_t=" + new Date().getTime();
}
}
var flag = data.asyn == 'true'?'true':'false';
xhr.open(type,url,flag);
//第三步：执行发送的动作
if(type == 'get'){
xhr.send(null);
}else if(type == 'post'){
//模仿表单提交 以键值对形式？key1=value1&key2=value2的方式发送到服务器
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(data.data);
}
//第四步：指定回调函数
xhr.onreadystatechange = function () {
if(this.readyState == 4){
if(this.status == 200){
if(typeof data.success == 'function'){
var d = data.dataType == 'xml'?xhr.responseXML:xhr.responseText;
data.success(d);
}
}else{
if(typeof data.failure == 'function') {
data.failure();
}
}
}
}
}
window.onload = function () {
var btn = document.getElementById('btn');
btn.onclick = function () {
var code = document.getElementById('code').value;
if(!code){
document.getElementById('list').innerHTML = "请输入查询单号";
return;
}
var param = {
data:'code='+code,
url:'07ems.php',
type:'get',
dataType:'json',
success:function(data){
var data = JSON.parse(data);
if(data.status == 0){
var list = data.data.info.context;
// console.log(list);
var tag = '';
for(var i=0;i<list.length;i++){
// console.log(list[i]);
var item = list[i];
var desc = item.desc;
var t = new Date();
t.setTime(item.time +'000');
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;
}
}
};
ajax(param);
}
}
</script>
</body>
</html>
服务器端php代码 07ems.php
1 <?php 2 3 $code = $_GET['code']; 4 5 if($code == ''){ 6 7 } 8 9 10 $result = '{"msg":"","status":"0","data":{"info":{"status":"1","com":"ems","state":"3","context":[{"time":"1450252800","desc":"u3010u9f99u9526u82d1u6295u9012u7ec4u3011 u5df2u7b7eu6536,u4ed6u4ebau6536[u9f99u9526u82d1u6295u9012u7ec4]"},{"time":"1450172897","desc":"u3010u9f99u9526u82d1u6295u9012u7ec4u3011 u9884u7ea62015.12.16u518du6295[u9f99u9526u82d1u6295u9012u7ec4]"},{"time":"1450153979","desc":"u3010u9f99u9526u82d1u6295u9012u7ec4u3011 [u9f99u9526u82d1u6295u9012u7ec410220812]u6b63u5728u6295u9012"},{"time":"1450088166","desc":"u3010u9f99u9526u82d1u6295u9012u7ec4u3011 u9884u7ea62015.12.15u518du6295[u9f99u9526u82d1u6295u9012u7ec4]"},{"time":"1450062684","desc":"u3010u9f99u9526u82d1u6295u9012u7ec4u3011 [u9f99u9526u82d1u6295u9012u7ec410220812]u6b63u5728u6295u9012"},{"time":"1450000825","desc":"u3010u9f99u9526u82d1u6295u9012u7ec4u3011 u5230u8fbe[u9f99u9526u82d1u6295u9012u7ec410220812]"},{"time":"1449887960","desc":"u3010u5929u901au897fu82d1u6295u9012u7ec4u3011 u8f6cu4ed6u5c40u5904u7406,u539fu56e0:u975eu672cu7ad9u8bd5u4ed6u5c40[u5929u901au897fu82d1u6295u9012u7ec4]"},{"time":"1449886219","desc":"u3010u5929u901au897fu82d1u6295u9012u7ec4u3011 [u5929u901au897fu82d1u6295u9012u7ec410221806]u6b63u5728u6295u9012"},{"time":"1449871677","desc":"u3010u5929u901au897fu82d1u6295u9012u7ec4u3011 u5230u8fbe[u5929u901au897fu82d1u6295u9012u7ec410221806]"},{"time":"1449866125","desc":"u3010u5317u4eacu3011 u79bbu5f00[u5317u4eac10000000]uff0cu4e0bu4e00u7ad9u662f[u4eacu5929u901au897f],u603bu5305[5602],u90aeu8def[u6c99u6cb3-J1]"},{"time":"1449838500","desc":"u3010u5317u4eacu5e02u3011 [u5317u4eacu5e0210000000]u5df2u7ecfu5c01u53d1,u603bu5305[5602]"},{"time":"1449827400","desc":"u3010u4e9au8fd0u6751u90aeu5c40u5927u5b97u4e8cu7ec4u3011 u79bbu5f00[u4e9au8fd0u6751u90aeu5c40u5927u5b97u4e8cu7ec410010120]uff0cu4e0bu4e00u7ad9u662f[u5317u4eacu5e02],u603bu5305[5434],u90aeu8def[u5546u51fd-u5c0fu5305u51fau53e3]"},{"time":"1449820658","desc":"u3010u4e9au8fd0u6751u90aeu5c40u5927u5b97u4e8cu7ec4u3011 [u5317u4eacu5e02u4e9au8fd0u6751u90aeu5c40u5927u5b97u4e8cu7ec410010120]u5df2u7ecfu6536u5bc4"}],"_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":"u7f51u70b9u67e5u8be2","url":"http://www.ems.com.cn/serviceguide/tong_da_fan_wei.html"},{"title":"u7f51u4e0au5bc4u4ef6","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":"u6570u636eu6765u81eau5febu9012100","url":"http://www.kuaidi100.com/","name":"u5febu9012100"}}}'; 11 12 if($code == '9971121346085'){ 13 echo $result; 14 }else{ 15 echo '{"msg":" 该单号暂无物流进展，请稍后再试，或检查公司和单号是否有误","status":"-2"}'; 16 }