What exactly is Ajax? Introduction to Ajax Background and usage (with example parsing)

This article mainly introduces the details of Ajax, the specific meaning of Ajax, and only to use the description of Ajax, now look at this article together

First we look at what is Ajax?

Often hear Ajax's name, so, what is Ajax?

1: Background Introduction

First of all, speak with me, eh bond, don't read it into Ajax Oh ~.

AJAX = Asynchronous JavaScript and XML (asynchronous JavaScript and XML).

AJAX is not a new programming language, but a new method of using existing standards.

The biggest advantage of AJAX is that without reloading the entire page, you can exchange data with the server and update some of the Web content.

AJAX does not require any browser plugins, but requires the user to allow JavaScript to be executed on the browser.

2. Knowledge Analysis:

Ajax is to use JS to initiate a request, and get the content returned by the server. The biggest difference between this and previous technology is that the page is not refreshed, which improves the user experience, and that's it.

So how do we send an ajax request?

1. create an object XMLHttpRequest

var xhr = new XMLHttpRequest (); To support IE6 and earlier versions, Var xhr=new activexobject ()

2. Status changes after a successful listening request

3. Set Request parameters

4. Initiating the request

5. manipulating The DOM for dynamic local refresh

and what is a complete What about HTTP requests?

A complete request consists of four parts

Next, we're going to listen to the change in status of the request success.

onReadyStateChange: Used to monitor changes in readystate.

ReadyState: Indicates the status of the background of the current request

Status: Indicates the result of the processing

Where readystate: Indicates the status of the background of the current request

0: Request uninitialized (not yet called Open ())

1: The request has been established but has not yet been sent (send () not yet called)

2: The request has been sent and is being processed

3: The request is being processed, and some of the data in the response is usually available

4: The response has been completed and the response from the server can be obtained and used

Status: Indicates the result of the processing (state code)

1XX, indicating the receipt of the request is in process

Status = = 200 indicates that the result of processing is OK

Status Code : 200 to 300 refers to the normal return of the service side

304: If the page has not changed since the last request from the requestor, configure the server to return this response, thereby saving bandwidth and overhead

404: Object Not found (404 Not Found)

503: Server timed out

Set Request parameters

XHR Object accepts three parameters
1: Indicates the request type
2: The URL that represents the request
3: Indicates whether asynchronous

Get/post/put/delete

The difference between the Get and post methods:

Get is get data, get the Send method parameters can be null or empty, to send information is limited, generally in 2000 characters, generally used to query (idempotent)
Post can send data, but when using the Post method to send data, you need to use setRequestHeader () to add the HTTP header, while the Post's send () method needs to write the value of the data to be sent, generally used to modify the resources on the server, the number of unlimited information, Also more secure (want to see more on the Topic.alibabacloud.comAJAX Development Manual section of the study)

3 FAQs

use Post to submit a problem that requires forgetting Content-type

4. Solution

Xhr.open ("Post", "/carrots-admin-ajax/a/login", true); Xhr.setrequestheader ("Content-type", "application/ X-www-form-urlencoded "); Xhr.send (" name= "+ name +" &pwd= "+ code);

Content-type to be placed between open and Send as the request header

5. Code Combat

var xhr = new XMLHttpRequest (); function IP () {var name = $ ("#name"). Val ();    var code = $ ("#code"). Val ();//Specifies the callback function Xhr.open ("POST", "/carrots-admin-ajax/a/login", true) when the state changes during the communication process;    Xhr.setrequestheader ("Content-type", "application/x-www-form-urlencoded");    Xhr.send ("name=" + name + "&pwd=" + code); Xhr.onreadystatechange = function () {if (xhr.readystate = = 4) {if (Xhr.status >= && x Hr.status < 300) | | Xhr.status = = 304) {if (Json.parse (xhr.responsetext). Code >= 0) {window.location.hr                EF = "http://dev.admin.carrots.ptteng.com/";                } else {$ (". Alert"). HTML ("The user does not exist or the password is incorrect"); }            }        }    };}        $ (function () {$ ("#summit"). Click (function () {var name = $ ("#name"). Val ();        var code = $ ("#pwd"). Val (); $.ajax ({type: "POST", url: "/carrots-admin-ajax/a/login", data: {"nAme ": Name," pwd ": Code},//Beforesend:function (XHR) {Xhr.setrequestheader (" Content                -type "," application/x-www-form-urlencoded "), DataType:" JSON ", success:function (data) {                Console.log (data);                if (Json.parse (data). code==0) {alert (Json.parse (data). message); } else {alert (json.parse (data). Message)}})}) ;

6 Extended Thinking

What are the pros and cons of Ajax?

Reference documents

Jqury Ajax Methods

Beginner's Tutorial

More discussions

1. What is the request body?

The request body encodes the value of a component in a page form into a formatted string, which hosts data for multiple request parameters, through the Param1=value1¶m2=value2 key-value pair form. Not only the style can pass the request parameters, the request URL can also be passed similar to "/chapter15/user.html?" Param1=value1¶m2=value2 "method to pass the request parameter.

2.xhr.setrequestheader ("Content-type", "application/x-www-form-urlencoded");

What does application/x-www-form-urlencoded mean?

The Enctype property of a form is encoded in two common ways: application/x-www-form-urlencoded and Multipart/form-data, which are application/by default. X-www-form-urlencoded.

x-www-form-urlencoded

when action is get, the browser uses x-www-form-urlencoded encoding to convert the form data into a string (Name1=value1&name2=value2 ... ), and then append the string to the URL, using the. Split, to load the new URL.

3.jQuery How do I set the accepted data types?

Use datatype: "JSON" to write the type of data you want to accept

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.