重学JavaWeb（5）AJAX、跨域请求

最新推荐文章于 2023-07-02 21:35:40 发布
最新推荐文章于 2023-07-02 21:35:40 发布
阅读量155 收藏
点赞数
文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nswzr/article/details/109205292
版权

1. AJAX

1. 原生的Ajax
（1）原生的Ajax之GET请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript">
	//1. 创建对象
	var xmlhttp = new XMLHttpRequest();
	
	//2. 打开后台接口，发送请求
	xmlhttp.open("GET","https://autumnfish.cn/api/joke/list?num=1",true);
	xmlhttp.send();
	
	//3. 接收服务器返回的消息
	xmlhttp.onreadystatechange = function(){
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
			//4. 获取服务器相应结果
			var responseText = xmlhttp.responseText;
			var jsonObj = JSON.parse(responseText);
			var joke = jsonObj.jokes[0];
			var msg = jsonObj.msg;
			alert(msg);
			//5. 打印至屏幕
			var body = document.body;
			body.innerText = msg;
			body.innerText = joke;
		}
	}
</script>

（2）原生的Ajax之POST请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript">
	//1. 创建对象
	var xmlhttp = new XMLHttpRequest();
	//2. 连接服务器
	xmlhttp.open('POST', 'http://localhost:8080/login', true);
	//3. post请求要设置请求头信息
	xmlhttp.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
	//4. 发送请求，post请求的请求参数要写在send()方法里面
	xmlhttp.send("username=zhangsan&password=12345");
	//5. 接收后台响应
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			var c = xmlhttp.responseText;
			alert(c);
		}
	}
</script>

2. jQuery封装后的Ajax
（1）键值对形式

1. $ .ajax()
	语法：$ .ajax({键值对});

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button">jQuery封装后的get请求</button>
	</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$('button').click(function(){
		//发送ajax
		$.ajax({
			type:'get',
			
			url:'https://autumnfish.cn/api/joke/list',
			
			data:{  //请求参数
				'num':2
			},
			
			success:function(res){   //请求成功后回调
				//res返回的结果，jquery已经把返回的json字符串转换为了json对象
				alert(res.msg);
				alert(res.jokes[0]);
			},
			
			error:function(error){
				alert(error.status);
				alert(error.statusText);
			},
			
			dataType:'json'  //接收后台返回的数据类型
		})
	})
</script>

===============================================================================================

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button">jQuery封装后的post请求</button>
	</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$('button').click(function(){
		$.ajax({
			type:'post',
			url:'http://localhost:8080/login',
			data:{   //请求参数
				'username':'zhangsan',
				'password':'12345'
			},
			success:function(res){   //请求成功后回调
				//res返回的结果，jquery已经把返回的json字符串转换为了json对象
				alert(res.username);
				alert(res.password);
			},
			
			error:function(error){
				alert(error.status);
				alert(error.statusText);
			},
			
			dataType:'json'  //接收后台返回的数据类型
		})
	})
</script>

（2）get请求

2. $ .get()：发送get请求
	语法：$ .get(url,[data],[callback],[type])
		url：请求路径
		data：请求参数
		callback：回调函数
		type：响应结果的类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button">get请求</button>
	</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$('button').click(function(){
		/**
		 * $.get()：发送get请求
			 * 语法：$.get(url, [data], [callback], [type])
			 	* 参数：
			 		* url：请求路径
			 		* data：请求参数
			 		* callback：回调函数
			 		* type：响应结果的类型 
		 */
		$.get('https://autumnfish.cn/api/joke/list?num=1',function(res){
			alert(res.msg);
		},'json');
	})
</script>

（3）post请求

3. $ .post()：发送post请求
	语法：$ .post(url,[data],[callback],[type])
		url：请求路径
		data：请求参数
		callback：回调函数
		type：响应结果的类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button">post请求</button>
	</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$('button').click(function(){
		/* 
			 3. $.post()：发送post请求
			 	* 语法：$.post(url, [data], [callback], [type])
			 		* 参数：
			 			* url：请求路径
			 			* data：请求参数
			 			* callback：回调函数
			 			* type：响应结果的类型
		*/
	   
	   $.post('http://localhost:8080/login',{
		   'username':'wangwu',
		   'password':'123456'
	   },function(res){
		   alert(res.username);
		   alert(res.password);
	   },'json');
	})
</script>

（4）getJSON请求

4. 直接请求JSON数据，post/get都可以：$ .getJSON(url,[data],[callback])
	url：请求路径
	data：请求参数
	callback：回调函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button">getJson请求</button>
	</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$('button').click(function(){
		/**
		 * 4.直接请求JSON数据,post,get请求都可以 $.getJSON(url, [data], [callback])
		 	* url：请求路径
		 	* data：请求参数
		 	* callback：回调函数
		 */
		$.getJSON('https://autumnfish.cn/api/joke/list?num=1',function(res){
			alert(res.msg);
		});
	})
</script>

2. 跨域请求

