JSONP技术

不念不忘少年蓝@ 2023-07-07 03:45 1阅读 0赞

# 一、跨域问题 #

1.  **同源策略（SOP）**：  
    访问浏览器的URL地址和发送XHR请求的URL地址必须满足三个一致：协议一致、域名一致、端口一致  
    同源策略规定：如果访问浏览器的URL地址和发送XHR请求的URL地址不同源，则无法发送XHR请求（ajax请求），会产生跨域问题。
2.  **跨域问题**：是浏览器的安全级别造成的。
3.  **模拟跨域**：在本地产生两个服务器：  
    （1）客户端通过Hbuild而访问。  
    （2）服务器通过自身的服务器访问。

# 二、JSONP技术 #

通过浏览器发送的请求被称为“HTTP请求”，其中包括资源请求、表单请求、XHR请求。

1.  通过不向服务器发送XHR请求的方法来解决跨域问题。此时，JSONP要求向服务器发送一个资源请求。
2.  什么是资源请求：通过HTML标记向服务器请求的外部文件就是资源请求。  
    例：`<script></script>`、`<img></img>`、`<audio></audio>`、`<video></video>`等
3.  哪些标记可以帮助我们将后台文件（.jsp、.php、.axpx）的请求变为资源请求？`<script type="text/javascript" src="http://localhost:8080/ajax/index.jsp"></script>`

##### 1、例一 #####

利用资源请求方式向服务器申请一个空的jsp文件。

通过开发人员工具的newwork选项卡，可以看出此时对jsp文件的请求已经无法通过XHR筛选出来，同时可以通过js筛选出来。  
此时说明jsp文件是一个资源请求。

##### 2、例二 #####

向后台的jsp文件书写一些JavaScript代码，看看是否能够被响应  
![在这里插入图片描述][20200220175025518.png]  
可以响应

##### 3、例三 #####

如果在前端写一个function，后台能不能调用呢？

//前端代码：
    function hello(a){ 
    	alert(a);
    }

//后台代码：
    <%
    String abc="你好，我是服务器返回的响应";
    %>
    
    hello("<%=abc%>");

可以调用

> 结论：通过资源请求浏览器可以得到服务器的响应文本

##### 4、如何通过资源请求向服务器传递参数？ #####

##### 例四： #####

向服务器传递两个参数，并返回两个参数相加之后的结果。  
可以将向服务器传递的参数书写在资源请求的地址末尾。

//后台代码
    <%
    int m=Integer.parseInt(request.getParameter("m"));
    int n=Integer.parseInt(request.getParameter("n"));
    int result=m+n;
    %>
    hello("<%=result%>");

##### 5、 #####

人们认为，按照如下的格式书写JSONP代码更加符合编程的思想：  
**问题**：前端定义的函数后台要调用，那么函数名前后台要商量好。  
**解决**：将前端的函数名也作为一个普通参数传递给服务器，参数名为cb或callback。  
前端代码：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]  
后台代码：  
![在这里插入图片描述][20200220180801657.png]

# 三、原生JavaScript下的JSONP技术应用 #

//让后台调用下列函数
    			var result;
    
    			function getData(res) { 
    				result = res;
    			}
    
    			btn.onclick = function(event) { 
    				event.preventDefault();
    				//获取文本框中的数据
    				var exno = document.forms[0].exno;
    				var exname = document.forms[0].exname;
    
    				//动态创建对服务器文件的资源请求
    				var script = document.createElement("script");
    				script.type = "text/javascript";
    				script.src = "http://localhost:8080/ajax/checkGrade.jsp?cb=getData&exno=" + exno.value + "&exname=" + exname.value;
    				document.body.appendChild(script);
    
    				//对后台响应的文本进行分析
    				script.onload = function() { 
    					if(result.code === "1") { 
    						alert("您的成绩：" + result.grade);
    					} else { 
    						alert("没有查询到您的考生成绩");
    					}
    				}
    			}

# 四、jQuery下的JSONP技术应用 #

$("#btn").on("click", function(event) { 
    				event.preventDefault();
    				var $exno = $("input[name=exno]");
    				var $exname = $("input[name=exname]");
    
    				$.ajax({ 
    					type: "get",
    					url: "http://localhost:8080/ajax/checkGrade.jsp",
    					data: { 
    						exno: $exno.val(),
    						exname: $exname.val()
    					},
    					dataType: "jsonp",
    					jsonp: "cb",
    					success: function(res) { 
    						if(res.code === "1") { 
    							alert("您的成绩：" + res.grade);
    						} else { 
    							alert("没有查询到您的成绩");
    						}
    					}
    				})
    			})

# 五、总结： #

1.  JSONP技术的本质是向服务器发送了一个资源请求（并不是XHR请求）。
2.  JSONP需要后台和前端进行配合。

[20200220175025518.png]: https://img-blog.csdnimg.cn/20200220175025518.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200220180738200.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[20200220180801657.png]: https://img-blog.csdnimg.cn/20200220180801657.png