• Ajax：ajax实现跨域解决方案jsonp

    目录：

    （1）ajax跨域解决方案值jsonp方式初步

    （2）ajax跨域解决方案值jsonp方式深入

    （3）ajax跨域解决方案之jQuery封装jsonp

    （1）ajax跨域解决方案值jsonp方式初步

     

    ajax2.html:

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>jsonp实现跨域title>
    6. head>
    7. <body>
    8.  
    9. <script type="text/javascript">
    10.     /**
    11.      * 这是我自定义的函数
    12.      */
    13.     function sayHello(data){
    14.         //alert("hello world!")
    15.         alert("hello," + data.name)
    16.     }
    17.  
    18.     function sum(){
    19.         alert("求和。。。")
    20.     }
    21. script>
    22.  
    25. <script type="text/javascript" src="http://localhost:8081/b/jsonp1?fun=sum">script>
    26.  
    27. body>
    28. html>

     

     JSONPServlet1:

    1. package com.bjpowernode.b.web.servlet;
    2.  
    3.  
    4.  
    5. import javax.servlet.ServletException;
    6. import javax.servlet.annotation.WebServlet;
    7. import javax.servlet.http.HttpServlet;
    8. import javax.servlet.http.HttpServletRequest;
    9. import javax.servlet.http.HttpServletResponse;
    10. import java.io.IOException;
    11. import java.io.PrintWriter;
    12.  
    13. @WebServlet("/jsonp1")
    14. public class JSONPServlet1 extends HttpServlet {
    15.     @Override
    16.     protected void doGet(HttpServletRequest request, HttpServletResponse response)
    17.             throws ServletException, IOException {
    18.  
    19.         // 在后台输出
    20.         //System.out.println("jsonp方式完成跨域访问");
    21.  
    22.         // 向前端响应一段js代码呢？
    23.         PrintWriter out = response.getWriter();
    24.         //out.print("alert(123)"); // 这是响应一段js代码，只不过这个alert函数是JS内置的函数，可以直接用。
    25.         // 注意：不要误以为是后端java代码调用了sayHello()函数，实际上后端只负责响应一个字符串回去。
    26.         // 真正的调用者，还是浏览器，浏览器接收到这个字符串之后，会自动将这个字符串当做一段js代码解释执行。
    27.         //out.print("sayHello()"); // 这也是响应一段JS代码。只不过这个sayHello函数是程序员自定义的。
    28.  
    29.         //响应一段js代码，然后传一个json数据给前端
    30.         //out.print("sayHello({\"name\" : \"jackson\"})");
    31.  
    32.         // 动态获取函数名
    33.         String fun = request.getParameter("fun");
    34.         //out.print(fun + "({\"name\" : \"jackson\"})");
    35.         out.print(fun + "()");
    36.  
    37.     }
    38. }

    out.print会向前端

    才发送请求， 然后执行servlet，servlet给它响应一段js代码回去，它接收到js代码解释并执行，显示效果，它并没有达到局部刷新的效果，我们让它达到局部刷新的效果，我们点击某一个按钮，我们让它局部刷新，显然上面让页面打开的时候加载script标签就不行了，我们可以让他先加载完，点击 页面某一个按钮去加载script标签，来达到页面的局部刷新，整个过程跟ajax没有关系

    设计一个按钮点击之后触发script，发起请求，从后端获取数据之后，再把获取到的数据在下方div中显示 

    ajax3.html:

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>jsonp跨域title>
    6. head>
    7. <body>
    8.  
    10.  
    11. <script type="text/javascript">
    12.   // 自定义的函数
    13.   function sayHello(data){ // data是一个json：{"username" : "lucy"}
    14.     document.getElementById("mydiv").innerHTML = data.username
    15.   }
    16.  
    17.   window.onload = () => {
    18.     document.getElementById("btn").onclick = () => {
    19.       // 加载script元素
    20.       // 创建script元素对象
    21.       const htmlScriptElement = document.createElement("script");
    22.       // 设置script的type属性
    23.       htmlScriptElement.type = "text/javascript"
    24.       // 设置script的src属性
    25.       htmlScriptElement.src = "http://localhost:8081/b/jsonp2?fun=sayHello"
    26.       // 将script对象添加到body标签中（这一步就是加载script）
    27.       document.getElementsByTagName("body")[0].appendChild(htmlScriptElement)
    28.     }
    29.   }
    30. script>
    31.  
    32. <button id="btn">jsonp解决跨域问题，达到ajax局部刷新的效果button>
    33.  
    34. <div id="mydiv">div>
    35.  
    36. body>
    37. html>

    JSONPServlet2:

    1. package com.bjpowernode.b.web.servlet;
    2.  
    3.  
    4. import javax.servlet.ServletException;
    5. import javax.servlet.annotation.WebServlet;
    6. import javax.servlet.http.HttpServlet;
    7. import javax.servlet.http.HttpServletRequest;
    8. import javax.servlet.http.HttpServletResponse;
    9. import java.io.IOException;
    10.  
    11. @WebServlet("/jsonp2")
    12. public class JSONPServlet2 extends HttpServlet {
    13.     @Override
    14.     protected void doGet(HttpServletRequest request, HttpServletResponse response)
    15.             throws ServletException, IOException {
    16.         // 获取函数名
    17.         String fun = request.getParameter("fun");
    18.         // 响应一段js代码 lucy可能是从数据库查询的名字
    19.         response.getWriter().print(fun + "({\"username\" : \"lucy\"})");
    20.     }
    21. }

    点击按钮：

     

    （3）ajax跨域解决方案之jQuery封装jsonp

     

     把别人封装好的jQuery库复制到项目中：

     ajax4.html:

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>jQuery的jsonp封装解决ajax跨域问题title>
    6. head>
    7. <body>
    8.  
    10. <script type="text/javascript" src="/a/js/jquery-3.6.0.min.js">script>
    11.  
    12. <script type="text/javascript">
    13.  
    14.     // 这个函数不需要你写，jQuery可以自动帮助你生成
    15.     //function jQuery3600508253314856699_1655528968612(json){ // 系统自动生成的这个函数默认情况，会自动调用success的回调函数。 }
    16.  
    17.     
    18.     $(function(){
    19.         $("#btn").click(function(){
    20.             // 发送所谓的ajax请求（其实本质上并不是一个ajax请求。只是披着ajax的皮。乔装打扮的ajax。）
    21.             $.ajax({
    22.                 type : "GET", // jsonp请求只支持get请求。
    23.                 // 虽然这里的url是这样写的，但实际上发送的请求是：/b/jsonp3?callback=jQuery3600508253314856699_1655528968612&_=1655528968613
    24.                 // callback=jQuery3600508253314856699_1655528968612
    25.                 // callback就是我们之前的fun
    26.                 // jQuery3600508253314856699_1655528968612就是我们之前的sayHello，而这个名字是jQuery自动为我们生成的。
    27.                 url : "http://localhost:8081/b/jsonp3",
    28.                 dataType : "jsonp", // 指定数据类型是jsonp形式。【最关键的是它】
    29.                 success : function(data){ // data变量用来接收服务器端的响应(data是一个json：{"username":"lisi"})
    30.                     $("#mydiv").html("欢迎你：" + data.username)
    31.                 }
    32.             })
    33.         })
    34.     })
    35. script>
    36.  
    37. <button id="btn">jQuery库封装的jsonpbutton>
    38.  
    39. <div id="mydiv">div>
    40.  
    41. body>
    42. html>

     

    JSONPServlet3:

    1. package com.bjpowernode.b.web.servlet;
    2.  
    3.  
    4.  
    5. import javax.servlet.ServletException;
    6. import javax.servlet.annotation.WebServlet;
    7. import javax.servlet.http.HttpServlet;
    8. import javax.servlet.http.HttpServletRequest;
    9. import javax.servlet.http.HttpServletResponse;
    10. import java.io.IOException;
    11.  
    12. @WebServlet("/jsonp3")
    13. public class JSONPServlet3 extends HttpServlet {
    14.     @Override
    15.     protected void doGet(HttpServletRequest request, HttpServletResponse response)
    16.             throws ServletException, IOException {
    17.  
    18.         // 获取函数名 默认的是callback
    19.         String callback = request.getParameter("callback");
    20.  
    21.         // 响应一段js代码，调用函数
    22.         response.getWriter().print(callback + "({\"username\":\"lisi\"})");
    23.     }
    24. }

    可以自己设置回调函数：

     ajax4.html：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>jQuery的jsonp封装解决ajax跨域问题title>
    6. head>
    7. <body>
    8.  
    10. <script type="text/javascript" src="/a/js/jquery-3.6.0.min.js">script>
    11.  
    12. <script type="text/javascript">
    13.  
    14.     // 这个函数不需要你写，jQuery可以自动帮助你生成
    15.     //function jQuery3600508253314856699_1655528968612(json){ // 系统自动生成的这个函数默认情况，会自动调用success的回调函数。 }
    16.  
    17.     // 自定义的函数
    18.     function sayHello(data){
    19.         $("#mydiv").html("欢迎你：" + data.username)
    20.     }
    21.  
    22.     $(function(){
    23.         $("#btn").click(function(){
    24.             // 发送所谓的ajax请求（其实本质上并不是一个ajax请求。只是披着ajax的皮。乔装打扮的ajax。）
    25.             $.ajax({
    26.                 type : "GET", // jsonp请求只支持get请求。
    27.                 // 虽然这里的url是这样写的，但实际上发送的请求是：/b/jsonp3?callback=jQuery3600508253314856699_1655528968612&_=1655528968613
    28.                 // callback=jQuery3600508253314856699_1655528968612
    29.                 // callback就是我们之前的fun
    30.                 // jQuery3600508253314856699_1655528968612就是我们之前的sayHello，而这个名字是jQuery自动为我们生成的。
    31.                 url : "http://localhost:8081/b/jsonp3",
    32.                 dataType : "jsonp", // 指定数据类型是jsonp形式。【最关键的是它】
    33.                 jsonp : "fun", // 不采用默认的参数名callback，用这个属性来指定具体的参数名。
    34.                 jsonpCallback : "sayHello" // 不采用默认的回调函数，用这个属性来指定具体的回调函数。
    35.                 /*success : function(data){ // data变量用来接收服务器端的响应(data是一个json：{"username":"lisi"})
    36.                     $("#mydiv").html("欢迎你：" + data.username)
    37.                 }*/
    38.             })
    39.         })
    40.     })
    41. script>
    42.  
    43. <button id="btn">jQuery库封装的jsonpbutton>
    44.  
    45. <div id="mydiv">div>
    46.  
    47. body>
    48. html>

    JSONPServlet3:

    1. package com.bjpowernode.b.web.servlet;
    2.  
    3.  
    4.  
    5. import javax.servlet.ServletException;
    6. import javax.servlet.annotation.WebServlet;
    7. import javax.servlet.http.HttpServlet;
    8. import javax.servlet.http.HttpServletRequest;
    9. import javax.servlet.http.HttpServletResponse;
    10. import java.io.IOException;
    11.  
    12. @WebServlet("/jsonp3")
    13. public class JSONPServlet3 extends HttpServlet {
    14.     @Override
    15.     protected void doGet(HttpServletRequest request, HttpServletResponse response)
    16.             throws ServletException, IOException {
    17.  
    18.         // 获取函数名 默认callback
    19.         //String callback = request.getParameter("callback");
    20.         String callback = request.getParameter("fun");
    21.  
    22.         // 响应一段js代码，调用函数
    23.         response.getWriter().print(callback + "({\"username\":\"lisi\"})");
    24.     }
    25. }

    启动项目：如果这个jQuery报404，可能是没有导入到项目中，可以去项目的底层目录下去查看

     发现真的没有赋值的那个jQuery-3.6.0.min.js

     这时需要   Rebuild一下a Model

     在查看底层目录下，就出现了js目录

     重新刷新页面：响应成功

  • 相关阅读:
    Rtools安装方法
    leetcode82-Remove Duplicates from Sorted List II
    ICMP Ping实现
    Spring的概念和核心注解
    案例分享 | 纽扣电池石墨片厚度及缺陷检测
    程序员福音，关于如何使用Markdown写出一份漂亮的简历 —— 程序员简历 | md文档简历制作教程
    Leetcode 位运算
    Oracle 19c LISTAGG 函数中distinct
    工业互联网标识解析的数据安全风险有哪些？
    23、Plenoxels: Radiance Fields without Neural Networks
  • 原文地址：https://blog.csdn.net/dengfengling999/article/details/125949527