A, ajax features:
1. partial refresh: without reloading the entire page of the case, you can exchange data with the server and update parts of the page content
2. The asynchronous data transmission
Second, the use of GET requests need to pay attention
1. Note safety, do not put sensitive information by operating GET request.
2. Note that the size parameters, if the number of bytes is too large, not suitable for the GET request.
3. Note the garbage problem and prevent XSS attacks, the parameters of the URL that comes with the character to be unified coding process.
4. Note cache problem, GET requests are automatically cached data, and sometimes may not reflect the dynamic results, you can attach a time stamp on the character argument.
Third, the use POST request problems that need attention
1. Note that the Content-Type header set to application / x-www-form-urlencode ensure that the server knows entity has variable parameters.
2. The parameter data is transmitted in the form key1 = value1 & key2 = value2 of.
3. If you upload a file, you need to set the Content-Type is multipart / form-data to allow server receives the binary file data.
Four, Ajax form submission and form the difference?
1, submission
form form form submission is usually carried out by action, method and submit defined in HTML, submit additional function call can also be carried out in the js form submission.
ajax may be packaged as submitted by the XMLHttpRequest object.
2, page refresh
Form submitted updated data, you need to go to a blank page and then submit the original page after treatment. Even if it is submitted to the page itself, but also the need to refresh, so significant limitations.
Ajax, $ http can be achieved partial page refresh, the entire page is not refreshed.
3, who submitted the request
Form submission is complete browser, regardless of whether the browser open JS, can submit the form.
Ajax, $ http request is to be submitted by js, js requests and responses by the engine to process, JS is not enabled browser to complete the operation.
5, the network View
Open developer mode browser (F12 key or the right mouse button) => Network (you can see all the network load information, long including the request, the request status, request address, request port number of the service, the request type (post, get) request parameter (whether it is a request parameter get a request parameter or the post))
Five steps to create native js
1, the step of transmitting data using ajax
The first step : to create an asynchronous objects
var xhr = new XMLHttpRequest();
Step : Set request line open (mode request, a request URL):
// GET request the parameter if it is necessary in the back stitching url parameters // POST parameters if, in the body xhr.open transfer request ( "GET", "validate.php? Username =" + name) xhr.open ( "post", "validate.php" );
The third step : setting request (GET ignoring this step) header: the setRequestHeader ()
// 1.get no need to provide // 2.post need to set the request header: the Content-the Type: file application / X-WWW-form-urlencoded xhr.setRequestHeader ( "the Content-the Type", "file application / X-WWW-form- urlencoded " );
The fourth step : setting request body send ()
// 1.get url parameters in the stitching, need not be provided in this function // 2.post set of parameters (if any parameter) in this function xhr.send ( null ) xhr.send ( "username = "+ name);
Step Five : Let asynchronous data objects in response to receiving server
xhr.onreadystatechange = function(){ if(xhr.status == 200 && xhr.readyState == 4){ console.log(xhr.responseText); }