Backend DevelopmentPHP TutorialDetailed examples of the principles of Ajax cross-domain requestsDetailed examples of the principles of Ajax cross-domain requests
This article mainly introduces the principle of Ajax cross-domain requests in detail. How does Ajax make cross-domain requests? It has certain reference value. Interested friends can refer to it. I hope it can help everyone better master Ajax cross-domain requests.
Let’s build two local sites to demonstrate
The first step is to build an Apache server locally; download address;
The second step is after the server is configured, in Configure two virtual domain names locally;
The third step is to create a folder on the C drive and name it "HTML5";
The fourth step is to find the configuration file of the Apache virtual host, and then open the configuration file
The fifth step is to create a folder a and a folder b respectively under the HTML5 folder created in the third step;
The sixth step is to modify the Apache virtual host Configuration file, as shown in the figure
The seventh step is to modify the host file and add the URLs of a and b. Usually the host file path is C:\Windows\System32\ Under drivers\etc
We create a 7.ajax.html file under the HTML5/a folder
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>获取同域下内容</title>
<script>
window.onload = function() {
var oBtn = document.getElementById('btn');
// 忽略IE6
oBtn.onclick = function() {
//创建一个ajax对象
var xhr = new XMLHttpRequest();
//监听事件
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText);
}
}
}
xhr.open('get', 'Detailed examples of the principles of Ajax cross-domain requests', true);
xhr.send();
}
}
</script>
</head>
<body>
<input type="button" value="获取同域下内容" id="btn" />
</body>
</html>We first Take a look at the requests under the same domain
We create a php file under HTML5/a and return 'hello';
At this time, we are opening the current page Detailed examples of the principles of Ajax cross-domain requests , and clicking the button we find that the data is requested;
http://www.a .com/7.ajax.html
But if it is cross-domain, that is, the data you requested and the current file are not under the same domain, then it will Cross-domain requests are generated, and usually in this case you will be prohibited from accessing
For example, we will now put the Detailed examples of the principles of Ajax cross-domain requests file just in the HTML5/a folder into the b folder
After clicking at this time, we found that the request reported an error, which means that cross-domain requests were restricted
At this time we The backend needs to cooperate. You need to tell the backend to add an "Access-Control-Allow-Origin" header when outputting
For example: As shown in the figure, it means that as long as the cross-domain request of this domain name is cross-domain Impact of the strategy
When I click this time, I can obtain cross-domain data normally
If you want to be compatible with IE, you need
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ajax跨域请求</title>
<script>
window.onload = function() {
/*
在标准浏览器下，XMLHttpRequest对象已经是升级版本，支持了更多的特性，可以跨域了
但是，如果想实现跨域请求，还需要后端的相关配合才可以
XMLHttpRequest : 增加很多功能，他也不推荐使用onreadystatechange这个事件来监听，推荐使用onload
*/
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
// 这是标准浏览器写法
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText);
}
}
}
xhr.open('get', 'http://www.b.com/Detailed examples of the principles of Ajax cross-domain requests', true);
xhr.send();
/*
如果你想兼容IE浏览器,可以特地为IE做兼容,忽略IE6
XDomainRequest : IE如果想实现跨域请求，则需要使用这个对象去实现
var oXDomainRequest = new XDomainRequest();
oXDomainRequest.onload = function() {
alert(this.responseText);
}
oXDomainRequest.open('get', 'http://www.b.com/Detailed examples of the principles of Ajax cross-domain requests', true);
oXDomainRequest.send();
*/
}
}
</script>
</head>
<body>
<input type="button" value="获取同域下内容" id="btn" />
</body>
</html>Related recommendations:
Examples explaining the four methods of AJAX cross-domain request data
Detailed explanation of how to implement Javascript cross-domain request code
Detailed introduction of AJAX cross-domain request
The above is the detailed content of Detailed examples of the principles of Ajax cross-domain requests. For more information, please follow other related articles on the PHP Chinese website!
What is the difference between unset() and session_destroy()?May 04, 2025 am 12:19 AMThedifferencebetweenunset()andsession_destroy()isthatunset()clearsspecificsessionvariableswhilekeepingthesessionactive,whereassession_destroy()terminatestheentiresession.1)Useunset()toremovespecificsessionvariableswithoutaffectingthesession'soveralls
What is sticky sessions (session affinity) in the context of load balancing?May 04, 2025 am 12:16 AMStickysessionsensureuserrequestsareroutedtothesameserverforsessiondataconsistency.1)SessionIdentificationassignsuserstoserversusingcookiesorURLmodifications.2)ConsistentRoutingdirectssubsequentrequeststothesameserver.3)LoadBalancingdistributesnewuser
What are the different session save handlers available in PHP?May 04, 2025 am 12:14 AMPHPoffersvarioussessionsavehandlers:1)Files:Default,simplebutmaybottleneckonhigh-trafficsites.2)Memcached:High-performance,idealforspeed-criticalapplications.3)Redis:SimilartoMemcached,withaddedpersistence.4)Databases:Offerscontrol,usefulforintegrati
What is a session in PHP, and why are they used?May 04, 2025 am 12:12 AMSession in PHP is a mechanism for saving user data on the server side to maintain state between multiple requests. Specifically, 1) the session is started by the session_start() function, and data is stored and read through the $_SESSION super global array; 2) the session data is stored in the server's temporary files by default, but can be optimized through database or memory storage; 3) the session can be used to realize user login status tracking and shopping cart management functions; 4) Pay attention to the secure transmission and performance optimization of the session to ensure the security and efficiency of the application.
Explain the lifecycle of a PHP session.May 04, 2025 am 12:04 AMPHPsessionsstartwithsession_start(),whichgeneratesauniqueIDandcreatesaserverfile;theypersistacrossrequestsandcanbemanuallyendedwithsession_destroy().1)Sessionsbeginwhensession_start()iscalled,creatingauniqueIDandserverfile.2)Theycontinueasdataisloade
What is the difference between absolute and idle session timeouts?May 03, 2025 am 12:21 AMAbsolute session timeout starts at the time of session creation, while an idle session timeout starts at the time of user's no operation. Absolute session timeout is suitable for scenarios where strict control of the session life cycle is required, such as financial applications; idle session timeout is suitable for applications that want users to keep their session active for a long time, such as social media.
What steps would you take if sessions aren't working on your server?May 03, 2025 am 12:19 AMThe server session failure can be solved through the following steps: 1. Check the server configuration to ensure that the session is set correctly. 2. Verify client cookies, confirm that the browser supports it and send it correctly. 3. Check session storage services, such as Redis, to ensure that they are running normally. 4. Review the application code to ensure the correct session logic. Through these steps, conversation problems can be effectively diagnosed and repaired and user experience can be improved.
What is the significance of the session_start() function?May 03, 2025 am 12:18 AMsession_start()iscrucialinPHPformanagingusersessions.1)Itinitiatesanewsessionifnoneexists,2)resumesanexistingsession,and3)setsasessioncookieforcontinuityacrossrequests,enablingapplicationslikeuserauthenticationandpersonalizedcontent.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
SublimeText3 Linux new version
SublimeText3 Linux latest version
Dreamweaver CS6
Visual web development tools
Dreamweaver Mac version
Visual web development tools
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.
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
