AJAX的跨域问题使用设置响应头和JsonP的方式实现跨域前端页面编写------AJAX

最新推荐文章于 2024-03-13 17:28:28 发布
最新推荐文章于 2024-03-13 17:28:28 发布
阅读量104 收藏
点赞数 1
分类专栏： AJAX 前端 计算机网络 文章标签： json html5 javascript node.js js vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/134520260
版权
前端 同时被 3 个专栏收录
350 篇文章 2 订阅
订阅专栏
计算机网络
134 篇文章 0 订阅
订阅专栏
AJAX
45 篇文章 0 订阅
订阅专栏 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://localhost:8081/Test/1.js"></script>
</head>
<body>
<!--    超链接可以跨域-->
    <a href="http://localhost:8081/Test/Test.html">走,跨个域</a>
<!--form表单测试-->
<form action="http://localhost:8081/Test/reg" method="post">
    用户名:<input type="text" name="username">
    密码:<input type="password" name="password">
    <input type="submit" value="注册">
</form>
<script type="text/javascript" src="JS/jQuery-1.0.0.js">
</script>
<script type="text/javascript">
    $(function(){
       $("#AjaxTrans").click(function(){
           let ajax = new XMLHttpRequest();
           ajax.onreadystatechange = function()
           {
               // 默认情况下,ajax发出跨域请求会有以下错误
//1.html:1  Access to XMLHttpRequest at 'http://localhost:8081/Test/hello'
//from origin 'http://localhost:8080' has been blocked by CORS policy:
//No 'Access-Control-Allow-Origin' header is present on the requested resource.
               //CORS策略阻止,这个ajax请求被同源策略阻止了
               //两个站点共享了xmlHttpRequest对象
               //因为页面的XmlHttpRequest对象不可以共享,一旦共享,对方就可以拿到我们的responseHtml
               //同源策略是浏览器的安全策略
               //协议,端口号,域名一致才是同源
               //同源才可以共享,不同源任何信息都不能共享
               //在我们此前所有的跳转和发送请求中,本质都是通过浏览器地址栏跳转来实现的,他们都没有安全问题
               //为什么ajax不行,因为只有它发送请求依靠的是我们浏览器内置的XmlHttpRequest对象
               //当我们A发送AJAX请求到B站点的时候,相当于我们两个站点共享了XmlHttpRequest对象
               //两个站点就都可以获取彼此的response信息,用户的宝贵信息就泄露了
               if (ajax.readyState === 4) {
                   if (ajax.status === 200) {
                       $("#MyDiv").html(ajax.responseText);
                   }
                   else
                   {
                       alert(ajax.status);
                   }
               }
           }
           ajax.open("GET","http://localhost:8081/Test/hello",true);
           ajax.send();
       });
    });
</script>
<button onclick="window.location.href='http://localhost:8081/Test/Test.html'">跳页面</button>
<button id="AjaxTrans">ajax跨域请求</button>
<div id="MyDiv"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://localhost:8081/Test/1.js"></script>
</head>
<body>
<!--    超链接可以跨域-->
    <a href="http://localhost:8081/Test/Test.html">走,跨个域</a>
<!--form表单测试-->
<form action="http://localhost:8081/Test/reg" method="post">
    用户名:<input type="text" name="username">
    密码:<input type="password" name="password">
    <input type="submit" value="注册">
</form>
<script type="text/javascript" src="JS/jQuery-1.0.0.js">
</script>
<script type="text/javascript">
    $(function(){
       $("#AjaxTrans").click(function(){
           let ajax = new XMLHttpRequest();
           ajax.onreadystatechange = function()
           {
               // 默认情况下,ajax发出跨域请求会有以下错误
//1.html:1  Access to XMLHttpRequest at 'http://localhost:8081/Test/hello'
//from origin 'http://localhost:8080' has been blocked by CORS policy:
//No 'Access-Control-Allow-Origin' header is present on the requested resource.
               //CORS策略阻止,这个ajax请求被同源策略阻止了
               //两个站点共享了xmlHttpRequest对象
               //因为页面的XmlHttpRequest对象不可以共享,一旦共享,对方就可以拿到我们的responseHtml
               //同源策略是浏览器的安全策略
               //协议,端口号,域名一致才是同源
               //同源才可以共享,不同源任何信息都不能共享
               //在我们此前所有的跳转和发送请求中,本质都是通过浏览器地址栏跳转来实现的,他们都没有安全问题
               //为什么ajax不行,因为只有它发送请求依靠的是我们浏览器内置的XmlHttpRequest对象
               //当我们A发送AJAX请求到B站点的时候,相当于我们两个站点共享了XmlHttpRequest对象
               //两个站点就都可以获取彼此的response信息,用户的宝贵信息就泄露了
               if (ajax.readyState === 4) {
                   if (ajax.status === 200) {
                       $("#MyDiv").html(ajax.responseText);
                   }
                   else
                   {
                       alert(ajax.status);
                   }
               }
           }
           ajax.open("GET","http://localhost:8081/Test/hello",true);
           ajax.send();
       });
    });
