[Front]jsonp

Jsonp

Before steamed a few Ajax crabs, taste good, but? Although the crab is good, the meat is too little!

Ajax appears to solve the page does not refresh the situation with the background to communicate with the data exchange, but there is a fatal flaw, he is not cross-domain.

cross-domain: <== problem point to the left

Anyway, the port number. Any place in front of the colon is a cross-domain request.

We know that the SRC script tag of the IMG tag SRC is capable of cross-domain request data, so I do not know who is the great God, the whimsical curve to save the nation, using the script tag for background data acquisition,

Of course, this script tag is generated dynamically with the JS script, for example, a chestnut

First of all, I'm going to write a script.

1.js

Fundemo ({"Result": "Remote Data"});

Write an HTML file again

1.html

<!DOCTYPE HTML><Head>    <title>1</title>    <Scripttype= "Text/javascript">    varFundemo= function(data) {alert (data.result);    }; </Script>    <Scripttype= "Text/javascript"src= "Http://aaa.com/1.js"></Script></Head><Body> </Body></HTML>

function Fundemo (data) {alert (data.result);} The same declaration is true for functions!!!

is actually in the HTML file to declare a name called, Fundemo function, which has a parameter

Then, executes a remote (cross-domain) JS code, called the function, remote JS to provide data, as a parameter

Fundemo ({"Result": "Remote Data"});

So the new problem, although can get to the remote data, but this function name must be consistent with the function name in the background, the solution is to provide a function name after the SRC parameter,

The background of the program according to the function name of the dynamic generation of this JS file

1.html Modification

<script type= "Text/javascript" src= "http://aaa.com/1.php?&callback=fundemo" ></script>

Behind the scenes can consider the string concatenation of the way to return this JS

1.php

<? PHP Header (' Content-type:application/x-javascript '); $callback=$_request[' Callback ']; Echo $callback (data) {alert (data.result);} " >

I don't know if PHP is written to =.=.

That's it.

jquery inside the JSONP is placed in the Ajax inside, but really half a dime relationship wood has AH!!

Crabs can eat, shrimp can also eat, are steamed, the same practice. But they really are not a thing!!!

Use JSONP in Ajax

$.ajax ({type:"Get", URL:"1.php", DataType:"Jsonp", Jsonp:"Callback",//The parameter name passed to the request handler or page to obtain the name of the JSONP callback function (default: Callback)Jsonpcallback: "Success_jsonpcallback",//Custom JSONP callback function name, default to jquery auto-generated random function nameSuccess:function(JSON) {//Do something}, Error:function(){                //Do something            }        });

[Front]jsonp