Your understanding of aja (1 and 2) and your understanding of aja

Your understanding of aja (1 and 2) and your understanding of aja

What Is Ajax?

Ajax is short for Asynchronous JavaScript and XML. This technology can request additional data from the server without detaching the entire page, which brings a good user experience. The traditional HTTP request process is like this, the browser sends a request to the server-> the server generates a response-> server returns the response to the browser-> the browser refreshes the page to display the latest data, which is synchronized, sequential execution.

AJAX uses asynchronous data transmission (HTTP request) between the browser and the Web server to obtain data from the server. asynchronous here refers to the separate execution of requests and loads from the current browser page, this means that you can accept the data sent from the server through JavaScript without reloading the entire webpage, and then operate DOM to update a part of the webpage, the most intuitive feeling with Ajax is that it is not necessary to refresh the page to get new data from the server.

Ajax (1)

Ajax is short for Asynchronous Javascript And XML. Purpose: Ajax allows you to use Javascript statements to call the XMLHttpRequest object and communicate directly with the server. You can exchange data with the server without reloading the page. 1. Create XML

Ajax is short for Asynchronous Javascript And XML.

Purpose: Ajax allows you to use Javascript statements to call the XMLHttpRequest object and communicate directly with the server. You can exchange data with the server without reloading the page.

1. Create an XMLHttpRequest object

Var xhr = new XMLHttpRequest ()

For earlier versions of IE (IE7 and earlier versions), new ActiveXObject (\ "Microsoft. XMLHTTP \") and new ActiveXObject (\ "Msxml2.XMLHTTP \") are used to create objects.

2. Common attributes and common methods of XMLHttpRequest objects

Attribute

Readystate returns the current status code of the XMLHTTP request.
Return the HTTP status code of the current request.
StatusText returns the text corresponding to the HTTP status code

Method

Onreadystatechange listens to readystate and state

Ajax understanding (2)

Ajax method: Load remote data through HTTP requests
Get method: load information through a remote http get request
Post method: load information through a remote http post request

1. Create an XMLHttpRequest object

function createXHR() {   return window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");}

2. convert a key-value pair to a concatenation string

  function params(data) {   var a = [];   for (var i in data) {    a.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i]));   }   return a.join("&");  }

3. encapsulate ajax Methods

Parameters

Method Request methods get and post default get
Data key-value Pair {key: value}
Url
Cache true and false default true with cache
Success error exception

Function ajax (args) {var xhr = createXHR (); var data = http://www.cnblogs.com/kuikui/archive/2012/01/12/params (args. data); if (/get/I. test (args. method) {// when the get method is used, data is directly spliced To The args after the url. url + = "? "+ Data;} if (! Args. cache) {// No cache if (args. url. indexOf ("? ") <0) {// when no parameter data args. url + = "? ";} Args. url + = "&" + (new Date (); // Math. random ();} xhr. open (args. method, args. url, true); xhr. onreadystatechange = function () {if (4 = xhr. readyState & 200 = xhr. status) {args. success (xhr. responseText, xhr. responseXML);} else {args. error () ;}} if (/post/I. test (args. method) {xhr. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded"); xhr. send (data);} else {xhr. send ();