</script>
<button οnclick="window.location.href='http://localhost:8081/Test/Test.html'">跳页面</button>
<button id="AjaxTrans">ajax跨域请求</button>
<div id="MyDiv"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    //这里并不是后端的java代码调用了前端的js代码
    //实际上后端只负责响应一串字符串回去而已,调用JS代码的还是前端的浏览器
    function sayHello(json)
    {
        console.log("Hello" + json.name);
    }
    function sum(a,b)
    {
        console.log(a + b);
    }
</script>
    <script type="text/javascript" src="http://localhost:8081/Test/jsonP1?fun=sum">
        // script标签是可以跨域的,src属性可以是一个xxx.js文件
        //超链接不能,因为超链接会跳转页面,不能实现页面局部刷新效果
    </script>
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    //这里并不是后端的java代码调用了前端的js代码
    //实际上后端只负责响应一串字符串回去而已,调用JS代码的还是前端的浏览器
    function sayHello(json)
    {
        console.log("Hello" + json.name);
    }
    function sum(a,b)
    {
        console.log(a + b);
    }
</script>
    <script type="text/javascript" src="http://localhost:8081/Test/jsonP1?fun=sum">
        // script标签是可以跨域的,src属性可以是一个xxx.js文件
        //超链接不能,因为超链接会跳转页面,不能实现页面局部刷新效果
    </script>
</body>
</html>

// 封装一个函数,通过这个函数就可以获取页面中的元素了
function JQuery(selector)//可能时#id或者.class这样的类选择器
{
    if(typeof selector === "string")
    {
        // 设计思路根据CSS语法
        if (selector.charAt(0) === "#")
        {
            // 根据ID获取元素
            //这个是全局对象,是根据我们的ID获取的dom对象
            IE = document.getElementById(selector.substring(1));
            //返回JQuery对象,这个有html方法
            return new JQuery();
        }
    }
    if(typeof selector === "function")
    {
        window.onload = selector;
    }
    //定义一个HTML方法
    this.html = function(htmlStr)
    {
        IE.innerHTML = htmlStr;
    }
    //定义一个click函数代替onclick方法
    this.click = function(fun)
    {
        IE.onclick = fun;
    }
    //下拉栏变化
    this.change = function(fun)
    {
        IE.onchange = fun;
    }
    //由此可知
    this.val = function(value)
    {
        if(value === undefined)
        {
            return IE.value;
        }
        else
        {
            IE.value = value;
        }
    }
    //定义一个静态方法用来发送AJAX请求
    //JS中的静态方法也还是需要有这个对象的
    //传递参数如下,1.传递的数据2.请求方法3.url地址4.是否异步执行
    JQuery.ajax = function(JsonArgs)
    {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function()
        {
            if (this.readyState === 4)
            {
                if (this.status === 200)
                {
                    var JsonObj = JSON.parse(this.responseText);
                    JsonArgs.success(JsonObj);
                }
                else
                {
                    alert(this.status);
                }
            }
        }
        if(JsonArgs.type.toUpperCase() === "POST")
        {
            xhr.open("POST",JsonArgs.url,JsonArgs.async);
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(JsonArgs.data);
        }
        if(JsonArgs.type.toUpperCase() === "GET")
        {
            JsonArgs.type = "GET";
            xhr.open("GET",JsonArgs.url+"?"+JsonArgs.data,JsonArgs.async);
            xhr.send();
        }
    }
}
$ = JQuery;
//执行这个的目的是为了让静态方法能生效
new JQuery();

 // 封装一个函数,通过这个函数就可以获取页面中的元素了
