2015.3.17Ajax Small Exercise

When the Web page is processed by the browser, dynamically feeds the Web page Dynamic Data. A Web page built with Dynamic Data becomes a data-driven Web page that is responsible for the content of the page.

JavaScript has built-in support for dynamic Data, which is Ajax. has always been very interested in Ajax, did a small experiment today. First to describe the Ajax,ajax can let the client's browser with the Web server to generate some "dialogue", the dynamic Data is thus true, the script can request some data to the server, the server uses AJAX to pass data, the script to receive data and dynamically integrate data into the Web page. The Web page does not need to be refreshed and reloaded, which can greatly improve the user's experience and speed. Ajax is the abbreviation for asynchronous Javascript and XML, which also mentions the concept of XML, which is a markup language for any type of data design format. XML can label data with its own tags, and XML is similar to HTML, both text. And Xhtml,xhtml is a new version of HTML that adheres to the stricter syntax rules of XML.

The entire AJAX interaction model is that Ajax takes the request and response (response) as a central concept when implementing data communication between the client browser and the server. The browser sends a request to the server, waits for a response, the server receives a response, starts working, creates a response, the server script is not JavaScript, but JavaScript is very powerful, and now node. JS can assume some simple server responsibilities and the functionality is constantly expanding. The next step is the server-created response to the browser, which packages the data requested by the client, which is returned by the AJAX response, the browser unlocks the data packaged in the response, and carefully consolidates the data into the Web page.

JavaScript contains an XMLHttpRequest object that initiates an AJAX request and processes the AJAX response. Contains a lot of Ajax-enabled methods and features.

Status code for ReadyState request: 0 (not initialized) 1 (ON) 2 (delivered) 3 (accepted) 4 (loaded)

Status (HTTP request state code, such as 404 (Not FOUND) or (OK)).

Both of these features determine whether the AJAX request ends with a legitimate response.

onReadyStateChange a function reference that will be called when the request state changes. (This feature is unique in that it stores a reference to the custom event handler that is invoked when the state of the AJAX request changes, and this event handler is where the response is handled.)

ResponseText (The response data returned by the server, formatted as a plain text string) and Responsexml (the response data returned by the server, in the form of an XML node tree object.) This two feature stores the AJAX response data returned by the server.

Send () sends the request to the server for processing.

Open () Prepares the request, specifying the type of request (get,post), URL, and other details.

Both the Send () and open () methods work together to prepare the Ajax rider and then return to the server.

The Abort () method is used only when the AJAX request needs to be canceled.

Because XMLHttpRequest is quite complex, even the most basic requests require a lot of code, so here the basic request statement is encapsulated into a JS module. Convenient to call the experiment, the source code is as follows:

Next is the native JS write asynchronous loading, where the server is used in C #,

Native JS Ajax Method:

Execution result: before clicking:

After execution:

After the first native asynchronous success, now try the jquery Ajax method

One is the load loading document for jquery, and one is the method used with the post and get joins.

Body part:

JS section

：

Service-side section:

Operation Result:

2015.3.17Ajax Small Exercise