What is Ajax in JavaScript?

A. Explanation :

--------------------------------------------------------------------------------------------------------------- -----------------------------------------------

Ajax is a technique for acquiring resources (data) over HTTP requests.

HTTP is a memory-free request that does not retain the requested memory after the request has ended.

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.

second, the AJAX request the approximate process :

--------------------------------------------------------------------------------------------------------------- -----------------------------------------------

Send AJAX Request----> Server response----> Return response "Data", "Server Request response Code"

1. The "method" of Ajax sending requests is commonly used in two ways:

Get mode, Post mode (also: HEAD, PUT, DELETE, OPTIONS ...)

2. "Server sound" should return response "data" type usually has the following kinds:

ResponseText string, XML, HTML, JSON, JS, Jsonp

3. The "server Response" return response HTTP code is common in the following ways:

200,401,404,501,503 .....

third, the Ajax cross-domain in JS :

3.1 js because of the "security" of resources using "homologous strategy":

The same server, domain name, port, Ajax can only access the same server, domain name, port resources (data);

3.2 HTML has the following tag to enable cross-domain:

IMG, link, iframe, script, href ...

Note: Plainly, to implement cross-domain is where my server can access resources (data) on someone else's server.

It is important to note that, if someone else's server writes security-related code, it may prohibit cross-domain.

Also said, Xiao Ming want to get small white home things, to go through small white consent.

Of course, the back door can also be without the small white consent, this is a security issue we do not make a statement.

--------------------------------------------------------------------------------------------------------------- -----------------------------------------------

Iv. The Ajax code in native JS :

--------------------------------------------------------------------------------------------------------------- -----------------------------------------------

3.1 request data through Ajax in non-cross-domain situations

| Get Method |

-------------

var ajaxobj = null; Creating an Ajax Object

if (window. XMLHttpRequest) {//ajax Object Browser compatible

Ajaxobj = new XMLHttpRequest ();

} else{

Ajaxobj = new ActiveXObject ("Microsoft.XMLHTTP");

}

Ajaxobj.open ('get ', ' Http://www.***.com/data.json ', true);

Get method, request URL data address, true for asynchronous request (default true,false is synchronous request)

Ajaxobj.send (NULL)//data to send

Ajaxobj.onreadystatechange = function () {

if (ajaxobj.readystate ==4 && ajaxobj.status = = 200) {

Console.log (Ajaxobj.responsetext);

Stitching HTML strings, inserting data into the HTML string, manipulating the DOM to display in the page

}

}

Note: The Get method sends data via URL, stitching string

Http://www.***.com/data.json?name = zhangsan&age=23

| Post Method |

-------------

var ajaxobj = null; Creating an Ajax Object

if (window. XMLHttpRequest) {//ajax Object Browser compatible

Ajaxobj = new XMLHttpRequest ();

} else{

Ajaxobj = new ActiveXObject ("Microsoft.XMLHTTP");

}

Ajaxobj.open ('post ', ' Http://www.***.com/data.json ', true);

Get method, request URL data address, true for asynchronous request (default true,false is synchronous request)

Ajaxobj.send (write the data to be sent here)//data to be sent

Ajaxobj.onreadystatechange = function () {

if (ajaxobj.readystate ==4 && ajaxobj.status = = 200) {

Console.log (Ajaxobj.responsetext)

Stitching HTML strings, inserting data into the HTML string, manipulating the DOM to display in the page

}

}

Note: The Post method sends data over an HTTP header for delivery

Ajaxobj.send (SendData)

var senddata = {

Name: ' Zhangsan ',

Age:23

}

3.2 Request data through Ajax in a cross-domain scenario

3.2.1 Common Script Tags cross-domain Jsonp

<script>

function callback (backdata) {

It is important to note that the background is required to return data: It is in this form callback (' Write the returned data here '), otherwise it will go wrong

Console.log (Backdata)

This is the returned data, the corresponding method of JS to the returned data processing

If a string is returned, it can be processed into an object using the eval (' (' + backdata+ ') '), Json.parse (Backdata) method

Stitching HTML strings, inserting data into the HTML string, manipulating the DOM to display in the page

}

</script>

<script src= "Write here to cross-domain URL address" ></script>

This writes the URL address of the cross-domain "require background return data: Is this form callback (' Write the returned data here '), otherwise it will be wrong

Note: You can dynamically add <script> tags to the

   

v. Ajax code in jquery :

--------------------------------------------------------------------------------------------------------------- -----------------------------------------------

$.ajax ({

Type: ' Get ',

Async:true,

Cache:true,

Data: {

Name: ' Zhangsan ',

Age:23

} ,

ContentType: "application/x-www-form-urlencoded",//default value//content encoding type when sending information to the server

DataType: ' JSON ',

URL: "",

Success:function (backdata) {

}

})

What is Ajax in JavaScript?