function JQuery(selector)//可能时#id或者.class这样的类选择器
{
    if(typeof selector === "string")
    {
        // 设计思路根据CSS语法
        if (selector.charAt(0) === "#")
        {
            // 根据ID获取元素
            //这个是全局对象,是根据我们的ID获取的dom对象
            IE = document.getElementById(selector.substring(1));
            //返回JQuery对象,这个有html方法
            return new JQuery();
        }
    }
    if(typeof selector === "function")
    {
        window.onload = selector;
    }
    //定义一个HTML方法
    this.html = function(htmlStr)
    {
        IE.innerHTML = htmlStr;
    }
    //定义一个click函数代替onclick方法
    this.click = function(fun)
    {
        IE.onclick = fun;
    }
    //下拉栏变化
    this.change = function(fun)
    {
        IE.onchange = fun;
    }
    //由此可知
    this.val = function(value)
    {
        if(value === undefined)
        {
            return IE.value;
        }
        else
        {
            IE.value = value;
        }
    }
    //定义一个静态方法用来发送AJAX请求
    //JS中的静态方法也还是需要有这个对象的
    //传递参数如下,1.传递的数据2.请求方法3.url地址4.是否异步执行
    JQuery.ajax = function(JsonArgs)
    {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function()
        {
            if (this.readyState === 4)
            {
                if (this.status === 200)
                {
                    var JsonObj = JSON.parse(this.responseText);
                    JsonArgs.success(JsonObj);
                }
                else
                {
                    alert(this.status);
                }
            }
        }
        if(JsonArgs.type.toUpperCase() === "POST")
        {
            xhr.open("POST",JsonArgs.url,JsonArgs.async);
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(JsonArgs.data);
        }
        if(JsonArgs.type.toUpperCase() === "GET")
        {
            JsonArgs.type = "GET";
            xhr.open("GET",JsonArgs.url+"?"+JsonArgs.data,JsonArgs.async);
            xhr.send();
        }
    }
}
$ = JQuery;
//执行这个的目的是为了让静态方法能生效
new JQuery();

alert("我是B应用的文件");

 alert("我是B应用的文件");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>欢迎来到测试应用</h1>
</body>
</html>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>欢迎来到测试应用</h1>
</body>
</html>

