Jquery进度条

最新推荐文章于 2024-09-20 10:30:16 发布

Shellin_F

最新推荐文章于 2024-09-20 10:30:16 发布

阅读量557

点赞数

本文链接：https://blog.csdn.net/Shellin_F/article/details/78088059

版权

这篇博客探讨了如何使用jQuery创建进度条，并通过AJAX实现数据获取。作者提到了在处理跨域问题时遇到的挑战，尝试了jsonp但仍然遇到问题。同时，也分享了使用原生JavaScript进行AJAX请求的代码示例，详细解释了XMLHttpRequest的readyState状态变化。

摘要由CSDN通过智能技术生成

Jquery我基本不用的，只会基本API，我一般都是用原生的写。

<body>
	<div class="box">
		<div class="content"></div>
	</div>
	<script type="text/javascript" src="jquery-3.1.1.js"></script>
	<script type="text/javascript">
		var num=50;
		$(".content").css("width",num+"%");
	</script>
</body>

定位什么就不写了。就这样的直接改他的宽度。我真不知道还能怎么写。

后台获取数据修改宽度。

AJAX简单实现：

由于可能会出现跨域的情况，所以使用了jsonp

但是我也知道为什么还是跨域了.

$.ajax({ 
	type : "get", 
	async:false, 
	url : "./1.txt", 
    	dataType : "jsonp",//jsonp数据类型 
    	jsonp: "jsonpCallback",//服务端用于接收callback调用的function名的参数 
    	success : function(data){ 
    		$(".content").css("width",data+"%") 
    	}, 
    	error:function(){ 
    		alert('fail'); 
    	} 
});

解决跨域问题

window.domain jsonp

原生ajax：

var xhr=new XMLHTTPRequest();

xhr.onreadystatechange=function(){

if((xhr.status==200&&readystatus==4){

alert(xhr.responseText);

}

xhr.open("get","./1.txt");

xhr.send(null);

readystates:

0：未初始化 no open