search
HomeWeb Front-endJS TutorialJsonp solves the cross-domain problem of ajax

This time I will bring you Jsonp to solve the cross-domain problem of ajax. What are the precautions for Jsonp to solve the cross-domain problem of ajax. The following is a practical case, let's take a look.

1. Introduction

There have been a lot of cross-domain issues recently, and I happened to see this one, so I summarized it, about JSONP There are indeed a lot of things on Baidu, and many people copy others. If this continues, I can actually find only a few pieces of information. The key is that I still can’t understand it. It may be a matter of ability. After many attempts, I have summarized it. After a while, I finally figured it out. One thing to note is that Jsonp is used here to solve the cross-domain problem of ajax. The specific implementation is not actually ajax.

1. Same-Origin Policy

Browsers have a very important concept - Same-Origin Policy. The so-called same origin means that the domain name, protocol and port are the same. Client-side scripts (JavaScript, ActionScript) from different sources cannot read or write each other's resources without explicit authorization.

2. JSONP

JSONP (JSON with Padding) is a "usage mode" of JSON that can be used to solve the problem of cross-domain data access by mainstream browsers . Due to the same-origin policy, generally speaking, web pages located at server1.example.com cannot communicate with servers other than server1.example.com, with the exception of the HTML script element. Using this open policy of the <script> element, web pages can obtain JSON data dynamically generated from other sources, and this usage pattern is called JSONP. The data captured with JSONP is not JSON, but arbitrary JavaScript, which is executed with a JavaScript interpreter instead of parsed with a JSON parser. </script>

2. Practice

1. Simulate cross-domain requests

Make two on this machine There is a tomcat, and the ports are 8080 and 8888 respectively, which meets the condition of non-same origin. If you send ajax from one port to obtain data from another port, a cross-domain request problem will definitely be reported.

Jsonp solves the cross-domain problem of ajax

There are two projects here, namely jsonp (8080) and other (8888). The index.jsp in the jsonp project is as follows:

nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<title>Insert title here</title>
<script></script>
<script>
function jsonp_fun(){
$.ajax({
url:&#39;http://localhost:8888/other/index.jsp&#39;,
type:&#39;post&#39;,
dataType:&#39;text&#39;,
success:function(data){
console.log(data);
}
});
}
</script>


<input>

other (8888) The index.jsp in the project is as follows: // Because jsp is actually a servlet, jsp is used here instead of servlet for demonstration.

nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<title>Insert title here</title>
<script></script>


other domain

In fact, the above view is nothing more than clicking the ajax button on the jsonp page to obtain the data in other pages.

The results are as follows: chrome console

Jsonp solves the cross-domain problem of ajax

##XMLHttpRequest cannot load http://localhost:8888/other/index.jsp. No 'Access-Control- Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

The above tips refer to cross-domain issues. You cannot access 8888 from the 8080 domain. domain resources.

2. Use the script tag to access js files in other domains

