ajax（二）jquery ajax

jQuery AJAX详解

最新推荐文章于 2025-03-07 23:40:50 发布

w_t_y_y

最新推荐文章于 2025-03-07 23:40:50 发布

阅读量264

点赞数

CC 4.0 BY-SA版权

分类专栏： # JS

本文链接：https://blog.youkuaiyun.com/w_t_y_y/article/details/78339137

JS 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了jQuery中的AJAX实现方法，包括load、get、post及通用的ajax方法，并讲解了跨域问题及其解决方式jsonp。此外，还提供了具体的代码示例，帮助读者更好地理解和运用。

一、介绍：

二、实现方法：

1、load方法

作用：从服务器加载数据，并把返回的数据放入被选元素中；语法：$(selector).load(URL,data,callback);
例如：$("#div1").load("demo_test.txt"); 把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中

2、两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。先看get方法：

3、post方法：同get方法

4、ajax方法：jQuery.ajax([settings])
该方法是 jQuery 底层 AJAX 实现，简单易用的高层实现见 $.get, $.post 等

三、ajax跨域问题：

通过XHR实现AJAX通信的一个主要的限制，来源于跨域安全策略。在默认情况下，XHR对象只能访问与包含它的页面位于同一个域中的资源。这样可以防止一些恶意行为。所谓的域，可以理解成域名，如果这个XHR所在的页面与请求的接口是在同一个应用下面，那么就不存在跨域的问题，它们是在同一个域下面，例如这里都在本地（localhost:8080）。

而如果请求的发起XHR所在的页面和目标不在一个域下面，就存在了跨域的问题：

这就是跨域问题，由于对XHR对象的限制，虽然我们使用浏览器可以直接访问这个接口，但是当使用XHR来请求这个接口的时候，却报错了。实现合理的跨域请求对于开发web应用来说是至关重要的，此处介绍一种跨域请求的解决方案jsonp。如：

$(window).load(function() {
    
    var cityString = "London";
    var wikiUrl = 'http://en.wikipedia.org/w/api.php?action=opensearch&search='
            + cityString + '&format=json&callback=wikiCallback';
    
    $.ajax({
        url: wikiUrl,
        dataType: "jsonp",
        success: function( data ) {
            console.log(JSON.stringify(data));
        }
    });
});

相较于之前使用jQuery实现对于普通JSON接口访问的方式，实现JSONP的方式与之最大的区别在于两个参数的配置：type和dataType。在实现JSONP的方式中，没有了type的选项，并且dataType变成了jsonp。除此之外，基本没有什么变化。

四、举例：

1、

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	</head>

	<body>
		<div class="div1"></div>
		<script>
			/*$(".div1").load("stu.json",function(){//1、load方法;
				//var str=JSON.stringify(data);
				$(".div1").html(str);
			});*/

			/*$.get("stu.json",function(data){//2、get方法
				var str=JSON.stringify(data);
				$(".div1").html(str);
			});*/

			/*$.post();  //3、post方法*/

			/*$.ajax({   //4、ajax方法
				type: "get",
				url: "stu.json",
				async: true,
				success: function(data) {
					var str = JSON.stringify(data);
					$(".div1").html(str);
				}
			});*/
		</script>
	</body>

</html>

2、前面一篇博客通过js使用ajax实现图片轮番滚动，现在通过jquery使用ajax来实现同样的效果：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
	</head>
	<style>
		.container {
			width: 400px;
			height: 800px;
			margin: auto;
			//background-color: pink;
		}
		
		.imgdiv {
			width: 100%;
			height: 30%;
			background-color: pink;
		}
		
		.dotdiv {
			width: 100%;
			height: 10%;
			margin: auto;
			//background-color: palegoldenrod;
		}
		
		.main {
			width: 50%;
			height: 100%;
			margin-left: 25%;
			margin-right: 25%;
			//background-color: red;
		}
		
		img {
			width: 100%;
			height: 100%;
		}
		
		ul li {
			width: 50px;
			height: 20%;
			color: orange;
			float: left;
			list-style-type: circle;
		}
		
		.dot1 {
			width: 10px;
			height: 10px;
			background-color: wheat;
			border-radius: 50%;
			float: left;
			margin-left: 10%;
		}
		
		.dot {
			/*dot为选中的*/
			width: 10px;
			height: 10px;
			background-color: gray;
			border-radius: 50%;
			float: left;
			margin-left: 10%;
		}
	</style>

	<body>
		<div class="container">
			<div class="imgdiv">
				<img  id="tp" onmousemove="over()"/>
			</div>
			<div class="dotdiv">
				<div class="main">
					<button class="dot" onmouseover="click1(0)"></button>
					<button class="dot1" onmouseover="click1(1)"></button>
					<button class="dot1" onmouseover="click1(2)"></button>
				</div>
			</div>
		</div>
		<script>
			var jon;
			$.ajax({
				type:"get",
				url:"imgsrc.json",
				async:true,
				success:function(data){
					jon=data;
					
				}
			});

			var img = document.getElementById("tp");
			var j = 0;
     /*这里ajax异步请求是有时差的，setIntervar()函数应该在ajax之前执行，之所以fun函数里jon已经有值，
     也是因为setInterval定时补上了这个时间差*/
			function fun() {
				//alert(jon.length);
				if(j == jon.length - 1) {
					j = 0;
				} else {
					j++;
				}
				img.src = jon[j].src;

				var dot = document.getElementsByClassName("dot");
				for(var i = 0; i < dot.length; i++) {
					dot[i].className = "dot1"; //清空所有的点为未选中
				}

				var dots = document.getElementsByClassName("dot1");
				dots[j].className = "dot";
			}
			var a=setInterval(fun, 1000);
			
			function click1(v){
				clearInterval(a);
			    //alert(v);
				var dot = document.getElementsByClassName("dot");
				for(var i = 0; i < dot.length; i++) {
					dot[i].className = "dot1"; //清空所有的点为未选中
				}

				var dots = document.getElementsByClassName("dot1");
				dots[v].className = "dot";
				document.getElementById("tp").src=jon[v].src;
				a=setInterval(fun, 2000);
			}
		</script>
	</body>

</html>

效果：