首页 > 其他分享 >Ajax跨域问题2

Ajax跨域问题2

时间：2023-05-31 15:09:02浏览次数：34  
标签：http 跨域 jakarta 问题 Ajax jsonp import servlet 请求

1. ajax跨域接上

2 方案3：jQuery封装的jsonp   37

- 牛人们写的jQuery库，已经对jsonp进行了封装。大家可以直接拿来用。

- 用之前需要引入jQuery库的js文件。（这里的jQuery库咱们就不再封装了，咱们直接用jQuery写好的jsonp方式。）

- jQuery中的jsonp其实就是我们方案2的高度封装，底层原理完全相同。

- 核心代码

 $.ajax({
        type : "GET",
        url : "跨域的url",
        dataType : "jsonp", // 指定数据类型
        jsonp : "fun", // 指定参数名（不设置的时候，默认是："callback"）
        jsonpCallback : "sayHello" // 指定回调函数的名字
    							   // （不设置的时候，jQuery会自动生成一个随机的回调函数，
        						   //并且这个回调函数还会自动调用success的回调函数。）
    })

2.1演示   37

代码在E:\java学习\Ajax\course\course11\web      36

ajax4.html
<!--jQuery的jsonp封装解决Ajax跨域问题  37-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的jsonp封装解决Ajax跨域问题</title>
</head>
<body>

<!--引入jQuery库 这个jQuery库是官方的-->
<script type="text/javascript" src="/a/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">

    // 这个函数不需要你写，jQuery可以自动帮助你生成
    /*function jQuery3600508253314856699_1655528968612(json){
       //系统自动生成的这个函数默认情况，会自动调用success的回调函数。
    }*/

    // 自定义的函数
    function sayHello(data){
        $("#mydiv").html("欢迎你：" + data.username)
    }

    $(function (){
        $("#btn").click(function (){
            // 发送所谓的ajax请求（其实本质上并不是一个ajax请求。只是披着ajax的皮。乔装打扮的ajax。）
            $.ajax({

                type:"GET",//jsonp请求只支持get请求

                // 虽然这里的url是这样写的，但实际上发送的请求是：/b/jsonp3?callback=jQuery3600508253314856699_1655528968612&_=1655528968613
                // callback=jQuery3600508253314856699_1655528968612
                // callback就是我们之前的fun
                // jQuery3600508253314856699_1655528968612就是我们之前的sayHello，
                // 而这个名字是jQuery自动为我们生成的。
                url:"http://localhost:8081/b/jsonp3",
                dataType:"jsonp",//指定数据类是jsonp形式

                //如果不想写下面的success参数
                //可以这样写
                jsonp : "fun", // 不采用默认的参数名callback，用这个属性来指定具体的参数名。
                jsonpCallback : "sayHello" // 不采用默认的回调函数，用这个属性来指定具体的回调函数。

               /* success:function (data){//data变量用来接收服务器短的响应（data是一个json{"username":"lisi"}）
                    $("#mydiv").html("欢迎你："+data.username)
                }*/
            })
        })
    })
</script>

<button id="btn"> jQuery库封装的jsonp</button>
<div id="mydiv"></div>
</body>
</html>

在course11_1中

com.bjpowernode.b.web.servlet
TargetServlet
package com.bjpowernode.b.web.servlet;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
//演示代理机制的跨域请求问题  39

@WebServlet("/target")
public class TargetServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //响应一个json字符串
        response.getWriter().print("{\"username\":\"jackson\"}");
    }
}

3. 方案4：代理机制（httpclient）  38

Ajax跨域问题2_json

- 使用Java程序怎么去发送get/post请求呢？【GET和POST请求就是HTTP请求。】

  - 第一种方案：使用JDK内置的API（java.net.URL.....），这些API是可以发送HTTP请求的。

  - 第二种方案：使用第三方的开源组件，比如：apache的httpclient组件。（httpclient组件是开源免费的，可以直接用）

