今天突然看到一个问题是关于ajax使用的什么协议?
百度得知:使用的是http协议,原理是使用的xmlHttpRequest对象异步请求服务器
然后突然看到ajax的几个新操作: .done(function(){})
$.ajax({
type:"post",
url:url, //访问的链接
data:"",
dataType:"json", //数据格式设置为jsonp 。
success:function(data){ //成功的回调函数
console.log(data+"1")
},
error:function (e) {
console.log(e)
}
})
// 推荐使用这种 支持jquery 1.5
.done(function(data) { //上面千万不要加分号否则就报错了
console.log(data+"2")
})
.fail(function() {
alert('服务器超时,请重试!');
});
// 这样的话会同时执行success后台.done 但是推荐使用,Done()
但是ajax不能做跨域,这里就涉及到了jsonp:
原生代码示例:
// 第一种 直接创建标签
<script type="text/javascript">
function aa(dat){
alert(dat.name);
}
</script>
<script type="text/javascript" src="http://wx.guanfu.com.cn/pv/testjsonp.js"></script>
testjsonp.js文件内容:
aa({"name":"tom","age":18});
// 第二种 js创在script标签
<!-- js原生 -->
<script type="text/JavaScript">
function CreateScript(src) {
var Scrip=document.createElement('script');
Scrip.src=src;
document.body.appendChild(Scrip);
}
function aa(json) {
console.log(json);//Object { email="中国", email2="中国222"}
}
CreateScript("http://wx.guanfu.com.cn/pv/testjsonp.php?callback=aa")
</script>
testjsonp.js文件内容:
aa({"name":"tom","age":18});
// 第三种
<!-- jq -->
<script src="../wechatpay_bj/files/jquery_1.10.2.min.js"></script>
<script type="text/javascript">
var url = "http://wx.guanfu.com.cn/pv/testjsonp.php";
$.ajax({
type:"get",
url:url, //访问的链接
data:"",
dataType:"jsonp", //数据格式设置为jsonp
// jsonp:"callback", // 参数键 默认值是callback
// jsonpCallback:"aa", // 参数值 默认自动创建值testjsonp.ph?callback=jQuery1102002600395497116348_1592454390253&_=1592454390254
})
// 推荐使用这种
.done(function(data) { //上面千万不要加分号否则就报错了
console.log(data)
console.log(2)
})
.fail(function(e) {
console.log(e)
});
// 如果上线的jsonpCallback参数为空则不执行下面的函数 谁知道你的函数名是什么东西
function aa(json) {
console.log("tgfdgdfsg");
console.log(json);//Object { email="中国", email2="中国222"}
}
</script>
testJsonp.php文件内容:
<?php
header('Content-Type:text/html;Charset=utf-8');
$callback = $_GET['callback'];
// $jsondata = json_encode(value)
echo $callback."({'name':'nieweibo','age':'12'})";
?>
// 第四种
// 注意callback=? 这里的?一定要有意味着占位符的意思 不能为空
<script>
var url = "http://wx.guanfu.com.cn/pv/testjsonp.php?callback=?"
$.getJSON(url,'',function(data){
console.log(data)
})
</script>
JSONP 和 JSON 的区别: JSON 是一种传输格式。
JSONP (JSON with Padding)是JSON的一种“使用模式”,使用的是script的跨域能力,实现的这个模式。