Because the src of the <script> tag supports cross-domain requests. The most common one is the application of CDN services. For example, in my project, if I want to use jQuery, but there is no js file, it will take a long time to download it, and I don’t know if the version is correct, then I can search jquery cdn on Baidu. I can find one at random, such as bootstrap's CDN: http://www.bootcdn.cn/jquery/. There are many versions for you to choose from. Just add it to the project. The biggest disadvantage is that if you don't have an Internet connection, just import it. It’s not coming. <p style="text-align: left;"><p style="text-align: left;">2.1 Create the js/other.js file in the other root path. <strong>The content is as follows: <pre class="brush:php;toolbar:false">alert(&quot;this is other(8888) js&quot;);&lt;p style=&quot;text-align: left;&quot;&gt;2.2 In jsonp/index.jsp, add the script tag , import other's js&lt;strong&gt;&lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;&lt;script type=&quot;text/javascript&quot; src=&quot;http://localhost:8888/other/js/other.js&quot;&gt;&lt;/script&gt; into http://localhost:8080/jsonp/index.jsp, an alert will pop up immediately, indicating that the imported js file is automatically executed, and the cross-domain request for js is successful. &lt;p style=&quot;text-align: left;&quot;&gt;&lt;/p&gt; &lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;/static/imghwm/default1.png&quot; data-src=&quot;https://img.php.cn/upload/article/000/061/021/6aa998e4d2edca235a11c4aef7eb7a24-2.png?x-oss-process=image/resize,p_40&quot; class=&quot;lazy&quot; title=&quot;&quot; alt=&quot;Jsonp solves the cross-domain problem of ajax&quot;&gt;&lt;/p&gt; &lt;p style=&quot;text-align: left;&quot;&gt;2.3 Similarly, if you quote directly, the alert&lt;strong&gt; will be executed immediately, then write the function in other.js, the same as jsonp/index.jsp It can also be called in , but I won’t demonstrate this point. This is mostly done in project development, and the page is separated from js/css. &lt;/strong&gt;&lt;/p&gt; &lt;p style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;2.4 另外说明一点,&lt;/strong&gt;如果在other.js中有函数通过ajax调用8080中的东西,然后引入之后,调用这个函数,也是可以的,但是如果other.js中函数ajax调用8888的东西,引入之后,调用这个函数,同样是跨域的。&lt;/p&gt; &lt;p style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;3、script实现跨域请求&lt;/strong&gt;&lt;/p&gt; &lt;p style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;3.1 简单模拟服务器返回数据&lt;/strong&gt;&lt;/p&gt; &lt;p style=&quot;text-align: left;&quot;&gt;将jsonp/index.jsp改成如下:这里注意引入的other.js的位置,是在函数getResult之后的,如果在它之前的话,会提示函数不存在。js加载顺序是从上开始,在之前调用没创建的,不能成功。注意这里是指引入的js文件,如果是同一个js文件或者当前页面的js中,先执行调用,然后再写函数也是没有问题的,但是如果先执行调用引入js文件中的函数,然后再引入js文件,就会提示函数不存在。&lt;/p&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;&lt;script&gt;&lt;/script&gt; &lt;script&gt; function jsonp_fun(){ $.ajax({ url:&amp;#39;http://localhost:8888/other/index.jsp&amp;#39;, type:&amp;#39;post&amp;#39;, dataType:&amp;#39;text&amp;#39;, success:function(data){ console.log(data); } }); } function getResult(data){ alert(data.result); } &lt;/script&gt; &lt;script&gt;&lt;/script&gt;</pre> <p style="text-align: left;">然后other.js</p> <p style="text-align: left;">getResult({"result":"this is other domain's data"});</p> <p style="text-align: left;">也就是在jsonp/index.jsp页面写好函数,然后引入其他域的js传入参数去调用这个函数,这里的参数你可以先看做是其他域服务器的接口返回的数据。</p> <p style="text-align: left;">刷新页面,效果当然是</p> <p style="text-align: left;">弹出alert框,this is other domain's data</p> <p style="text-align: left;"><strong>3.2 模拟接口访问</strong></p> <p style="text-align: left;">看到这里,你会不会还是想不懂,上面js弄啥的,传个死的数据,有什么实际意义吗?,其实script的src不仅可以接js的地址,还可以接servlet的地址,也就是http接口地址,所以接下来,懒得写servlet,这里还是写jsp当做接口,在other项目中新建other.jsp页面,内容如下:</p> <pre class="brush:php;toolbar:false"> </pre> <p style="text-align: left;">内容很简单,也就是接受一个params的参数,然后返回数据给调用者。</p> <p style="text-align: left;">我们在jsonp/index.jsp中加上</p> <pre class="brush:php;toolbar:false">&lt;script&gt;&lt;/script&gt;</pre> <p style="text-align: left;">看到这个地址,你是不是很熟悉,不熟悉的证明你用servlet用蠢了,jsp也是servlet,流程就是页面一加载的时候,script标签就会去发送请求,然后返回数据。那么我们刷新页面,看看效果。</p> <p style="text-align: left;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/0e81fae80d6de5943ac04118ef82b69e-3.png?x-oss-process=image/resize,p_40" class="lazy" title="" alt="Jsonp solves the cross-domain problem of ajax"></p> <p style="text-align: left;">Uncaught SyntaxError: Unexpected identifier</p> <p style="text-align: left;">报错了,如上,然后代码有问题?No,点击错误,你会看到请求的东西也打印出来了,就是提示错误,表示这个东西浏览器不认识,其实是script不认识啦。</p> <p style="text-align: left;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/0e81fae80d6de5943ac04118ef82b69e-4.png?x-oss-process=image/resize,p_40" class="lazy" title="" alt="Jsonp solves the cross-domain problem of ajax"></p> <p style="text-align: left;">还不明白,那么你去页面加上如下内容,你看报不报错!!肯定报错</p> <pre class="brush:php;toolbar:false">&lt;script&gt; ajax cross success,the server receive params : jsonp_param &lt;/script&gt;</pre> <p style="text-align: left;">那么js不能解析,我们换一种思路,要是我们输出的是JSON字符串或者调用当前页面函数的字符串了,类似于3.1中返回的getResult({“result”:”this is other domain's data”});</p> <p style="text-align: left;">所以改造一下,把other.jsp中的内容改成</p> <pre class="brush:php;toolbar:false"> </pre> <p style="text-align: left;">别忘了,之前jsonp/index.jsp中我们定义了,那么加入引用之后,依然记得getResult函数与引入函数的先后顺序问题。</p> <pre class="brush:php;toolbar:false"><script> function getResult(data){ alert(data.result); } </script> <script></script>

刷新页面,发现大工告成。

Jsonp solves the cross-domain problem of ajax

