JQuery ajax tutorial

AJAX refers to Asynchronous JavaScript and XML (AsynchronousJavaScriptAndXML). It refers to a Web page development technology for creating interactive web applications. AJAX refers to Asynchronous JavaScript and XML (AsynchronousJavaScriptAndXML ), this is a web development technology used to create interactive web applications. Using AJAX

AJAX refers to Asynchronous JavaScript and XML (Asynchronous JavaScript AndXML), and is a web development technology used to create interactive web applications.

AJAX introduction:
AJAX refers to Asynchronous JavaScript And XML (Asynchronous JavaScript And XML), And is a web development technology used to create interactive web applications. Through AJAX, JavaScript can use the XMLHttpRequest object of JavaScript to directly communicate with the server. With this object, JavaScript can exchange data with the Web server without reloading the page.
JQuery is a javascript framework and a lightweight encapsulation of javascript, which is easy to understand.
Ajax is an asynchronous request technology that combines xml and javascript to achieve dynamic refresh.
Ajax preparation:
1. Download jquery:
Official site of the latest: http://blog.jquery.com/2011/09/01/jquery-1-6-3-released/
When downloading, right-click jQuery 1.6.3 Minified or jQuery 1.6.3Uncompressed and choose "use thunder download"
2. Overview
2.1.ajax asynchronous transmission steps:
1. Use dom to get the attribute values in the text box
Document. getElementById ("id name"). value
2. Create an XMLHttpRequest object
XMLHttpRequest and ActiveXObject are available based on different browsers.
3. register the callback function. When registering the callback function, you only need the function name. Do not add brackets.
When the callback function is registered, the data returned by the server is obtained:
Method 1: Obtain plain text data output by the server
Method 2: Use responseXML to accept DOM objects of XML Data Objects
4. Set connection information
5. Send data and start interaction with the server.
Post/get

2.2.ajax methods:
(1). getElementById ("id attribute value "):
Obtains an object based on the specified id property value.
(2). getElementsByTagName (tagname ):
Returns a set of elements with the specified name by searching for any HTML element in the entire HTML document.
(3). selector:
Selectors include basic selectors, hierarchical selectors, and attribute selectors. This program only has the basic selector # id, such:
$ ("# MyDiv"): Find the element whose ID is "myDiv"
2.3.XMLHttpRequest object:
XMLHttpRequest allows you to update a webpage without reloading the page. After the page is loaded, the client requests data from the server and receives data from the server after the page is loaded, send data to the client in the background.
2.3.1. Method:
(1) overrideMimeType ("text/html "):
Overwrite the header sent to the server and force text/xml as the mime-type
(2) open (method, url, async, username, password ):
Initialize HTTP request parameters, such as URLs and HTTP methods, but do not send requests.
The method parameter is the HTTP method Used for the request, including GET, POST, and HEAD;
The url parameter is the request body.
The async parameter indicates whether the request is synchronous or asynchronous, and the false request is synchronous, and the true request is asynchronous.
The username and password parameters are optional and provide authentication qualifications for url Authorization. If they are specified, they will overwrite any qualifications specified by the url itself.
(3) send (body ):
Sends an HTTP request, uses parameters passed to the open () method, and optional request bodies passed to the method.
Send (body) if the HTTP method specified by calling open () is POST or PUT, the body parameter specifies the Request body as a string or Document object. If the request body is not required, this parameter is null.
If the previously called open () parameter async is false, this method will be blocked and will not be returned until the readyState is 4 and the server's response is fully received.
If the async parameter is true, or this parameter is omitted, send () returns immediately, and as described later, the server response will be processed in a background thread.
(4) setRequestHeader (name, value ):
Set or add an HTTP request to an opened but not sent request
The name parameter is the name of the header to be set. This parameter should not contain white spaces, colons, or line breaks.
The value parameter is the value of the header. This parameter should not contain line breaks
2.3.2. attributes:
(1) onreadystatechange:
The event handle function called every time the readyState attribute is changed. When readyState is 3, it may also be called multiple times.
(2) readyState:
HTTP Request status. When an XMLHttpRequest is created for the first time, the value of this attribute starts from 0 until the complete HTTP response is received. This value is increased to 4.
Each of the five States has an associated informal name. The following table lists the status, name, and meaning:

The value of readyState will not decrease unless a request calls the abort () or open () method during processing. The onreadystatechange event handle is triggered every time the value of this attribute is increased.
(3) status:
The HTTP status code returned by the server. For example, 200 indicates success, and 404 indicates "Not Found" error. When readyState is less than 3, reading this attribute will cause an exception.
(4) responseText:
The response body received from the server (excluding the header) So far, or if no data is received, it is a null string.
If readyState is less than 3, this attribute is an empty string. When readyState is 3, this attribute returns the response that has been received. If readyState is 4, this attribute stores the complete response body.
If the response contains a header that specifies the character encoding for the response body, this encoding is used. Otherwise, assume that the Unicode UTF-8 is used
(5) responseXML: the response to the request, which is parsed as XML and returned as a Document Object

Sample Code:
Note: This example consists of the front-end and back-end. The back-end adopts servlet implementation, but does not go to the database for data verification. The front-end is composed of html and javascript. The front-end verification adopts two methods: jquery-encapsulated ajax for dynamic form verification, and XMLHttpRequest object for dynamic form verification, the difference between the two verification methods is that javascript scripts are different, and the front-end pages and backend servlets are the same.

Frontend ajax.html

Http://www.w3.org/TR/html4/loose.dtd>


Ajax