1. 概念
（1）同源策略：浏览器处于安全考虑的一个机制
（2）跨域请求：会受到同源策略的限制，导致后台返回的数据会被浏览器劫持

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" onclick="send()">跨域请求</button>
	</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	function send() {
		//1.创建对象
		var xmlhttp = new XMLHttpRequest();
		//2.打开后台接口，发送请求
		//get请求，请求参数是拼接在url后面的。 
		xmlhttp.open("GET", "https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=15594990730", true);
		//3.发送请求
		xmlhttp.send();
		//4.接收服务端的响应
		xmlhttp.onreadystatechange = function() {
			//判断readyState就绪状态是否为4，判断status响应状态码是否为200
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				//获取服务器的响应结果
				var responseText = xmlhttp.responseText;
				alert(responseText);   //已拦截跨源请求：同源策略禁止读取位于 https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=15594990730 的远程资源。
										//（原因：CORS 头缺少 'Access-Control-Allow-Origin'）

			}
		}
	}
</script>

2. 跨域请求的解决方式
（1）jsonp

1. jsonp只支持get请求的跨域解决
2. jsonp解决跨域请求的原理：利用了某些html标签，在进行跨域请求时，不受同源策略的限制（img,script）

（2）cors（推荐）

当前浏览器发现这次Ajax请求时跨域请时，
浏览器会通过一个请求头Origin 告诉服务器这次请求是一个跨域请求，期待你的回答。
服务器默认都会处理，跨域请求。并且给出响应，但是默认服务器默认没有对于跨域给出一个明确的表示。
也就是服务器没有设置 Access-Control-Allow-Origin 导致浏览器，不知道服务器的明确表态，所以就拦截了。
默认浏览器就会把服务返回的数据劫持了。

3. JSONP跨域请求
（1）原生方式的jsonp

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript">
	//在url后面加上callback
	//callback：这个名称是大家约定俗称的
	
	/*
		__GetZoneResult_ = {
			mts:'1325914',
			province:'陕西',
			catName:'中国联通',
			telString:'13259141515',
			areaVid:'30503',
			ispVid:'137815084',
			carrier:'陕西联通'
		}
	 */
	//原生jsonp写法
	function getData(res){
		alert(res.province);
	}
</script>
<script src="https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=13259141515&callback=getData"></script>

（2）jQuery方式的jsonp

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	/* 
		 
		jQuery111308155352926962021_1603010735068({
		    mts:'1325914',
		    province:'陕西',
		    catName:'中国联通',
		    telString:'13259141515',
			areaVid:'30503',
			ispVid:'137815084',
			carrier:'陕西联通'
		})
		 
	 */
	$.ajax({
		type:'get',
		url:"https://tcc.taobao.com/cc/json/mobile_tel_segment.htm",
		data:{
			'tel':'15594990730'
		},
		jsonp:'callback',  //多了这个，jsonp请求的回调函数名jquery会自动生成
		success:function(res){
			alert(res.catName);
		},
		dataType:'jsonp' //数据类型jsonp
	})
