How does Ajax work correctly? The details of how to use Ajax in the first time

This article mainly introduces the definition of Ajax, for some people who just know Ajax, this still does not understand, so this article teaches you how to correctly understand Ajax and the correct learning of Ajax. Now, come and see this article.

These days are learning ASP. NET AJAX, learning a little confused, so decided to learn Ajax, and then to the ASP. NET AJAX transition, this article will take you to the first knowledge of Ajax, from the macro view of Ajax, and then from the details of the study, the article context is as follows.

• Ajax definitions

• Ajax composition

• XMLHttpRequest
  

• Common AJAX Usage

• Ajax Client Life cycle

• Implementation principle

• A simple example

Ajax definitions

Ajax is an abbreviation for asynchronous JavaScript and XML (asynchronous JavaScript and XML), which is not a new programming language, but a new method of using existing standards. The full name seems to be only JavaScript and XML, and Ajax is not just about JavaScript and Xml,ajax, it's made up of JavaScript, XML, CSS, Dom, and XMLHttpRequest.

Ajax composition

In addition to JSON and XMLHttpRequest, others have studied before, so a brief introduction.

1, html/xhtml: Used to describe the initial style of the Ajax page, that is, the first load of the displayed page.
2. Dom:document object model, which is used to represent XML data structures.
3. Css:cascading style Sheet (cascading style sheet), used to represent the style of elements appearing in an HTML file.
4. XML and Json:xml are standard data styles that can be interpreted well by both the server side and the client.
Json:javascript Object Notation, because the JSON format is consistent with the syntax of the object defined in JavaScript, and for the same data, JSON is shorter than XML and reduces network traffic.
5, server-side processing browser Request: The developer can choose the way he is familiar with the server-side design implementation.
6. XMLHttpRequest object: It allows the developer to make an HTTP request to the server asynchronously in JavaScript and get a response.
7. javascript: The above elements can be linked by JavaScript, such as through JavaScript to modify the DOM, CSS, and so on.

XMLHttpRequest Object

The XMLHttpRequest object is the technical basis for AJAX and Web 2.0 applications, and Ajax uses XMLHttpRequest to send and receive HTTP request and response information. An HTTP request sent via an XMLHttpRequest object does not require the page to have or return an

element. The "A" in Ajax represents "async", which means that the send () method of the XMLHttpRequest object can be returned immediately, allowing other html/javascript on the Web page to continue its browser-side processing while the server processes the HTTP request and sends a response. By default, the request is asynchronous, and you can choose to send the synchronization request, which pauses the processing of the other Web pages until the page receives a response from the server, before sending the request and processing the response using the XMLHttpRequest object. You must first create a XMLHttpRequest object with JavaScript. (want to see more on the Topic.alibabacloud.comAJAX Development Manual section of the study)

XMLHttpRequest Property

Properties	Description
onReadyStateChange	This event handler is triggered when each state changes, and a JavaScript function is usually called
ReadyState	The status of the request. There are 5 desirable values: 0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, 4 = complete
ResponseText	The response of the server, expressed as a string
Responsexml	The response of the server, expressed as XML. This object can be parsed as a DOM object
Status	HTTP status code for the server (200 corresponds to ok,404 not Found (not found), etc.)
StatusText	Corresponding text for the HTTP status code (OK or not Found (not found), etc.)

XMLHttpRequest method

Method	Description
Abort ()	Stop the current request
getAllResponseHeaders ()	Returns all response headers for an HTTP request as a key/value pair
getResponseHeader ("header")	Returns the string value of the specified header
Open ("Method", "url")	Establish a call to the server. The method parameter can be a GET, post, or put. The URL parameter can be a relative URL or an absolute URL. This method also includes 3 optional parameters
Send (content)	Send a request to the server
setRequestHeader ("header", "value")	Sets the specified header to the value provided. You must first call open () before setting any header

Use of Ajax

Why use Ajax? Because it can achieve asynchronous communication, the page can be partially refreshed, while reducing the amount of data transmission, the most important thing is to give the user a better experience.

Ajax in the current web is very common, such as Google's map, each drag will reload the area, but the page is not refreshed; Baidu search box, the input after the matching content; The content on Weibo is updated, and the page has not been reloaded ...

Ajax Client Life cycle

This cycle is divided into six easy-to-distinguish processes, as follows:

(1) The user requests a browsing request for a URL.
(2) The server sends the HTML page content to the browser.
(3) The browser creates the DOM in memory based on the HTML content it receives.
(4) The user triggers an asynchronous request to the server. This does not affect the existing DOM, which means that user actions are not interrupted.
(5) The browser sends the XML format data to the JavaScript functions in the original page for processing.
(6) Browser parsing results, and then update the DOM in memory, the page part of the content is updated, very smooth display page.

Implementation principle

Ajax is loaded in the same way as a traditional web app: First, a URL address or a click-through link raises a browser HTTP request, and then the server processes the request, generates the appropriate HTML, CSS, and JavaScript, and sends it to the client, and the client browser displays the HTML. Thereafter, the response of the user operation begins differently: These actions of the user will not cause another HTTP request from the browser, but will cause execution of a piece of JavaScript code for the client.

Again how to describe the image is not as good as a picture:

A simple example: do not reload the page to get the title of the Book.xml.

HTML code:

Book.xml


< books >  < books  category = "Network" >    < title lang= "en" >web development </title >    < author >m</author >    < year >2008</year >    < price >35</price >  </book >  < book category = "Computer" >    < title lang= " En "> Memory </title >    < author >c</author >    < year >2012</year >    < price >30</price >  </book ></books >
Run Result: the displayed result is not refreshed as follows


This is the end of this article (want to see more on the Topic.alibabacloud.comAJAX User manual section of the study), there are questions can be in the message below the question.