HTTP protocol, AJAX request

Today's article, mainly about the HTTP protocol, AJAX requests and some related small knowledge points. Although the content is not too much, but is a very important thing ~

HTTP protocol

1. http: Hypertext Transfer Protocol. Simple, fast, flexible, stateless, no connection.
2. URL: Uniform Resource Locator.
Component: Protocol name://hostname (host IP): Port number/project resource address? Key-value pair # Anchor point for passing parameters
Eg:http://192.168.5.151:8080/js/index.php?name=zhangsan#top
The ①IP address is unique on the same network segment. If it is in the public network, the entire public network I is unique.
② Port number default is: 80, you can omit to write. Common port numbers: Apache 8080 tomcat
③ native Ip:localhost or 127.0.0.1

"JSON object and JSON string"

1. JSON object: JSON object is a collection of key-value pairs, between the key and the value by: delimited, many pairs of key value pairs, separated.
Note: The JSON object requires that the key must use the "" wrapped string. "Invalid!!!"
2. JSON string: Wraps the JSON object in the form of a string. Double quotes can also be used in single quotation marks;
If the "" package is used, the double quotation marks of the wrapped key are transferred with the \ Escape character.

 var  jsonobj= ' {"name": "Zhangsan", Age:12, Sex: "Male"} '; //  error, cannot be wrapped up in double quotation marks  var  jsonobj= "{' name ': ' Zhangsan ', ' age ': ' n ', ' sex ': ' Male '} '; //  error, key must be wrapped in double quotation marks  var  jsonobj= "{' name ': ' Zhangsan ', Age:12,sex:" Male "}"; //  error, cannot enclose double quotation marks in single quotation marks   

3. JSON objects are converted to JSON strings:
Span style= "font-family:"microsoft yahei"; font-size:15px ">   ① object to string: Json.stringify (obj)
   ② string to object: Json.parse (jsonobj)
    jquery also provides methods for string-to-object: $.parsejson (jsonobj)

 console.log ($.parsejson (jsonobj)); // json object to String  var  jsonobj= ' {"name": "Zhangsan", "age": A, "sex": "Male"} ' 

4. JSON array: Multiple JSON objects are stored as arrays, called JSON arrays.
JSON arrays can be nested with JSON objects, meaning that the value of a JSON object can be a JSON array.

//arrays can be received directly, with multiple objects inside the arrayvarJsonarr=[    {     "Name": "Zhangsan",     "Hobby": [{"Eat": "Fruit", "play": "Game"}]    },    {     "Name": "Zhangsan",     "Hobby": [{"Eat": "Fruit", "play": "Game"}]    },    {     "Name": "Zhangsan",     "Hobby": [{"Eat": "Fruit", "play": "Game"}]    }];varStrarr=json.stringify (Jsonarr);//JSON object goto arrayConsole.log (Strarr);varJsonarr1=json.parse (Strarr);//JSON array to objectConsole.log (JSONARR1)

How to request data in the background

1. $.load (): Select a DOM node in the current interface. and loads an HTML snippet in the current DOM node;

Accepted Parameters:
① can be the address of an HTML file, which means that the entire HTML file is loaded into the current region;
$ ("#div1"). Load ("test.html");
② can be an HTML file + various selectors, which means that the specified area of the page is selected for loading.
$ ("#div1"). Load ("test.html #ul");

2. $.ajax (): is the lowest-level Ajax function in jquery.

The parameter receives a large object, using the object's key-value pairs to represent the relevant settings for the AJAX request:

①type: A method that represents an AJAX request, which can be a get and post

②url: Represents the requested background URL address.

③success: The callback function that represents the successful request. The callback function will accept three parameters, where the first parameter is the data that the request was successfully returned. The latter two do not matter.

When working with data, be aware that the data returned is a JSON string or a JSON object.

④error: The callback function to execute when the request fails.

⑤complete: After the request is complete, the callback function executes regardless of success or failure.

⑥statuscode: Receives an object where the key of the object is a variety of status state codes, and the value of the object represents the callback function corresponding to each status code.