</script>
wzr-xupt
关注
Javaweb使用cors完成跨域ajax数据交互
08-29
CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。 三、JavaWeb使用CORS完成跨域AJAX数据交互 要使用CORS完成跨域AJAX数据交互，需要完成以下三个步骤： 1. 通过Maven引用cors-filter和java-...
js姓名除了姓显示其他*
JessicaLi的博客
09-29 1404
function formatName(str) { return str.substr(0,1)+new Array(str.length).join('*') ; }
JQuery
qq_48967079的博客
09-21 171
JQuery 1.什么是JQuery？ JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法 2.如何调用JQuery? <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> 3.使用JQuery绑定事件 <!DOCTYPE html> <html> <head> <meta char
jquery中ajax处理跨域的三大方式
lgxzzz的博客
08-24 9180
由于JS同源策略的影响，因此js只能访问同域名下的文档。因此要实现跨域，一般有以下几个方法： 一、处理跨域的方式： 1.代理 2.XHR2 HTML5中提供的XMLHTTPREQUEST Level2（及XHR2）已经实现了跨域访问。但ie10以下不支持 只需要在服务端填上响应头： 1 2 3 header("Access-Control-Allow-Origin:*"); /*星号表示所有的域都可以接受，*/ header("Acc
jquery跨域办法
黄彪博客
09-07 395
$.ajax({ type:"get", async:false, url:"http://127.0.0.1:8080/ajax_test/JsonResult?callback=itemsSearchGet", dataType:"jsonp", jsonp:"callback", jsonpCallback:"itemsSearchGet", suc
js 只显示姓
huang772624的专栏
11-18 622
var str="张三" str.substr(0,1)+new Array(str.length).join('*')
ajax_javaweb_
10-02
6. **跨域问题**：出于安全考虑，浏览器限制了Ajax的跨域请求。可以通过CORS（跨源资源共享）或JSONP（JSON with Padding）来解决这个问题。 7. **Progress事件**：对于大文件上传或下载，Ajax支持监听传输进度，...
JavaWeb中Ajax的使用
11-22
7. **跨域问题**：默认情况下，Ajax请求受到同源策略限制，只能向同源的URL发送。若需跨域，可以利用JSONP、CORS（跨源资源共享）等技术解决。 8. **jQuery与Ajax**：jQuery库简化了Ajax的使用，提供如`$.ajax()`, ...
基于javaweb 的 AJAX最全面的实例源码
09-21
但通过设置CORS（Cross-Origin Resource Sharing）头，可以实现跨域请求。 9. **JQuery与AJAX**：许多实例可能使用了JQuery库，JQuery简化了AJAX的使用，提供了$.ajax()、$.get()、$.post()等便捷方法。 10. **...
javaweb使用ajax
09-04
- **jsonp**：JSONP，跨域请求常用，通过动态创建script标签实现 - **xml**：XML格式的数据 - **html**：HTML片段 ### 4. 异步请求状态 可以通过`$.ajaxStart()`和`$.ajaxStop()`监听Ajax请求的开始和结束，`$....
jquery+ajax实现跨域请求的方法
12-10
本文实例讲述了jquery+ajax实现跨域请求的方法。分享给大家供大家参考。具体实现方法如下： 说明：这里的dataType 为  “jsonp”  ；type 只能为 GET 前台请求代码如下： 代码如下:$.ajax({  type: “GET”,  url: “http://www.xxx.com/Rest/ValidAccountsExists.aspx?accounts=admin”,  dataType: “jsonp”,  jsonp: “jsoncallback”,    success: function (result) {     alert(result.Su
JQuery Ajax执行跨域请求数据的解决方案
12-10
今天前端因为需要ajax调用两个不同的项目，请求域不一样，所以涉及ajax跨域的问题 ，其实很简单，具体如下 原来的ajax请求如下： $.ajax({ type:"post", url:platformUrl +"/security/modifyPwd.do", data:$('#updatepwdform').serialize(), dataType:"json", success:function(data){ $("#updatepwd_btn").click(); $.toast("修改成功，系统即将退出，请重新登录",1500); }, error: fu
Jquery跨域Ajax请求测试
08-26
Jquery跨域访问Web服务的demo源码
jQuery实现AJAX和AJAX跨域问题
最新发布
qq_37035987的博客
07-02 3433
1、跨域是指从一个域名的网页去请求另一个域名的资源，AJAX存在跨域问题，比如下面从服务器a发送AJAX请求到服务器b。2、同源策略是指一段脚本只能读取来自同一来源的资源，同源就是协议、域名、端口都相同。后台响应需要获取AJAX请求时穿过来的函数名，默认为callback，可以通过。3、在被访问中设置响应头来解决AJAX跨域问题。dataType : "jsonp"(这里一定要写jsop)4、用jsopn解决AJAX跨域问题。二、用AJAX实现一个省市联动动态展示功能。一、AJAX跨域问题。
使用Postman测试接口
qq_41984644的博客
07-29 266
使用Postman测试接口第一步、[下载Postman软件](https://www.getpostman.com/)第二步、打开postman软件创建request请求 第一步、下载Postman软件 现在有这么一个需求 如果存在结果因本公司服务器原因导致未获取结果，可主动访问 http://www.baidu.com/api/get_result/ ，通过post请求获取结果。...
javascript正则姓名加密，保留姓，名用*号代替
热门推荐
祈澈菇凉
12-04 1万+
大家都知道javascript诞生最初的目的是为了处理表单验证操作的。javascript发展到现在，已经从一个简单的表单验证器功能发展成为一门强大而复杂的语言。 前两天在群里看到一个群友提问的，今天突然想起来，写了个小的demo，记得之前也写过一个正则验证手机号码的demo，其实都差不多。想要的效果差不多如下所示： &lt;!DOCTYPE...
js的隐藏姓名方式保护用户隐私，只显示首个汉字也就是姓，后面的隐藏，匿名方式
u012442504的专栏
05-15 4708
alert("13456789012".replace(/([\u4E00-\u9FA5]{1})([\u4E00-\u9FA5]+)$/,"$1*****"));
js名字匿名只显示姓氏（第一个字）
Qing_X_C的博客
07-17 1334
效果如图： function formatName(str) { return str.substr(0,1)+new Array(str.length).join('*') ; }
JS正则表达式隐藏身份证中间8位(电话号码/姓名/千位符)......
时漂亮的博客
01-15 6256
// 案例 <template> <div>{{ house || '' + address || '' }}</div> <div>{{ house || '' }} {{ address || '' }}</div> <div>{{ (house || '').concat(address || '') }}</div> <div>{{ idCard && idC.
JavaWeb学习关键点：HTML到Ajax的探索
尽管遗忘曲线可能使我们忘记一部分知识，但回顾笔记和实例可以帮助巩固所学。 JavaScript是Web开发的核心，特别是在客户端交互方面。即使课程中仅深入讲解了基础，如对象创建的几种方式，DOM操作和事件处理，但...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值