AJAX uses proxy, JSONP, and XHR2 to achieve cross-domain

This time I will bring you AJAX using proxies, JSONP, and XHR2 to achieve cross-domain, and AJAX using proxies, JSONP, and one time. Domain: The domain is the security boundary of the WIN2K network system. We know that the most basic unit of a computer network is a "domain". This is not unique to WIN2K, but Active Directory can run through one or more domains. On an independent computer, a domain refers to the computer itself. A domain can be distributed in multiple physical locations. At the same time, a physical location can be divided into different network segments into different domains. Each domain has its own security policy and its relationship with Trust relationships with other domains. When multiple domains are connected through trust relationships, Active Directory can be shared by multiple trusting domains.

Due to the need to use AJAX to request requests under other domain names at work, access will be denied. This is because based on security considerations, AJAX can only access local resources and cannot access cross-domain resources.

For example, if your website domain name is aaa.com, and you want to request the content in the bbb.com domain name through AJAX, the browser will consider it unsafe and deny access.

There will be several situations where cross-domain problems occur:

#The background searched for a solution on Baidu to solve this problem, and a total of three solutions were summarized: Proxy, JSONP, XHR2 (XMLHttpRequest Level 2).

The first method is proxy: This method is to obtain the content under other domain names through the background (ASP, PHP, JAVA, ASP.NET), and then return the obtained content to the front end, so that in the same under the domain name, so there will be no cross-domain problems.

Implementation code: Create an AJAX request (the page address is: http://localhost/ajax/proxy.html)

var request = null;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject("Microsoft.XMLHttp");
}
request.onreadystatechange = function(){
console.log(this.readyState);
if(this.readyState===4 && this.status===200){
var resultObj = eval("("+this.responseText+")"); //将返回的文本数据转换JSON对象
document.getElementById("box").innerHTML = resultObj.name+":"+resultObj.sex; //将返回的内容显示在页面中
}
}
request.open("POST","proxy.php",true);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send("name=吕铭印&sex=男");

Create an AJAX request.

proxy.php code

header("Content-type:text/html;charset=utf-8");
$url = "http://localhost:63342/ajax/proxy.js";
$contents = file_get_contents($url);
echo $contents;

Use the php code to obtain the proxy.js file under localhost:63342.

proxy.js code

{
name : "吕铭印",
sex : "男"
}

proxy.html running result

##At this point, access is achieved using the proxy files between different domains.

First use AJAX in proxy.html to access the proxy.php file in the background. Then after proxy.php receives the request, it accesses the proxy.js file in localhost:63342. After obtaining the content of proxy.js, Return the content to the front-end page, which implements cross-domain functionality.

If you want to access multiple cross-domain files, you can tell the background proxy.php file the address of the file to be accessed in the form of a parameter.

The second method JSONP (only supports GET requests): Later, people discovered that there is no cross-domain impact when calling JS files, so the second method was derived.

is to load the data into a js file on the remote server for client calling and further processing.

jsonp.html

var url = "http://localhost:63342/ajax/jsonp.php?name=吕铭印&sex=男&callbackname=jsonp_callback"; //访问localhost:63342下的jsonp.php
var scriptTag = document.createElement("script"); //创建一个script标签
scriptTag.setAttribute("src",url); //设置script的src属性
document.body.appendChild(scriptTag); //将script标签添加到body中
//回调函数
var jsonp_callback = function(resultObj){
document.getElementById("box").innerHTML = resultObj.name+":"+resultObj.sex;
}

jsonp.php

$name = $_GET["name"];
$sex = $_GET["sex"];
$callbackname = $_GET["callbackname"]; //回调函数名称
echo "$callbackname({name:'$name',sex:'$sex'})";

jsonp.html Running results: Implementation principle: Since using script tags to call remote js files is not affected by cross-domain, you can create a script tag and access

remote files

through the src attribute.

Actually, this does not belong to AJAX, but it can achieve functions similar to AJAX.

The third method XMLHttpRequest Level 2: XMLHttpRequest Level 2 provided by HTML5 has implemented cross-domain access and some other new features

This requires adding the following code on the remote server side

header('Access-Control-Allow-Origin:*'); //*代表可访问的地址，可以设置指定域名
header('Access-Control-Allow-Methods:POST,GET');

In this way, you can use

regular AJAX code on the

client.

Summary: Proxy implementation is the most troublesome, but it is the most widely used. Any browser that supports AJAX can use this method.

JSONP is relatively simple, but only supports GET calls.

XHR2 is the simplest, but it only supports HTML5. If you are developing for mobile terminals, you can choose to use XHR2.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

JS encapsulation in the same domain, jsonp cross-domain (with code)

jQuery sets keyboard to switch text box focus

The above is the detailed content of AJAX uses proxy, JSONP, and XHR2 to achieve cross-domain. For more information, please follow other related articles on the PHP Chinese website!