- 在java程序中，使用httpclient组件可以发送http请求。

  - 对于httpclient组件的代码，大家目前可以不进行深入的研究，可以从网上直接搜。然后粘贴过来，改一改，看看能不能完成发送get和post请求。

这里的代码在course11_2里面这里不是重点就不做展示了   38

  - 使用httpclient组件，需要先将这个组件相关的jar包引入到项目当中。

3.1 演示代理机制的跨域请求问题  39

代码在 com.bjpowernode.javaweb.servlet    39

ProxyServlet

package com.bjpowernode.javaweb.servlet;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;

//演示代理机制的跨域请求问题  39
@WebServlet("/proxy")
public class ProxyServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //通过httpclient组件，发送HTTP get请求，访问TargetServlet
        HttpGet httpGet = new HttpGet("http://localhost:8081/b/target");

        // 设置类型 "application/x-www-form-urlencoded" "application/json"
        httpGet.setHeader("Content-Type", "application/x-www-form-urlencoded");
        //System.out.println("调用URL: " + httpGet.getURI());

        // httpClient实例化
        CloseableHttpClient httpClient = HttpClients.createDefault();
        // 执行请求并获取返回
        HttpResponse resp = httpClient.execute(httpGet);
        HttpEntity entity = resp.getEntity();
        //System.out.println("返回状态码：" + response.getStatusLine());

        // 显示结果
        BufferedReader reader = new BufferedReader(new InputStreamReader(entity.getContent(), "UTF-8"));
        String line = null;
        StringBuffer responseSB = new StringBuffer();
        while ((line = reader.readLine()) != null) {
            responseSB.append(line);
        }
        reader.close();

        httpClient.close();

        //b站点相应回来的数据
        //然后继续将数据响应回去
        response.getWriter().print(responseSB);
    }
}

E:\java学习\Ajax\course\course11\web 

ajax5.html

<!--使用代理机制完成ajax的跨域访问  39-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用代理机制完成ajax的跨域访问</title>
</head>
<body>

<script type="text/javascript">
    window.onload = ()=>{
        document.getElementById("btn").onclick=()=>{
            // 发送ajax请求
            // 1.创建核心对象
            const xmlHttpRequest = new XMLHttpRequest(); // const可以声明变量。(可以自己研究一下：var let const声明变量时有什么区别)
            // 2.注册回调函数
            xmlHttpRequest.onreadystatechange = () => {
                if (xmlHttpRequest.readyState == 4) {
                    // 这里也可以使用区间的方式，因为状态码是200~299都是正常响应结束。
                    if (xmlHttpRequest.status >= 200 && xmlHttpRequest.status < 300) {

                        document.getElementById("mydiv").innerHTML = xmlHttpRequest.responseText


                        /*var jsonObj = JSON.parse(xmlHttpRequest.responseText);
                        document.getElementById("mydiv").innerHTML = jsonObj.username*/

                    }
                }
            }
            // 3.开启通道
            xmlHttpRequest.open("GET", "/a/proxy", true)
            // 4.发送请求
            xmlHttpRequest.send()
        }
    }
</script>

<button id="btn">使用代理机制完成ajax的跨域访问</button>
<div id="mydiv"></div>

</body>
</html>

在course11_1中

com.bjpowernode.b.web.servlet

TargetServlet

package com.bjpowernode.b.web.servlet;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
//演示代理机制的跨域请求问题  39

@WebServlet("/target")
public class TargetServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //响应一个json字符串
        response.getWriter().print("{\"username\":\"jackson\"}");
    }
}

4 方案5：nginx反向代理  39

- nginx反向代理中也是使用了这种代理机制来完成AJAX的跨域，只要修改一个nginx的配置即可。以后大家学习nginx之后再说吧。！！！！

标签：http,跨域,jakarta,问题,Ajax,jsonp,import,servlet,请求
From： https://blog.51cto.com/u_15784725/6386847

