Home >Web Front-end >JS Tutorial >Detailed explanation of examples of cross-domain methods in js_javascript skills

Detailed explanation of examples of cross-domain methods in js_javascript skills

WBOYOriginal: 2016-05-16 15:53:231151browse

The examples in this article describe the method of cross-domain implementation in js. Share it with everyone for your reference. The specific analysis is as follows:

Due to the restrictions of the same-origin policy, XMLHttpRequest is only allowed to request resources from the current source (including domain name, protocol, and port).

The difference between json and jsonp:

JSON is a data exchange format, while JSONP is an unofficial cross-domain data exchange protocol created by developers.

The

script tag is often used to load resources from different domains and can bypass the same-origin policy. (Anyone with the src attribute can obtain foreign files).
If the requested remote data itself is an executable js, then these js will be executed (equivalent to eval).

Method 1:

Use script tag to request (fdf5dd3711dd56a5f8e25d980d79eadb2cacc6d41bbb37262a98f745aa00fbf0)
Before using the script tag to request, first declare the callback function,

<script>
function 回调函数名(data数据){ 。。。。 }
</script>
<script src="http://....jsp&#63;callback=回调函数名"></script>

Using JSON to transfer javascript objects is the simplest way. This cross-domain communication method is called JSONP.

Remote server patchwork string:

Callback function name ({"name1":"data1","name2","data2"})

This kind of json data is pieced together in the background and returned to the client in the form of passing parameters through the callback function
(You can call it directly, which is equivalent to eval processing the obtained string)

For example:

function databack(data){ alert(data.name1) }
// 会输出显示"data1"

Method 2:

It is simpler to implement the foreign loading method with jquery (the same as the asynchronous request method of ajax)

$.ajax({
  type : "get",
  dataType:"json",
  success : function(data){ alert(data.name1) };
})

or abbreviated form

var url = "http://.....jsp&#63;callback=&#63;";
// 在jquery中此处的callback值可以为任意，
// 因为jquery进行处理后都是利用success回调函数进行数据的接受；
$.getJSON( url, function(data){ alert(data.name1) });

Method 3:

Ajax cross-domain server proxy

Set up a proxy program (proxy.jsp...) in the background of the same source;
Interact with servers in foreign domains on the server side.

jquery frontend data transmission:

For example:

$.get(
　　 'http://。。。.jsp', // 代理程序地址
　　 {
　　  name1 : "data1",
　　  name2 : "data2"
　　 },
　　 function(data){
　　 if(data == 1) alert('发送成功！');
　　 }
);

Background data processing:

String data1 = request.getParameter("name1");
........
// 此处的url为另一域下的地址并带有参数
String url = "http://.....com/.../sss.jsp&#63;" +　"name1=" + data1+　"name2=" + data2;
// 跳转到另一个域进行数据的处理并返回json格式的数据
request.getRequestDispatcher(url).forward(request,response);

Method 4:

Use the src attribute of the iframe tag to perform cross-domain access, store the obtained value in the current iframe, and then obtain the value in the body of the iframe on the same page.

<body>
  <div id="show"></div>
  <iframe id="frame" style="display: none;"></iframe>
</body>
<script>
$("#frame").attr("src", "路径&#63;time=" + new Date().getTime()).load(function(){
 // 获取iframe标签的值并进行获取，显示到页面
 $("#show").append("[data: " + $($("#frame").get(0).contentDocument).find("body").text()+ " ]");
});
</script>

Method 5:

Websocket in HTML5 can provide cross-domain access;

Create a websocket object:

Copy code The code is as follows:

var ws = new WebSocket(url);

The main event types processed are (onopen, onclose, onmessage, onerror);

For example:

ws.onopen = function(){
console.log("open")；
// 向后台发送数据
ws.send("open");
}

The background can be java, php, nodejs, etc. For data processing, use the time onmessage event to perform front-end processing on the returned value.

ws.onmessage = function(eve){
console.log(eve.data);
}

I hope this article will be helpful to everyone’s JavaScript programming design.

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

Previous article：Detailed explanation of the use of client Session in Node.js programming_node.jsNext article：Detailed explanation of the use of client Session in Node.js programming_node.js

See more

Detailed explanation of examples of cross-domain methods in js_javascript skills

Related articles