Home > Developer > Web Develop
1.Ajax Introduction
Ajax is a modern interactive Web page application of Web development technology, through the background and the server for a small amount of data exchange, Ajax can make the Web page implementation of asynchronous update. This means that a part of a webpage can be updated without reloading the entire page, with the core of AJAX being the JavaScript object XMLHttpRequest. This object was first introduced in Internet Explorer 5, which is a technique that supports asynchronous requests. In short, XMLHttpRequest allows you to use JavaScript to make requests to the server and handle the response without blocking the user.
By default, browser restriction scripts generate AJAX requests only from the source of the document to which they belong, and the source consists of the protocol, host name, and port number in the URL, which means that when I load a document from HTTP://WSX, the script that is included in the document usually fails to generate a pair of HTTP.// wsx:8080 request because the port number of the second URL is different, so it is outside the source of the document. Ajax requests from one source to another are called cross-origin requests (this strategy is designed to reduce the risk of cross-site scripting attacks); The cross-origin resource sharing (Cross-origin Resource sharing,cors) specification provides a legitimate way to generate cross-origin requests.
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<body>
<div>
<button>Apples</button>
<button>Cherries</button>
<button>Bananas</button>
</div>
<div id= "target" >press a button</div>
<script>
var buttons =document.getelementsbytagname ("button");
For (Var i=0;i<buttons.length;i++) {
buttons[i].onclick=handlebuttonpress
}
var HttpRequest;
function Handlebuttonpress (e) {
httprequest=new XMLHttpRequest ();
httprequest.onreadystatechange=handleresponse ();
Httprequest.open ("GET", "http://wsx:8080/" + e.target.innerhtml);
httprequest.send ();
}
function Handleresponse () {
if (httprequest.readystate==4&&httprequest.status==200) {
document.getElementById ("target"). Innerhtml=httprequest.responsetext;
}
}
</script>
</body>
The script in this example expands the content of the button that the user presses, attaches it to the http://wsx:8080, and then tries to produce an AJAX request, which means that the script is trying to produce a cross-origin request
Cross-Origin AJAX requests
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