⑦async: Set to True to indicate an asynchronous request (default), or set to False to indicate a synchronization request.

⑧data: When requested, the data requested in the background is an object type that represents Name:value in the form of a key-value pair. VERY popular!!!!!

⑨datatype: The format of the data type to return. Common with json/text/html

⑩timeout: Sets the request time-out period.

$.ajax ({type:"Get", URL:"Java1801.json?age=14",//Back to the table (small data), you can also add the following? age=14Asynctrue,//whether to make an asynchronous request, not write the default is asynchronousdata:{//Back to the table, in the form of objects. The data that is sent to the server is automatically converted to the request string format. "Name": "Zhangsan"}, DataType:"Text", timeout:1,//sets the request time-out period. The default is OK, do not writeSuccessfunction(DATA,TEXTSTATUS,JQXHR) {//callback function that requested a successful returnConsole.log (data);//returns an objectConsole.log (Textstatus);//request successfully returned successConsole.log (JQXHR);//JQXHR ObjectConsole.log (Jqxhr.responsetext)//return StringConsole.log (Jqxhr.responsejson)//return Object}, Error:function(Xmlhttprequest,textstatus,errorthrown) {//callback function returned by request failureConsole.log (XMLHttpRequest);//XMLHttpRequest ObjectConsole.log (Textstatus);//Err Message: Error, timeoutConsole.log (Errorthrown);//caught exception object: not Found}, Complete:function(Xhr,ts) {//returns success or error, whether the request is unsuccessful or not, executesConsole.log (XHR);    Console.log (TS); }, statuscode:{//Status code for request success or failure200:function() {Console.log ("The request was successful! ")        },        404:function() {Console.log ("Page Not Found")        }}

"Detect all Ajax states in the page"

Executes the callback function. Can do to understand ...

$ (document). Ajaxstart (function(){//execute function at start of Ajax requestConsole.log (Ajaxstart);}); $ (document). Ajaxerror (function(){//execute function when an AJAX request error occursConsole.log (Ajaxerror);}); $ (document). Ajaxsend (function(){//execute function Before Ajax request is sentConsole.log (ajaxsend);}); $ (document). Ajaxstop (function(){//execute function at end of Ajax requestConsole.log (ajaxstop);}); $ (document). Ajaxsuccess (function(){//execute function When Ajax request succeedsConsole.log (ajaxsuccess);});

3. $.get (): On the basis of $.ajax (), encapsulation, using the GET request by default.

Accepts four parameters:
The background URL of the ① request;
② the data that is passed to the background, the object type. Equivalent to the data attribute in Ajax;
③ Request successful callback function, equivalent to the success in Ajax;
④ The data type expected to be returned, equivalent to the datatype in Ajax;

4. $.post (): Using the same method as $.get ()

5. $.getjson (): Request JSON data by get method.

$.get ("Java.json",function(data) {     console.log (data);},"text"); $.post ("Java.json ",function(data) {    console.log (data);}," JSON ");            $.getjson ("Java.json",function(data) {    console.log (data);});

"AJAX requests three major processes"

Synchronization: The page code is blocked when it encounters the JS code, waiting for the JS code request to complete after the execution continues.

Async: The page code will not be blocked when it encounters the JS code, waiting for the JS code request to be inserted immediately after the execution.

<script src= "js/jquery-1.10.2.js" async= "async" ></script>//Async

Delay: The page code will not be blocked when it encounters the JS code, wait until the JS code request is completed, and then wait until the page code loading is complete before execution.

<script src= "Js/jquery-1.10.2.js" defer= "defer" ></script>//Delay

Common Status Codes

200-Successful request

202-Server accepts requests

400-code Error

403-Access Denied

404-Page Not Found

500-Server Error

501-server does not support the requested feature

505-Server does not support

below I enclose the HTTP status code detailed link, inside has the clearer explanation, everybody may view by oneself:http://tool.oschina.net/commons?type=5

HTTP protocol, AJAX request