Questions about cross-domain access between AJax and Jsonp-JS Tutorial-php.cn

This article gives you a summary of JavaScript's AJax, JQuery's AJax and the use of jsonp to achieve cross-domain access. It is very detailed and comprehensive. Friends in need can refer to it.

#JavaScript's AJax

AJAX is "Asynchronous Javascript And XML" (Asynchronous JavaScript and XML)
Design AJax to use An important technology is the XMLHttpRequest object.

How to create an XMLHttpRequest object:

xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // Creation method supported by IE browser
xmlhttp = new XMLHTTPRequest( ); // Creation methods supported by browsers such as FireFox and Opera
XMLHttp is a set of APIs that can transmit or receive XML and other data through the http protocol in scripting languages such as Javascript, VbScript, and Jscript. Can be used to simulate http GET and POST requests.
You can determine whether the window.XMLHttpRequest object is available and then create an XMLHttpRequest object.

The following are the properties and usage methods of the XMLHttpRequest object. They are pasted and commented in detail.

  XMLHTTPRequest对象的说明DEMO

Copy after login

To put it simply, it is a process of using the XMLHttpRequest object to make a request to the server, and then getting the information returned by the server.

The above is JavaScript Ajax technology principles. It is completely different from the principle of Jsonp implementing cross-domain access that will be discussed later.

JQuery’s AJax

JQuery encapsulates the ajax technology, making it more convenient to use.

$.General form of ajax

$.ajax({ type: 'POST', url: url , data: data , dataType: dataType success: success , });

Copy after login

When the scene is different, we need to use Ajax instead. 1. Assemble json data. 2. Serialize table content. var formParam = $("#form1").serialize(); 3. Splice URLs. . . For example, when there are special strings (such as &) in our data, string splicing is not easy to use, which may make the submitted content incomplete. At this time, it will be easier to use Json.

Using jsonp to achieve cross-domain access

What is Jsonp? What does

have to do with json?

How does jsonp achieve cross-domain access?

First explain why Ajax cannot be accessed across domains and why browsers restrict cross-domain access.

Assuming that the browser supports cross-domain access, we can access site B through XmlHttpRequest at site A. At this time, we have passed the verification of site B and obtained the cookie of site B. Then we can freely When you visit site B, site A can impersonate site B to perform all operations on site B that do not require further verification. This is quite dangerous.

How do we obtain cross-domain data?

We found that when calling js files on a Web page, it is not affected by whether it is cross-domain (not only that, we also found that all tags with the "src" attribute have cross-domain capabilities, such as script, img, iframe, etc. We can use this property of js to get the data we want.

In order to facilitate the client to use data, an informal transmission protocol has gradually formed, People call it JSONP. One of the key points of this protocol is to allow users to pass a callback parameter to the server. Then when the server returns data, it will use this callback parameter as a function name to wrap the JSON data, so that the client can customize it at will. Use your own function to automatically process the returned data.

Let’s take a look at what jsonp does.

1. We know that even cross-domain js files The code in (of course it complies with the web script security policy), the web page can also be executed unconditionally. There is a remote.js file in the root directory of the remote server remoteserver.com, the code is as follows:

alert('I am Remote file');

The local server localserver.com has a jsonp.html page code as follows:

Copy after login

There is no doubt that the page will pop up A prompt form shows that the cross-domain call is successful. This is the most basic idea of jsonp.

2. Now we define a function on the jsonp.html page, and then pass in the data in the remote remote.js. Call. The jsonp.html page code is as follows:

Copy after login

remote.js file code is as follows:

localHandler({"result":"I It is the data brought by the remote js"});

Check the results after running. The page successfully pops up a prompt window, showing that the local function was successfully called by the cross-domain remote js, and the data brought by the remote js was also received. Cross-domain The purpose of accessing the data has been achieved, but how do I let the remote js know the name of the local function it should call?

3. You can pass a parameter to tell the server "I want to call the XXX function in a section js code, please return it to me", so the server can generate the js script according to the client's needs and respond.

Copy after login

On the server side, We get the callback and assemble the required js.

String callback = request.getParemeter("callback");

response.getWriter.print(callback "(" json ")");

The content returned to the page is:

flightHandler({ "code": "CA1998", "price": 1780, "tickets": 5 });

Copy after login

4.Jquery also encapsulates jsonp. (The form is more like ajax)

###

   Untitled Page

Copy after login

######

最后申明，Ajax和jsonp是两个完全不一样的东西。 ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加script标签来调用服务器提供的js脚本。

在jQuery中如何通过JSONP来跨域获取数据

第一种方法是在ajax函数中设置dataType为'jsonp'：

$.ajax({ dataType: 'jsonp', jsonp:'callback', url: 'http://www.a.com/user?id=123', success: function(data){ //处理data数据 } });

Copy after login

第二种方法是利用getJSON来实现，只要在地址中加上callback=?参数即可：

$.getJSON('http://www.a.com/user?id=123&callback=?', function(data){ //处理data数据 });

Copy after login

也可以简单地使用getScript方法：

//此时也可以在函数外定义foo方法 function foo(data){ //处理data数据 } $.getJSON('http://www.a.com/user?id=123&callback=foo');

Copy after login

JSONP的应用

JSONP在开放API中可以起到非常重要的作用，开放API是运用在开发者自己的应用上，而许多应用往往是在开发者的服务器上而不是在新浪微博的服务器上，因此跨域请求数据成为开发者们所需要解决的一大问题，广大开放平台应该实现对JSONP的支持，这一点新浪微博开放平台便做的非常好（虽然某些API里没有说明，但实际上是可以使用JSONP方式调用的）。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！