基础
大家都知道form表单有两种方式，post和get。
- 1.get不安全，会在链接处显示用户输入的信息数据，Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接
- 2.Get传输的数据量小，这主要是因为受URL长度限制
因为这样的特性，我们通常用get方式获取数据，用post方式传递数据
JSONP的最基本的原理是：动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与ajax XmlHttpRequest协议无关了。
JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都 可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。
JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
get
我将通过一个查验快递包裹的小例子说明
当我们苦等快递的时候，就会输入快递单号，然后查验出快递的状态和位置，今天就做一个简单版的查快递，效果如下：
image.png
image.png
首先开始完成服务端的代码，创建一个check.php文件；
先将用户的数据写入数组。
/**
* 快递包裹查询API
* 传送方式：get
* 参数：kuaidi_id 需要查询的快递单号
* 参数：callback 回调函数名
*/
<?php
$kuaidi['1000'] = array(
'info' => '王小三的快递',
'status' => '配送中',
);
$kuaidi['1001'] = array(
'info' => '王三的快递',
'status' => '配送中',
);
$kuaidi['1002'] = array(
'info' => '张三的快递',
'status' => '已配送',
);
//如果前台传送了快递单号就执行查询
if(!empty($_GET['kuaidi_id'])){
//如果没传回调函数名
if(empty($_GET['callback'])){
//直接输出json串
echo "var jsonstr=\"".json_encode($kuaidi[$_GET['kuaidi_id']])."\"";
}else {
//如果有回调函数，输出JSONP
echo $_GET['callback']."(".json_encode($kuaidi[$_GET['kuaidi_id']]).")";
}
}
?>
写完服务端代码，开始写前台代码,构建好界面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="get">
<input type="text" name="thing_id" id="thing_id"/>
<input type="button" name="btn" value="提交" id="btn"/>
</form>
<div id="div"></div>
</body>
</html>
然后写入js,写在body标签后面,首先要获取我们需要的变量
var btn = document.getElementById("btn");
var thing_id = document.getElementById("thing_id");
之后写入btn的点击事件，通过点击btn触发，动态生成script标签，同时通过src链接通过get的特性从服务端获取我们需要的数据
btn.onclick =function(){
var script = document.createElement("script");
script.src="快递物流.php?kuaidi_id="+thing_id.value+"&callback=myFunc";
document.body.append(script);
}
因为使用了回调函数，最后通过函数得到从服务端获得的参数，将服务端的信息输出到页面上
function myFunc(jsonstr){
var div =document.getElementById("div");
div.innerHTML = jsonstr.info+" "+jsonstr.status;
}
这样一个简化版的查快递就完成了！
网友评论