Home > Article > Web Front-end > Detailed explanation of the use of AJAX and JavaScript
Detailed explanation of the use of AJAX and JavaScript
- php中世界最好的语言Original
- 2018-03-31 13:39:331497browse
This time I will bring you a detailed explanation of the use of AJAX and JavaScript. What are the precautions when using AJAX and JavaScript? Here are practical cases, let’s take a look.
AJAX is not a JavaScript specification, it is just an abbreviation "invented" by a buddy: Asynchronous JavaScript and XML, which means using JavaScript to perform asynchronous network requests.
If you carefully observe the submission of a Form, you will find that once the user clicks the "Submit" button and the form begins to submit, the browser will refresh the page and then tell you in the new page whether the operation was successful or not. Failed. If unfortunately the network is too slow or for other reasons, you will get a 404 page.
This is how the Web works: one HTTP request corresponds to one page.
If you want the user to stay in the current page and make a new HTTP request at the same time, you must use JavaScript to send the new request. After receiving the data, use JavaScript to update the page. In this way, the user will feel You still stay on the current page, but the data can be continuously updated.
The earliest large-scale use of AJAX was Gmail. After the Gmail page was loaded for the first time, all remaining data relied on AJAX to update.
Writing a complete AJAX code in JavaScript is not complicated, but you need to pay attention: AJAX requests are executed asynchronously, that is, the response must be obtained through the callback function.
Writing AJAX on modern browsers mainly relies on XMLHttpRequestObject:
function success(text) {
var textarea = document.getElementById('test-response-text');
textarea.value = text;
}
function fail(code) {
var textarea = document.getElementById('test-response-text');
textarea.value = 'Error code: ' + code;
}
var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象
request.onreadystatechange = function () { // 状态发生变化时，函数被回调
if (request.readyState === 4) { // 成功完成
// 判断响应结果:
if (request.status === 200) {
// 成功，通过responseText拿到响应的文本:
return success(request.responseText);
} else {
// 失败，根据响应码判断失败原因:
return fail(request.status);
}
} else {
// HTTP请求还在继续...
}
}
// 发送请求:
request.open('GET', '/api/categories');
request.send();
alert('请求已发送，请等待响应...');
For lower versions of IE, you need to change to an ActiveXObject object:
function success(text) {
var textarea = document.getElementById('test-ie-response-text');
textarea.value = text;
}
function fail(code) {
var textarea = document.getElementById('test-ie-response-text');
textarea.value = 'Error code: ' + code;
}
var request = new ActiveXObject('Microsoft.XMLHTTP'); // 新建Microsoft.XMLHTTP对象
request.onreadystatechange = function () { // 状态发生变化时，函数被回调
if (request.readyState === 4) { // 成功完成
// 判断响应结果:
if (request.status === 200) {
// 成功，通过responseText拿到响应的文本:
return success(request.responseText);
} else {
// 失败，根据响应码判断失败原因:
return fail(request.status);
}
} else {
// HTTP请求还在继续...
}
}
// 发送请求:
request.open('GET', '/api/categories');
request.send();
alert('请求已发送，请等待响应...');
If you want to mix standard writing and IE writing, you can write like this:
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
By detecting whether the window object There is the XMLHttpRequest attribute to determine whether the browser supports the standard XMLHttpRequest. Note, do not use the browser's navigator.userAgent to detect whether the browser supports a certain JavaScript feature. One is because the string itself can be forged, and the other is to determine JavaScript through the IE version. Features will be very complex.
After creating the XMLHttpRequest object, you must first set the callback function of onreadystatechange. In the callback function, usually we only need to judge whether the request is completed by readyState === 4. If it is completed, then based on status === 200Determine whether it is a successful response.
XMLHttpRequestThe object's open() method has 3 parameters. The first parameter specifies whether it is GET or POST. The two parameters specify the URL address, and the third parameter specifies whether to use asynchronous. The default is true, so there is no need to write it.
Note, never specify the third parameter as false, otherwise the browser will stop responding , until the AJAX request is completed. If this request takes 10 seconds, then within 10 seconds you will find that the browser is in a "suspended death" state.
Finally call the send() method to actually send the request. The GET request does not require parameters, and the POST request requires the body part to be passed in as a string or FormData object.
Security restrictions
The URL in the above code uses a relative path. If you change to 'http://www.sina.com.cn/' and run it again, an error will definitely be reported. In the Chrome console, you can also see error message.
This is caused by the browser’s same-origin policy. By default, when JavaScript sends an AJAX request, the domain name of the URL must be exactly the same as the current page.
完全一致的意思是，域名要相同（www.example.com和example.com不同），协议要相同（http和https不同），端口号要相同（默认是:80端口，它和:8080就不同）。有的浏览器口子松一点，允许端口不同，大多数浏览器都会严格遵守这个限制。
那是不是用JavaScript无法请求外域（就是其他网站）的URL了呢？方法还是有的，大概有这么几种：
一是通过Flash插件发送HTTP请求，这种方式可以绕过浏览器的安全限制，但必须安装Flash，并且跟Flash交互。不过Flash用起来麻烦，而且现在用得也越来越少了。
二是通过在同源域名下架设一个代理服务器来转发，JavaScript负责把请求发送到代理服务器：
'/proxy?url=http://www.sina.com.cn'代理服务器再把结果返回，这样就遵守了浏览器的同源策略。这种方式麻烦之处在于需要服务器端额外做开发。
第三种方式称为JSONP，它有个限制，只能用GET请求，并且要求返回JavaScript。这种方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源：
<html> <head> <script src="http://example.com/abc.js"></script> ... </head> <body> ... </body> </html>
JSONP通常以函数调用的形式返回，例如，返回JavaScript内容如下：
foo('data');这样一来，我们如果在页面中先准备好foo()函数，然后给页面动态加一个