关于ajax的问题,原理和跨域

今天突然看到一个问题是关于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的跨域能力,实现的这个模式。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页