至此,大部分原理已经讲完了,还有一个问题,这里服务器返回的是getResult(xxx),其中这里的xxx可以当做是经过接口的很多处理,然后塞进去的值,但是这个getResult这个函数名,调用方与其他域服务器这一方怎么约定这个名字是一致的了,况且很多公司自己做服务的,别的公司的开发人员去调用,难道每个人都去那么公司去约定调用函数的名字?怎么可能,所以有人就想出来了一种解决方案,当然不是我~~,其实也很简单啦,也就是把回调的函数名字也一起传过去不就行了,所以代码如下:

<script></script>

other.jsp


代码很简单,也就是传递一个回调函数的参数名,然后经过该接口一系列操作,将返回数据,塞到回调函数里面,调用端的函数就得到了该接口的数据,也就是类似于ajax中succsss:function(data),然后处理data一样,这里的success回调函数,相当于上面的getResult函数。当然你也可以写的优雅一点,比如:

function CreateScript(src) {
$("<script>/script>").attr("src", src).appendTo("body")
}
function jsonp_fun(){
CreateScript("http://localhost:8888/other/other.jsp?params=fromjsonp&callback=getResult")
}</script>

4、Jquery的JSONP

至此跨域请求的原理已经讲清楚了,但是仍然还有一个问题,总觉得这样用有点怪是不是,如果用jquery的话,调用就很简单了,其实jquery底层实现也是拼了一个script,然后指定src这种方式,跟上面讲的一样,只是jquery封装了一下,显得更加优雅,跟ajax调用方式差不多,所以容易记,代码如下:

<script>
function getResult(data){
alert("through jsonp,receive data from other domain : "+data.result);
}
function jsonp_fun(){
$.ajax({
url:&#39;http://localhost:8888/other/other.jsp&#39;,
type:&#39;post&#39;,
data:{&#39;params&#39;:&#39;fromjsonp&#39;},
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"getResult",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以不写这个参数,jQuery会自动为你处理数据
success: function(data){
},
error: function(){
alert(&#39;fail&#39;);
}
});
}
</script>

<input>

这里的jsonCallback,回调函数设置为getResult,那么返回后会先调用getResult函数中的代码,再调用success函数中的代码,一般情况下,不用定义getResult函数,同样jsonCallback不需要设置,那么就只执行success中的代码,也就跟平时的ajax一样用啦。

所以实际工作用法如下:

function jsonp_fun(){
$.ajax({
url:'http://localhost:8888/other/other.jsp',
type:'post',
data:{'params':'fromjsonp'},
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
success: function(data){
alert("through jsonp,receive data from other domain : "+data.result);
},
error: function(){
alert('fail');
}
});
}

这里没有指定jsonpCallback,实际上jquery底层拼装了一个函数名,当然生成函数规则就没研究了。

Jsonp solves the cross-domain problem of ajax

补充:

1、ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装;

2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。</script>

3、所以说,其实ajax与jsonp的区别不在于是否跨域,ajax通过服务端代理一样可以实现跨域,jsonp本身也不排斥同域的数据的获取。

4、还有就是,jsonp是一种方式或者说非强制性协议,如同ajax一样,它也不一定非要用json格式来传递数据,如果你愿意,字符串都行,只不过这样不利于用jsonp提供公开服务。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Ajax+Session失效后即刻跳转登录页面

ajax操作全局监测,用户session失效怎么处理

The above is the detailed content of Jsonp solves the cross-domain problem of ajax. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Understanding the JavaScript Engine: Implementation DetailsUnderstanding the JavaScript Engine: Implementation DetailsApr 17, 2025 am 12:05 AM

Understanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.

Python vs. JavaScript: The Learning Curve and Ease of UsePython vs. JavaScript: The Learning Curve and Ease of UseApr 16, 2025 am 12:12 AM

Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.

Python vs. JavaScript: Community, Libraries, and ResourcesPython vs. JavaScript: Community, Libraries, and ResourcesApr 15, 2025 am 12:16 AM

Python and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.

From C/C   to JavaScript: How It All WorksFrom C/C to JavaScript: How It All WorksApr 14, 2025 am 12:05 AM

The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.

JavaScript Engines: Comparing ImplementationsJavaScript Engines: Comparing ImplementationsApr 13, 2025 am 12:05 AM

Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.

Beyond the Browser: JavaScript in the Real WorldBeyond the Browser: JavaScript in the Real WorldApr 12, 2025 am 12:06 AM

JavaScript's applications in the real world include server-side programming, mobile application development and Internet of Things control: 1. Server-side programming is realized through Node.js, suitable for high concurrent request processing. 2. Mobile application development is carried out through ReactNative and supports cross-platform deployment. 3. Used for IoT device control through Johnny-Five library, suitable for hardware interaction.

Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)Apr 11, 2025 am 08:23 AM

I built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing

How to Build a Multi-Tenant SaaS Application with Next.js (Frontend Integration)How to Build a Multi-Tenant SaaS Application with Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AM

This article demonstrates frontend integration with a backend secured by Permit, building a functional EdTech SaaS application using Next.js. The frontend fetches user permissions to control UI visibility and ensures API requests adhere to role-base

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat Commands and How to Use Them
1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment