get request and post request
The amount of data transmitted by the get request is small and cannot be larger than 2KB. The parameter is appended to the URL, and the clear request parameter value can be seen.
There is no limit to the amount of data sent by the post request. The request parameters are transmitted in the HTML Header through the HTTP POST mechanism, and the clear request parameter values cannot be seen.
The get request send() does not need to pass parameters, and the post request send() needs to pass parameters. The post request needs to set setRequestHeader("Content-Type", "application/x-www-form-urlencoded").
send get request
// Step 1: Create an asynchronous object
var ajax = new XMLHttpRequest(); // Step 2: Set the url parameter of the request, the first parameter is the type of the request, and the second parameter is the requested url, which can take the parameter
ajax.open( 'get',' url ?data='+data ); // Step 3: onreadystatechange will call ajax when the state changes .
onload = function () { if (ajax.status==200 ) {
// Step 5 callback response
}
} //Step 4: send request ajax.send(); register eventsend post request
//
Step 1: Create an asynchronous objectvar ajax = new XMLHttpRequest();
// Step 2: Set the url parameter of the request, the first parameter is the type of the request, and the second parameter is the requested url, which can take parameters
ajax.open('post','url');
ajax.setRequestHeader(“Content-Type”，“application/x-www-form-urlencoded”)。
// Step 3: onreadystatechange will be called when the state changes
if (ajax.status==200) {
// Step 5 callback response
}
} // Step 4: Send the requestajax.send(data); register event
XML request and form submission
Sending an xml request is actually still sending a post request, but the parameters are sent in the form of xml strings.
Send form data html5 provides FormData
You can var FormData = new FormData(document.querySelector("#formId")); get the form data, then send(FormData).
Encapsulate native js to send ajax requests
function ajax_method(url,data,method,success) {
// asynchronous object
var ajax = new XMLHttpRequest();
// get and post need to write different codes
if (method=='get') {
// get request
if (data) {
// if there is a value
url+='?';
url+=data;
}
// setting method and url
ajax.open(method,url);
// send can be
ajax.send();
}else{
/ / post request
// post request url does not need to be changed
ajax.open(method,url);
// need to set the request message
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded") ;
// Judge data send to send data
if (data) {
// If there is a value, send it from send
ajax.send(data);
}else{ // If there is no value
, you can send it directly
ajax.send();
}
}
// Register event
ajax.onreadystatechange = function ( ) {
// Get the data in the event and modify the interface display
if (ajax.readyState==4&&ajax.status==200) {
// console.log(ajax.responseText);
// Make the data available outside
// return ajax.responseText;
// When onreadystatechange is called, it means that the data is back.
// ajax.responseText;
// If you can pass a function as a parameter outside, success
success(ajax.responseText);
}
}
}
handle the response
Now Ajax technology has gradually used json response to get XML response. You need to set the responseType to json. Get the server response through response.