---Restore content begins---
1. Ajax overview
1. what is synchronous and what is asynchronous
Synchronization phenomenon: the client sends a request to the server, and the client is in a state of waiting and stuck before the server returns a response
Asynchronous phenomenon: the client sends a request to the server, no matter whether the server returns a response or not, the client can do other things at will, and will not be stuck
2. How Ajax works
When the page initiates a request, the request will be sent to the Ajax engine in the browser kernel, and the Ajax engine will submit the request to the server. During this period, the client can perform any operation at will until the server returns the data to the Ajax engine. , it will trigger the event you set, so as to execute the custom js logic code to complete a certain page 1 function.
Second, js native Ajax technology (understand)
js native Ajax is actually based on the built-in Ajax engine object in the browser. To use js native Ajax to complete asynchronous operations, there are the following steps:
1) Create an Ajax engine object
2) Bind the listener to the Ajax engine object (the listener server has responded to the engine with data)
3) Bind the submission address
4) Send the request
5) Accept response data
Note: if it is a post submission
Set a header before sending the request
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
Summarize:
All asynchronous access is ajax engine
3. Json data format (important)
JSON is a language-independent data exchange format that:
Front-end and back-end data exchange using ajax
Data exchange between mobile and server
1. Format and parsing of Json
json has two formats:
1) Object format: {"key1":obj,"key2":obj,"key3":obj...}
2) Array/collection format: [obj,obj,obj...]
For example: user object is represented in json data format
{"username":"zhangsan","age":28,"password":"123","addr":"北京"}
List<Product> is represented in json data format
[{"pid":"10","pname":"小米4C"},{},{}]
Note: Object format and array format can be nested within each other
Note: the key of json is a string and the value of json is Object
Parsing of json:
JSON is the native content of js, which means that js can directly retrieve the data in the json object
2. Json conversion plugin
Convert java object or collection to json form string
The json conversion plug-in directly converts java objects or collections into json strings through some tools in java.
Commonly used json conversion tools are as follows:
1） jsonlib
2） Gson ： google
3) fastjson: Alibaba
Fourth, Jquery's Ajax technology (focus)
jQuery is an excellent js framework, which naturally encapsulates js native ajax. The encapsulated ajax operation method is simpler and more powerful. The jquery methods related to ajax operation are as follows, but the ones that are often used in development There are three
1）$.get(url, [data], [callback], [type])
2）$.post(url, [data], [callback], [type])
in:
url: represents the server-side address of the request
data: represents the data on the server side of the request (can be in the form of key=value or in json format)
callback: Indicates the function triggered by the successful response of the server side (only executed after a normal and successful return)
type: Indicates the data type returned by the server (jquery will automatically convert the type according to the specified type)
Commonly used return types: text, json, html, etc.
3) $.ajax( { option1:value1,option2:value2... } ); ---- I will master it later
Common options are as follows:
async: Whether it is asynchronous or not, the default is true for asynchronous
data: parameter sent to the server, it is recommended to use json format
dataType: The data type returned by the server, commonly used text and json
success: the function executed in response to a successful response, the corresponding type is the function type
type: request method, POST/GET
url: request server-side address