Ajax Learning Notes

Ajax Learning Note One, definition (encyclopedia)

1, Ajax is "asynchronous Javascript and XML" (Asynchronous JavaScript and XML), refers to the creation of interactive Web page application of Web development technology.

2.AJAX = Asynchronous JavaScript and XML (a subset of standard generic markup languages).

3.AJAX is a technique for creating fast, Dynamic Web pages.

4.AJAX is a technology that can update parts of a Web page without reloading the entire page.

5. AJAX enables Web pages to be updated asynchronously by exchanging small amounts of data in the background with the server. This means that you can update a part of a webpage without reloading the entire page.

6. Traditional Web pages (do not use AJAX) if you need to update the content, you must reload the entire page page.

Here are the differences between synchronous and asynchronous. My popular understanding is: Synchronization is to send a request to the server, it must wait for the request to have a response, in order to make the next request, and asynchronous is timed within a certain time interval is sent, not to ignore the server's return status. Just like a phone call (sync), you have to wait for a return status after dialing: Answer, no answer, shut down, etc. while texting (async) It just sends a text message, whether you receive it or not.

Second, the principle

Ajax is based on existing Internet standards and uses them together:

• XMLHttpRequest objects (asynchronously exchanging data with the server)
• Javascript/dom (Information display/interaction)
• CSS (defining styles for data)
• XML (as a format for transforming data)

Iii. method definition and implementation (rookie tutorial) 1. CreateXMLHttpRequest Object

Ajax-Creating XMLHttpRequest objects,XMLHttpRequest is the basis of Ajax. XMLHttpRequest objects, all modern browsers support XMLHttpRequest objects (IE5 and IE6 use ActiveXObject). XMLHttpRequest is used to exchange data with the server in the background. This means that you can update a part of a webpage without reloading the entire page.

All modern browsers (ie7+, Firefox, Chrome, Safari, and Opera) have built-in XMLHttpRequest objects.

Syntax for creating XMLHttpRequest objects:variable=new xmlhttprequest ();

Older versions of Internet Explorer (IE5 and IE6) use ActiveX objects:variable=new activexobject ("Microsoft.XMLHTTP");

To handle all modern browsers, including IE5 and IE6, check whether the browser supports XMLHttpRequest objects. If supported, the XMLHttpRequest object is created. If not supported, create the ActiveXObject:

variable = new XMLHttpRequest (); variable=new ActiveXObject ("Microsoft.XMLHTTP"); var xmlhttp;if (window. XMLHttpRequest) {    //  ie7+, Firefox, Chrome, Opera, Safari execute code    xmlhttp=new XMLHttpRequest ();} else{    //IE6, IE5 Browser execution code    xmlhttp=new activexobject ("Microsoft.XMLHTTP");}

2. Send a request to the server

The XMLHttpRequest object is used to exchange data with the server. To send the request to the server, we use the open () and send () methods of the XMLHttpRequest object:

Xmlhttp.open ("GET", "Ajax_info.txt", true);
Xmlhttp.send ();

Open (method,url,async): method--requested type Get or post;url--file address on server, requested address; Async--true (async) , False (synchronous).

Send (String): only for post requests.

GET or POST? Difference

GET is simpler and faster than POST, and can be used in most cases.

However, use the POST request in the following cases:

• Unable to use cache file (update file or database on server)
• Send a large amount of data to the server (POST has no data volume limit)
• Post is more stable and more reliable than GET when sending user input with unknown characters

GET Request

Generally used for information acquisition, using the URL to pass parameters, the amount of information sent is also limited, generally in 2000 characters.

A simple GET request:

XMLHTTP. Open("GET","/try/ajax/demo_get.php",true);

xmlhttp. Send();

POST Request

Generally used to modify the number of resources on the server to the amount of information sent unrestricted, secure.

A simple POST request:

xmlhttp. Open ( "post" Span class= "Hl-code" >, "/try/ajax/demo_post.php ",true)

XMLHTTP. Send();

If you need to POST data like an HTML form, use setRequestHeader () to add an HTTP header. Then specify the data you want to send in the Send () method:

xmlhttp. Open ( "post" Span class= "Hl-code" >, "/try/ajax/demo_post2.php ",true)

< Span class= "hl-brackets" > xmlhttp.setrequestheader (content-type "," Span class= "hl-string" >application/x-www-form-urlencoded ") Span class= "Hl-code" >;

xmlhttp. Send("fname=henry&lname=ford"); 　

2.AJAX-ServerResponse

To obtain a response from the server, use the ResponseText or Responsexml property of the XMLHttpRequest object.

ResponseText: Getting response data in string form

Responsexml: Obtaining response data in XML form

Status and StatusText: Returns the HTTP status code in numeric and textual form

Getallresponseheader (): Gets the header of all responses

getResponseHeader (PRE): Query the value of a field in a response

3. A complete HTTP request

Altogether seven steps:

1. Establishing a TCP connection

2.web Browser sends request to Web server

3.web Browser sends request header information

4.web Server Answer

5.web server sends answer header information

6.web server sends data to browser

The 7.web server shuts down the TCP connection.

An HTTP consists of four parts:

1.http the method or action of a request; Get/post

2.URL

3. Request header, including some client environment information, authentication information

4. Request body: That is, the request body, the request body can contain the client's submitted query string information, form information, and so on.

an HTTP response;

1. A status code consisting of a number or text to indicate whether the request succeeded or failed.

2. Response header, including server type, date time, content type and length, etc.

3. Response body: That is, the response body.

4.AJAX-onreadystatechange Events

When a request is sent to the server, we need to perform some response-based tasks. The onreadystatechange event is triggered whenever the readyState changes. The ReadyState attribute holds state information for XMLHttpRequest. The following are three important properties of the XMLHttpRequest object:

Properties	Description
onReadyStateChange	The function (or function name) is called whenever the ReadyState property is changed.
ReadyState	The state of being xmlhttprequest. Vary from 0 to 4. 0: Request uninitialized (not yet called Open ()) 1: The server connection has been established (send () has not been called yet). 2: The request has been received (typically, the content header can now be fetched from the response). 3: Some of the data in the response in the request processing is usually available, but the server has not finished generating the response. 4: The request is complete and the response is ready you can get and use the server's response.
Status	$: "OK" 404: Page Not Found

Finally, all status codes are attached:

100--customer must continue to make a request

101--client requires server to convert HTTP protocol version on request

200--Trading Success

201--prompt to know the URL of the new file

202--accepted and processed, but processing not completed

203--return information is indeterminate or incomplete

204--request received, but return information is empty

205--the server has completed the request, the user agent must reset the files that are currently viewed

206--server has completed a partial user's GET request

300--requested resources can be obtained in multiple places

301--Delete request data

302--found the request data at a different address

303--advising customers to access other URLs or access methods

304--client has performed a get, but the file has not changed

The resource requested by 305--must be obtained from the address specified by the server

306--code used in previous versions of HTTP, no longer used in the current version

307--declaring the requested resource temporary deletion

400--error requests, such as syntax errors

401--Request Authorization failed

402--reserved valid Chargeto header response

403--Request not allowed

404--no files, queries, or URLs found

405--the method defined by the user in the Request-line field does not allow

406--request resource is inaccessible based on accept drag sent by user

407--similar to 401, the user must first be authorized on the proxy server

408--client does not complete the request within the user-specified time of starvation

409--the current resource state, the request cannot be completed

This resource is no longer available on the 410--server and has no further reference address

411--server rejects user-defined Content-length property requests

412--one or more request header fields are incorrect in the current request

413--the requested resource is greater than the size allowed by the server

414--The requested resource URL is longer than the length allowed by the server

415--requesting a resource does not support requesting an item format

The 416--request contains a range request header field that does not have a range indication value within the current request resource scope, and the request does not contain a If-range request header field

The 417--server does not meet the expectations specified by the request Expect header field, and if it is a proxy server, the next level of server may not satisfy the request

Close Up

500--Server generates internal error

501--server does not support the requested function

502--server is temporarily unavailable, sometimes to prevent system overloads

503--server overload or pause repair

504--Gateway overload, Server uses another gateway or service to respond to users, waiting time setting value is longer

505--server does not support or deny the HTTP version specified in the request header

1XX: Information response class, which indicates receipt of request and continues processing

2XX: Handle the successful response class, indicating that the action was successfully received, understood, and accepted

3XX: Redirect Response class, must accept further processing in order to complete the specified action

4XX: Client error, client request contains syntax error or is not executed correctly

5XX: Server error, servers do not correctly execute a correct request

xmlhttp.readystate==4 && xmlhttp.status==200 Explanation: Request complete and return successfully

Ajax Learning Notes