preface
This article introduces you to what Ajax is
1, What is Ajax?
Ajax itself is not a technology.
Ajax is a way to change the data interaction between web application and server by using JavaScript script (asynchronous loading of pages).
AJAX can make web pages update asynchronously by exchanging a small amount of data with the server in the background. This means that a part of a web page can be updated without reloading the whole web page.
Traditional web pages (without AJAX) must reload the whole web page if they need to update the content.
2, What is the difference between asynchronous and synchronous?
Synchronization needs to wait for the returned results to continue. Asynchronous does not have to wait
Synchronization: submit the request - > wait for the server to process - > return after processing. During this period, the client browser cannot do anything
Asynchronous: the request is triggered by an event - > processed by the server (at this time, the browser can still do other things) - > processing is completed
3, What format of data can Ajax get?
Note: Note: you must configure the integrated environment (post) to simulate the server, and you can obtain data using any tool)
If you don't want to configure the environment (get) and want to obtain data, you can use HBuilder to obtain data as long as you don't lead to the background language, because HBuilder comes with a small environment.
1. .txt: plain text2. .html: html file
3. .js: javaScript file
4. .xml: xml file
5. . JSON: JSON file
4, How to use ajax (four steps)?
1. Create XMLHttpRequest core object
// Common writing
var xhr=new XMLHttpRequest();
// Compatible writing
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHttp"); //Support for IE6 and below
}
// Encapsulation writing method
function getXhr(){
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
var xhr=getXhr();
2. Register listening
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&(xhr.status===200||xhr.status===304)){
console.log(xhr.responseText);
}
}
/*What parsing: because the data needs to be loaded to the page circularly, the json format cannot be circularly
Parsing method 1: JSON parse()
var data=JSON.parse(xhr.responseText);
console.log(data);
Parsing method 2: eval()
var data = eval("("+ xhr.responseText +")");
console.log(data);
You can call functions to perform specific operations
fn(data);
Status value (judge the status of the request)
The status of XMLHttpRequest is stored. Changes from 0 to 4.
0: Request not initialized
1: Server connection established
2: Request received
3: Request processing
4: The request is complete and the response is ready
Status code (to judge the response)
https://www.runoob.com/http/http-status-codes.html
https://baike.baidu.com/item/HTTP%E7%8A%B6%E6%80%81%E7%A0%81/5053660?fr=aladdin
1xx: Information response class, indicating that the request is received and processing continues
2xx: The successful response class indicates that the action has been successfully received, understood and accepted
3xx: The redirection response class must accept further processing in order to complete the specified action
4xx: Client error. The client request contains syntax error or cannot be executed correctly
5xx: Server error. The server cannot execute a correct request correctly
200: "OK"
304: File unchanged, page cache
404: Page not found
500: Backstage problems
*/
3. Establish connection
xhr.open(method,url,async);
/*method: Request types, including get and post; The format is string;
get: HBuilder Small environment test
post:An integrated environment must be built
url: Request address; The format is string;
Async: Whether asynchronous; (true: asynchronous; false: synchronous)
For example: XHR open('get','one.txt',true);
//xhr.open('post','one.txt',true);
//post Add http header, content encoding type when sending information to the server
//xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
*/
4. Send data
/*
Get The parameters sent in this mode are different from those sent in post mode
Format: XHR send(string)；
Send null when requesting for get mode;
xhr.send(null);
When requesting for post mode, send the specific parameter XHR send("name='lily'&age=18");
*/
What is the difference between get and post?
1. get is to get data from the server, and post is to transfer data to the server.
2. get is to add the parameter data queue to the URL indicated by the ACTION attribute of the submitted form. The value corresponds to each field in the form one by one, which can be seen in the URL. Post is to place the fields in the form and their contents in the HTML HEADER through the HTTP post mechanism and transfer them to the URL address indicated by the ACTION attribute. Users cannot see this process.
3. For get mode, the server uses request Querystring gets the value of the variable. For post mode, the server uses request Form to get the submitted data.
Send data in the header
xhr.open("get","one.txt?name='lisa'&age=28",true);
Post sends data in the request body
xhr.send("name='lili' & age=29 ");
4. The amount of data transferred by get is small and cannot be greater than 2KB. The amount of data transferred by post is large, which is generally unlimited by default. But theoretically, the maximum amount is 80KB in IIS4 and 100KB in IIS5.
5. get security is very low and post security is high. However, the execution efficiency is better than the post method.
Recommendations:
1. The security of get mode is worse than that of Post mode. If confidential information is included, it is recommended to use Post data submission mode;
2. When querying data, it is recommended to use Get method; When adding, modifying or deleting data, Post is recommended;