First, what is Ajax?
Aiax: Asynchronous Javascript and XML.
Role: to complete the partial refresh
XML is used for data transmission, it is now replaced by JSON.
1.1 interaction problems
Traditional each interaction must return the entire page, broadband has an impact, response speed,
Ajax interact from
After the client (browser) finished loading a web page from a server, the content of the page if you need to change, do not use the browser sends a request, but the use of JavaScript in the XMLHttpRequest (and Ajax to a server, the server receives the request object) and the object sends a request after processing returns only the contents of the desired page, the XMLHttpRequest content objects returned by the server is received, programmers need to manually (javascript) of the updates to the page, all the benefits of Ajax interactions is only part of the data is updated, and successfully carried out on the server interaction, improve the user experience.
1.2 usage scenarios
Need to refresh the page, such as (the browser map search elements, automatically prompts the user to repeat check, shopping cart, user login, etc. .....) will need to use Ajax interactions.
1.3, Ajax features
Exchange data with the server via Ajax, Ajax allows web pages to achieve partial update, which means you can, for a certain part of the page is updated without reloading the entire page
1.4, Ajax core
Ajax is the core JavaScript object XMLHttpRequest. Simply put, you use the JavaScript XMLHttpRequest can make a request to the server and handle the response.
1.5 difference, synchronous and asynchronous
Synchronization: submitting a request -> waiting for server processing -> handle anything during this return is completed the client browser can not do
Asynchronous : request by event triggers -> server processing (At this point the browser can still be used for other things) -> processed
Synchronization means: after sending the sender data, and other communication only issued after receiving a data packet to send back the response.
Asynchronous means: after sending a data sender, the receiver sends back the response range, then send the next data packet communication is
Two, Ajax native implementation
xhr = new XMLHttpRequest (): it creates a new object via ajax compatible [IE] create ActiveXObject
2.1, a method (function)
xhr.open (methodType, methodUrl, ISSYS) -> preparation request way path
methodType: mode request (the GET / the POST)
methodUrl: route request
isSys: whether asynchronous (defaults to true)
XHR. ; setRequestHeader ( "Content-type" , "application / x-www-form-urlencoded")
setting a type of the request header, if the POST request, this one must be added, you can transmit the data to back
after open: position before send
xhr.send (varBody) -> transmission request
varBody: POST request transmission parameters (Key = value = value & ... & Key)
2.2, properties
xhr.status -> status of the request (200 equal success)
xhr.readyState -> response state (4 represents a complete response)
xhr.responseText -> return data acquisition (string)
2.3, event
xhr.onreadystatechange = function () {} - > listening state change readyState
Third, pay attention to points
Use Ajax requests, not jump back, only data transmission
The return value is a string, you need to make your own judgment and considerable conversion
Four, JSON: JS object Object / String
json data transfer is more convenient than the XML, simple, streamlined
var jsonStr = {} / [] ;
if converted into a string json json object?
eval ( "(" + jsonStr + ")") -> front parentheses
JSON.parse (jsonStr) -> must be a standard json (key must have double quotes)