AJAX full name:
Asynchronous JavaScript and XML (Asynchronous JavaScript and XML),
Partial refresh technology:
To solve the problem of the low efficiency the page refresh all
Ajax core object:
XmlHttpReaquest
The principle of Ajax:
By a small amount of data exchange with the server in the background, AJAX can make web asynchronous update, this means you can under the condition of without reloading the whole page, the page updates, some part of the
Ajax asynchronous communication with the server, the local refresh the page, this is the key of the Ajax technology,

Ajax received data type is:
String
XML object
1: what is the Ajax

When, at the beginning of the world wide web page contains only static content, to transfer data between the client and the server is through the form form, in a web application, the client through a form submit their input, the server-side program to accept the client to submit the form, content according to the data form for processing, then process the results returned to the user, this completes a simple interaction,
But this kind of transmission way has a big flaw, is every time the user interaction with the server may need to refresh the entire page, in the poor network speed s, however, to refresh the page cost is very high, usually cause when loading the page variable blank screen
In 1999, Microsoft's Internet Explorer 5 XMLHttp ActiveX control is achieved, it was initially developed for outlook Web client, allowed to use JavaScript asynchronously send data in the background, then other browsers also realized the technology, but it is still a relatively unknown function, rarely used
Ajax this term by Jesse James Garrentt in 2005 "in an Ajax: a new method for Web application" created by the article, he mentioned Google in the latest technology used in the Web application, Ajax is a introduction letter abbreviation, is in the process of using the technology involved in different parts of the whole: Asynchronous JavaScript and XML,
Asynchronous:
The meaning of translation is asynchronous, when to send data request, the program don't have to stop to wait for a response, it can continue to run, when waiting for a response received trigger events, managing this process by using callbacks, program can run in effective way, to avoid the data back and forth transmission delay,
JavaScript:
We can accept use JavaScript from the data returned by the server, and the data real-time update to the page,
XML:
Initially created the term Ajax, often use XML document to return data, but in fact many different types of data can be sent, so far, the most commonly used in Ajax is JSON, it is more light than the XML and easier to parse JSON has supported by JavaScript native advantages, so we can handle JavaScript object, rather than having to use DOM methods to parse the XML file
Advantages:

No refresh the page, in the page to communicate with the server, reduce the waiting time for users, enhance the user experience,
Communicate with the server using asynchronous way, fast response speed
Can turn some server work to the client, using idle client's ability to deal with, reduce the burden of the server and broadband, save space and bandwidth occupancy costs,
Based on the standardized and widespread support technology, do not need to download the plugin or small programs,
Disadvantages

Unable to operate the retreat,
Support for search engines is weak in
May affect the exception handling mechanism in the program
Security issues, the attack on some sites such as CSRF, XXS, such as SQL injection can't very good defense,
Principle 2: Ajax

Use native Ajax is roughly includes the following steps:

1: create the XMLHttpRequest object object (core) by compatibility problems under IE6
2: a HTTP request
3: the receiving server data
4:
update web dataIn summary, is the Ajax HTTP requests through the native of the XMLHttpRequest object, get the server after the data returned, again for processing,

/* *
The realization of the original ecological Ajax code
The first send an Ajax request object instantiated
* */

Var httpRequest.
If (document. All) {
The httpRequest=new ActiveXObject (" Microsoft. XMLHTTP ");
} else {
The httpRequest=new XMLHttpRequest ();
}
/* *
The second step using xmlHttpRequest regulation of the type of request
Call again httpRequest. The send () method sends the request
* */
HttpRequest. Open (" request way ", "the servlet request", true)
/* *
Parameter description:
Method: send a request, the values have the GET and POST (case-insensitive, suggest use uppercase)
The location of the request url: resource path
Async: whether control asynchronous request is processed, have true value (asynchronous) and false (synchronous), the default is true
* */
//get the data returned by the server
The httpRequest. Onreadtsyayechange=function () {
//represents success response
If (httpRequest. ReadatState==4 & amp; & HttpRequest. Status==200) {
//get the server returns data
Var MSG=httpRequest. The responseText;
//the server returns a json format string is converted to a json object with convenient take data
Var student=window. Eval (" (+ MSG +) ");
$(" # show "). The HTML (" id: "+ student. Id +" name: "+ student. Name);
}
}
$(function () {
$. Ajax ({
Method: "post", & lt; ! - automatically submit the way & gt;
Url: "test", & lt; ! - the url address & gt;
DataType: "json", & lt; ! - the server returns a json format string into a json object - & gt;
Data: {" username ": $(" # username"). Val ()},
{" PWD ": $(" # PWD"). Val ()})} & lt; ! - the data is passed to the backend - & gt;

Success: the function (data) {
$(" # show "). The HTML (" id: "+ data. Id +" name: "+ data. Name);
}
/* *
Jquery's three shorthand
1: shorthand
2: uri address
3: the callback function: when the data returned from the server, and back to invoke this function
The parameters in the callback function is returned by the server data
4: return data type text json json
With the method of key/value pair parameter back to server
* */
$.get (" test ",
{" username ": $(" # username"). Val ()},
{" PWD ": $(" # PWD"). Val ()})
})
})
Ajax: the same-origin policy

To deal with the domain name + + with port

The json

Full name: JSON with padding filling type JSON or parameter type (JSON abbreviated)
In order to solve the problem of Ajax cross-domain
Cross domain: to other server requests content

//use jQuery send json cross-domain values
$. Ajxa ({
Type: "post",
Url: "http://127.0.0.1:8080/web_two/two",
DataType: "json",
})
Json

Full name:
JavaScript Object said hair (JavaScript Object Notation)
JSON is stored and the exchange of text information syntax similar XML
JSON than XML smaller, faster, easier to parse

Simple to understand:
A data exchange format
Json syntax:
{} with the method of key-value pairs stored with multiple attributes with commas
The object directly into a json format string tool
Jackson, gson, fastJson convert the object to a json format string
Gson Google put the object into a json format string a tool
Json object
{} braces said an object
Fetch the data object name. Use the property name points operator simple object
The nested object {properties: values, the nested object name: {}}
-->
Var person={id: 1, name: 'little summer, age: 20, dog: {id: 10, name:' rhubarb '}};
Var person={id: 1, name: 'little summer, age: 20,
Dogs: [{id: 10, name: 'the boss'},
{id: 11, name: 'second'},
{id: 12, name: 'one'}};
The Mock. Js

1. The characteristics of

Generate random data to intercept the Ajax request

2. Use the

1. To generate random data

The Mock. Mock (templete)
Data in the template each property consists of three parts: the property name name generation rule rule attribute value value

"The name | rule" : the value
Description:

Attribute names and generate rules are separated with a vertical bar
Generate rules is optional
Const data=({https://bbs.csdn.net/topics/Mock.mock
//randomly generated an object contains four array
'list | 4' : [{
//object id attribute names, in turn, add 1
'id | + 1:1,
//random generation of a Chinese name
"Name" : '@ cname ()',
//randomly generated an address
Addr: '@ county (true)',
//randomly generated a digital size in 18 to 30
'the age 18 to 30' | : 1,
//date of randomly generated a
Birth: '@ the date ()',
nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull