简单采用原生ajax的方式实现ems快递单号查询_通过a标签访问邮政的运单号-优快云博客

一定要注意文档中标注的注释，都是知识点

<!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"}';
	}
?>