Learning about ASP. NET Ajax (I) together

ASP is being learned these days. net Ajax, learning a little confused, so I decided to first learn Ajax, then to ASP. net Ajax transition. This article will introduce you to Ajax from a macro perspective, and then from the details section. The context of this article is as follows.

Ajax Definition

Ajax is short for Asynchronous JavaScript and XML (Asynchronous JavaScript and XML). It is not a new programming language, but a new method that uses existing standards. The full name seems to be only JavaScript and XML. In fact, Ajax does not only contain JavaScript and XML. Ajax is composed of JavaScript, XML, CSS, Dom, and XMLHttpRequest.

Ajax Composition

Apart from JSON and XMLHttpRequest, I have learned other things before, so I will give a brief introduction.

1. html/XHTML: used to describe the initial style of an Ajax page, that is, the page displayed for the first time.
2. DOM: Document Object Model (file object model), used to represent the XML data structure.
3. CSS: Cascading Style Sheet, used to represent the style of elements in HTML files.
4. xml and JSON: XML is a standard data style, which can be well interpreted on both the server side and the client side,
JSON: JavaScript Object Notation. Because the JSON format is consistent with the syntax of the object defined in Javascript, JSON is shorter than XML for the same data, reducing network traffic.
5. server-side browser request processing: developers can choose the methods they are familiar with to design and implement the server.
6. XMLHTTPRequest object: it allows developers to send HTTP requests to the server asynchronously in JavaScript and get responses.
7. javascript: You can associate the preceding elements through JavaScript, such as viewing and modifying Dom and CSS through JavaScript.

XMLHTTPRequest object

XMLHttpRequest objects are the technical basis of Ajax and Web 2.0 applications. Ajax uses XMLHttpRequest to send and receive HTTP requests and responses. An HTTP request sent through an XMLHTTPRequest object does not require a <form> element on the page. "A" in Ajax represents "Asynchronous", which means that the send () method of the XMLHTTPRequest object can be returned immediately, in this way, other html/JavaScript on the web page can be processed by the browser, and the server processes HTTP requests and sends responses. By default, requests are asynchronous. You can also choose to send synchronous requests. This will suspend the processing of other web pages until the page receives a response from the server, before using the XMLHTTPRequest object to send requests and process responses, you must use JavaScript to create an XMLHTTPRequest object.

XMLHttpRequest attributes

Genus	Description
Onreadystatechange	This event processor is triggered when each state changes. A JavaScript function is usually called.
Readystate	Request status. Five optional values: 0 = not initialized, 1 = loading, 2 = loaded, 3 = interaction, 4 = completed
Responsetext	Server Response, represented as a string
Responsexml	Server Response, which is expressed as XML. This object can be parsed as a DOM object.
Status	HTTP status code of the server (200 corresponds to OK, 404 corresponds to not found (not found), and so on)
Statustext	The corresponding text of the HTTP status code (OK or not found (not found) and so on)

XMLHttpRequest Method

Method	Description
Abort ()	Stop current request
GetAllResponseHeaders ()	Returns all Response Headers of an HTTP request as key/value pairs.
GetResponseHeader ("Header ")	Returns the string value of the specified header.
Open ("method", "url ")	Create a call to the server. The method parameter can be get, post, or put. URL parameters can be relative URLs or absolute URLs. This method also includes three optional parameters.
Send (content)	Send a request to the server
SetRequestHeader ("Header", "value ")	Set the specified header to the provided value. You must call open () before setting any header ()

Use of AJAX

Why Ajax? It can implement asynchronous communication, refresh the page part, and reduce the amount of data transmission. The most important thing is to provide a better user experience.

Ajax is very common in the current web, such as Google Maps. This area is reloaded every time you drag the map, but the page is not refreshed. Baidu's search box displays matched content after you enter it; content updates on Weibo have not been reloaded ......

Ajax client Lifecycle

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

(1) The user sends a browser request to a website.
(2) the server sends the HTML page content to the browser.
(3) the browser creates a DOM in the memory based on the received HTML content.
(4) The user triggers an asynchronous request to the server. This will not affect the existing Dom, that is, user operations will not be interrupted.
(5) the browser sends XML format data to JavaScript Functions on the original page for processing.
(6) The browser parses the result and then updates the DOM in the memory. Some content on the webpage is updated and displayed smoothly.

Implementation Principle

Ajax loading is the same as traditional Web applications: first, entering a URL address or clicking a link triggers an HTTP request from the browser, and then the server processes the request to generate appropriate HTML, CSS, and JavaScript, and send it to the client. The client browser displays this section of HTML. Subsequent user operation responses start to be different: the user's operations will not trigger another HTTP request from the browser, but it will lead to the execution of some JavaScript code on the client side.

The image description is not as good as a picture:

Simple instance

Do not reload the page to obtain the title in book. xml.

HTML code

<HTML xmlns = "http://www.w3.org/1999/xhtml"> 
Book. xml

<Books> <book category = "network"> <title lang = "en"> Web development </title> <author> m </author> <year> 2008 </year> <price> 35 </price> </book> <book category = "computer"> <title lang = "en"> storage body </title> <author> C </ author> <year> 2012 </year> <price> 30 </price> </book>
Running result
The result is as follows:


I just got started with Ajax and made a simple foundation for ASP. NET Ajax. I will learn Ajax in detail in the following practices.