周梦康 发表于 2014-03-26 2710 次浏览
<!doctype html>
<html>
	<body>
		<video  id="playvideo" src="" data="" autoplay='autoplay' preload='preload' width="400" height="200">
			您的浏览器不支持 video 标签。
		</video>
		<script src="http://xxx/jquery.min.js"></script>
		<script type="text/javascript">
		function createPlay(filmSrc){
			var o = {}; 
			o.adapi = 'http://xxx.php?callback=?';
			o.filmSrc = filmSrc;
			o.adInfo   = '';
			
			o.playFilm = function(){ 
				this.loadData(this.filmSrc);
				$("#playvideo").attr('controls','controls');
			};

			o.addListeners = function(){
				$("#playvideo").bind("ended", function(){
					this.playFilm();
				});
			};

			o.loadData = function(src){
				$("#playvideo").attr('src',src);
			};	

			o.playAd = function(){
				this.loadData(this.adInfo['path']);
			};

			o.getAd = function(){
				var info = {};
				$.ajax({type:"GET", url:this.adapi, dataType:"json", async:false,
				   success: function(res){
						info = res;
						console.log(info);
				   },
				   error:function(){
						alert('影片加载失败,请刷新!');
				   }
				});
				console.log(info);
			};

			o.init = function(){
				this.getAd();
				this.playAd();
				this.addListeners();
			};
			
			return o; 
		}
		var filmSrc = 'http://xxxx.mp4';
		$obj = createPlay(filmSrc);
		$obj.init();
		</script>
</body>
</html>

第一、$.ajax怎么我在本地就能请求服务器得到数据 这里的请求在控制台记录的不是XHR finished loading:XXXXX而是Resource interpreted as Script but transferred with MIME type text/html: "http://testwww.m1905.com/wcg/getMdslist.php?callback=jQuery17205295486932154745_1395820445643&_=1395820445643".  

第二、这里地址中的callback后面的参数是怎么加上的? 

第三、在getAd那块为什么是异步的?

所有的问题其实都是一个知识盲区的问题jsonp

昨天和朋友一起因为一个jqueryajax而的同步无效并且直接完成了跨域,而且发送的还不是XHR请求的问题而困惑,最后请教别人,方才得知原来是jsonp
jsonp在jquery里的发送也是通过ajax系列函数来发送。
参考官方的文档:http://api.jquery.com/jQuery.ajax/
其中,在同步异步设置的那块说到:By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.
Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation.
$.ajax发送的参数中可以设置的键值对

jsonp

Type: String

Override the callback function name in a jsonp request. This value will be used instead of 'callback' in the 'callback=?' part of the query string in the url. So {jsonp:'onJSONPLoad'} would result in 'onJSONPLoad=?' passed to the server. As of jQuery 1.5, setting the jsonp option to false prevents jQuery from adding the "?callback" string to the URL or attempting to use "=?" for transformation. In this case, you should also explicitly set the jsonpCallback setting. For example, { jsonp: false, jsonpCallback: "callbackName" }

jsonpCallback

Type: String or Function()

Specify the callback function name for a JSONP request. This value will be used instead of the random name automatically generated by jQuery. It is preferable to let jQuery generate a unique name as it'll make it easier to manage the requests and provide callbacks and error handling. You may want to specify the callback when you want to enable better browser caching of GET requests. As of jQuery 1.5, you can also use a function for this setting, in which case the value of jsonpCallback is set to the return value of that function.

var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.src = url+"&callback=adsPreview";
document.body.appendChild(script);

这么玩,本质。

评论列表

回复 beiwei48 2014-03-27 09:05:34
多谢大牛指点,url抹掉哦
回复 周梦康 2014-03-27 14:11:13
回复1楼: 哈哈哈,不好意思,已经去掉啦