【Ajax】HTTP相关问题-GET-POST-XHR使用-jQuery中的ajax-跨域-同源-jsonp-cors
YK菌的博客
02-23 3万+
文章目录1. Ajax概述1.1 AJAX 简介1.2 XML 简介1.3 AJAX 的特点1.3.1 AJAX 的优点1.3.2 AJAX 的缺点2. 原生AJAX 的基本使用2.0 准备工作2.1 核心对象2.2 使用步骤2.3 使用案例1. GET 请求设置请求参数2. POST请求2.4 解决IE 缓存问题2.5 AJAX 请求状态3. jQuery 中的AJAX3.1 get 请求3.2 post 请求4. 跨域4.1 同源策略4.2 如何解决跨域4.2.1 JSONP4.2.2 CORS 1.
Ajax 设置Access-Control-Allow-Origin实现跨域访问
12-10
ajax跨域访问是一个老问题了，解决方法很多，比较常用的是JSONP方法，JSONP方法是一种非官方方法，而且这种方法只支持GET方式，不如POST方式安全。 即使使用jQuery的jsonp方法，type设为POST，也会自动变为GET。 ...
ajax 设置响应标头,jQuery和AJAX响应头
weixin_39902875的博客
08-06 384
The unfortunate truth about AJAX and the 302 redirect is that you can't get the headers from the return because the browser never gives them to the XHR. When a browser sees a 302 it automatically app...
Ajax：ajax实现跨域解决方案jsonp
dengfengling999的博客
07-23 1411
才发送请求，然后执行servlet，servlet给它响应一段js代码回去，它接收到js代码解释并执行，显示效果，它并没有达到局部刷新的效果，我们让它达到局部刷新的效果，我们点击某一个按钮，我们让它局部刷新，显然上面让页面打开的时候加载script标签就不行了，我们可以让他先加载完，点击页面某一个按钮去加载script标签，来达到页面的局部刷新，整个过程跟ajax没有关系。当out.print("sayHello({\"name\"\"jackson\"})")重新刷新页面响应成功。......
AJAX的跨域问题使用设置响应头和JsonP的方式实现跨域------AJAX
春风若有怜花意，可否许我再少年
11-18 334
AJAX的跨域问题使用设置响应头和JsonP的方式实现跨域------AJAX
使用Ajax发起JSONP请求
qq_43808342的博客
12-18 2117
对基于Ajax发起的JSONP请求做了一个简单的总结
onreadystatechange 事件
dengjuanshou7445的博客
08-26 264
当请求被发送到服务器时，我们需要执行一些基于响应的任务。 每当 readyState 改变时，就会触发 onreadystatechange 事件。 readyState 属性存有 XMLHttpRequest 的状态信息。 下面是 XMLHttpRequest 对象的三个重要的属性： 属性描述 onreadystatechange 存储函数（或函数名），每当 r...
Ajax跨域请求解决方案-JSONP
12-03
本文将详细介绍JSONP的工作原理以及如何在ASP.NET网站开发中应用JSONP解决Ajax跨域问题。 首先，理解JSONP的基本概念。JSONP是一种非官方的数据交换格式，它的核心思想是利用HTML中的`<script>`标签不受同源策略...
ajax 设置Access-Control-Allow-Origin实现跨域访问
06-06
ajax跨域访问是一个老问题了，解决方法很多，比较常用的是JSONP方法，JSONP方法是一种非官方方法，而且这种方法只支持GET方式，不如POST方式安全。 即使使用jquery的jsonp方法，type设为POST，也会自动变为GET。如果...
基于vue-resource jsonp跨域问题的解决方法
11-28
最近在学习vue.js 碰到个ajax跨域请求的问题，之前知道可以用jsonp解决，但是一直没实践过，这次用发现里面好多问题，所以现在记录下来，希望可以给刚接触使用jsonp的同学一点帮助！ 关于什么是jsonp，以及为什么要...
原生JS实现ajax与ajax的跨域请求实例
11-27
一、原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步：设置状态监听函数 第三步：open一个连接，true是异步请求 第四部：send一个请求，可以发送一个对象和字符串，不需要传递数据发送null 第五步：在监听函数中，判断readyState=4&&status=200表示请求成功 第六步：使用responseText、responseXML接受响应数据，并使用原生JS操作DOM进行显示 var ajax = new XMLHttpRequest(); ajax.onreadystatechange = function(){ console.log(ajax.r
AJAX基本知识，解决跨域（JSONP和CORS）
m0_59411260的博客
10-09 446
ajax相关知识
前端跨域解决方案
一家外包公司的码农，专职前端开发
05-17 1191
预检请求：对于非简单请求（如请求方式为PUT、DELETE、PATCH、Content-Type不为text/plain等），浏览器会先发送一个OPTIONS的预检请求（Preflight），服务器端需要返回Access-Control-Allow-Headers、Access-Control-Allow-Methods和Access-Control-Allow-Origin等头部信息来进行配置，来决定是否允许跨域访问。保存配置文件之后，重启 Nginx，然后在前端项目中就可以访问代理服务器了。
ajax跨域解决方案：jsonp方式
menghuannvxia的专栏
09-18 331
jsonp 只支持get请求不支持post请求 用法说明： ①dataType改为jsonp ②jsonp : "jsonpCallback"————发送到后端实际为http://a.a.com/a/FromServlet?userName=644064&jsonpCallback=jQueryxxx ③后端获取get请求中的jsonpCallback ④构造回调结构 前端 $.ajax({ type : "GET", async : false, url :...
JS中ajax请求跨域的几种方法
web_noob的博客
12-10 734
在此我只讲跨域的解决方法，什么是跨域什么是浏览器同源策略这些请自行搜索。 1.跨域资源共享（CORS） CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。 服务器端对于CORS的支持，主要就是通过...
JS - Ajax 跨域篇
陆氪和他的那些代码
01-01 520
1、浏览器的限制：当浏览器发现你的请求是跨域的时候，会做校验，如果校验不通过，将会报跨域安全问题。浏览器多管闲事, get请求能正常返回，但是浏览器会报错；说明后台是没问题的，只是浏览器的限制问题。 2、跨域：发出去的请求只要域名，端口，协议中有一个不同，都会产生跨域。 3、发送的是xhr（XMLHTTPRequest）请求，如果发送的不是xhr请求，就算是跨域，浏览器也不会报错。 4、...
ajax请求js跨域,Ajax跨域请求数据实例（JSOPN方式）
weixin_32616931的博客
08-05 506
今天在做取消申请的时候遇到了一个跨域ajax提交的问题。情景是：系统A是asp.net的站点，其中包括一个取消申请的接口(get方式通过参数提交到系统的某一个页面，然后返回提交成功或失败)系统B为调用系统，php的站点，需要在页面中通过js调用这个取消接口。由于A，B分别在不同的域名下，因此ajax调用的时候遇到了跨域的情况。参考了：http://www.cnblogs.com/twobin/p/...
js【详解】ajax （含XMLHttpRequest、 同源策略、跨域、JSONP）
最新发布
朝阳39的博客
03-13 1280
借助 script 标签 向目标服务器加载到 jsonp.js 文件，执行 callback 函数，因本地已定义了 callback 函数，便会触发本地 js 代码的执行，获取到 jsonp.js 文件中的数据，从而实现了跨域。服务器设置 http header，即服务器端将指定网址设置为白名单，允许它以指定的方法进行跨域访问。JSONP 实现跨域的过程：借助 script 标签没有同源策略限制的特点，向跨域的目标服务器加载到需要的数据。所有的跨域，都必须经过 server 端允许和配合。
Ajax跨域问题
helpluozhao123的博客
11-03 3533
ajax 是不能跨域。那么怎么解决前端发送请求的跨域问题呢。超详细，1、设置响应头、2、通过jsonp 3、通过调用jQuery封装的jsonp 4、httpclient 5、nginx
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值