相关文章

  • ajax实现搜索联想补全
    1. 什么是搜索联想？自动补全？  40  - 百度是一个很典型的代表。在百度的搜索框中输入相关信息的时候，会有搜索联想以及自动补全。  - 搜索联想和自动补全：实际上是为了方便用户的使用。让用户的体验更好。  - 搜索联想：当用户输入一些单词之后，自动联想出用户要搜索的信息，给......
  • 使用神经网络-垃圾邮件检测-LSTM或者CNN（一维卷积）效果都不错【代码有问题，pass】
     fromsklearn.feature_extraction.textimportCountVectorizerimportosfromsklearn.naive_bayesimportGaussianNBfromsklearn.model_selectionimporttrain_test_splitfromsklearnimportmetricsimportmatplotlib.pyplotaspltimportnumpyasnpfromskle......
  • java8 stream 数据丢失（错乱）的问题
    说明原因：使用的java8的parallelparrStream是并行的，但是.collect(Collectors.toList())使用了非线程安全的集合。修改办法：修改办法1：把parallelparrStream改为普通的stream；修改办法2：  Collectors.toList()改为并行集合。list.parallelparrStream().map(it......
  • 考试题加面试常问问题
    1编写⼀个函数，接受⼀个字符串作为参数，并返回该字符串的反转结果2写出你知道的Python魔法⽅法及作⽤（5个以上）defreverse_string(string):returnstring[::-1]init(self,...):初始化⽅法，⽤于在创建对象时进⾏初始化操作。str(self):返回对象的字符串表示，可以通过str(obj)......
  • 前端 React + vite + Typescript 后端 java + springmvc + jwt 跨域 解决方案
    首先后端配置跨域：web.xml文件： <!--配置跨域--><filter><filter-name>header</filter-name><filter-class>org.zhiyi.config.Cross</filter-class></filter><filter-mapping><......
  • 关于F5透传问题的解析
       当负载均衡工作在透传模式中时，所防护服务器无法感知到负载均衡设备的存在，对于访问者来说，服务器的IP地址就是负载均衡设备的VIP地址。在这种模式下，当负载均衡设备收到源为访问者的IP，目的IP为本地VIP地址的报文时，会将报文根据负载均衡策略和健康状况发送给最优的服务器上，......
  • Vue+.net core 7 api跨域
    nginx的不说，直接说在项目中配置的。重点：前端要配代理，后端要设置返回的头文件信息。双管齐下1、前端在项目中的vue.config.js配置中进行设置module.exports={publicPath:'/',outputDir:'dist',//发布输入文件assetsDir:'static',//需要/demo目录下放打包后......
  • 报错问题谷粒商城 Oss endpoint can‘t be empty
    报错信息：Causedby:java.lang.IllegalArgumentException:Ossendpointcan’tbeempty.网上查了一下说有两种可能第一种是springboot和springcloud版本不对应第二种错误说的是oss.yml格式错误 建议优先检查yml格式我的因为那天改配置的时候被家里猫按到了，然后没有发现，检......
  • wireshark分析tcp传输之文件上传速率问题
    在网络性能问题排查思路那一节里，我提到了查看系统网络瓶颈的方法以及排查丢包问题的手段。但就此分析网络问题还不够精细，有时网络资源并没有达到瓶颈，或者并没有丢包产生，但是网络传输速率就是很慢，或者有丢包产生，但无法知道丢包的详细过程，无法知道整个tcp传输过程的具体情况。如何......
  • 【解决一个小问题】macbook m2 上交叉编译 gozstd
    作者:张富春(ahfuzhang)，转载时请注明作者和引用链接，谢谢！cnblogs博客zhihuGithub公众号:一本正经的瞎扯已知zstd是一个优秀的压缩库，gozstd封装了这个库。一开始在macbookm2芯片的笔记本上开发包含了gozstd的程序时，一切正常。发布的时候，需要分别编译linux+arm64......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99