Learn the Web from scratch Ajax (v) Synchronous asynchronous request, data format

Hello everyone, here is "learn the Web series from scratch" and synchronize updates at the following address ...

• Github:https://github.com/daotin/web
• Public number: The top of the Web front
• Blog Park: http://www.cnblogs.com/lvonve/
• csdn:https://blog.csdn.net/lvonve/

Here I will start with the Web front End 0 Foundation, step-up learning web-related knowledge points, during the period will also share some fun projects. Now let's go to the Web Front end learning Adventure tour!

One, synchronous request and asynchronous request

Synchronization Request: After the user sends the request, the browser waits for the server's data to return, if the network latency is high, the browser is stuck in the current interface until the server returns data for other operations.

Asynchronous Request: After the user sends the request, the browser can freely manipulate the other elements of the page, and when the server puts back the data, it triggers the corresponding event and operates on the returned data.

If you change the Ajax request to a synchronous request:

1, the interface will be Kaka, the lag event depends on the network speed;

2, Xhr.onreadystatechange callback function will not be executed, because after Xhr.send (), the xhr.readystate is 4, so the data processing, directly following the Xhr.send () can be.

1. The underlying principle of asynchrony

The asynchronous implementation principle in JS is a single thread + event queue. JS code execution is single-threaded, single-threaded means that the code is executed sequentially from top to bottom, and the event queue stores some callback functions, when JS is executed from the top down, the callback function is placed in the event queue, after all JS code execution is idle state, Will go to the event queue to see if there is a callback function to reach the trigger condition, some words on the execution, no words will continue to idle.

In the four-step operation of Ajax, the difference between synchronous and asynchronous:

If it is an asynchronous request, at the time of send, the browser will call the network data request, send execution is finished, then the fourth step callback function is stored in the event queue, the browser data request is finished, the readyState state changes, triggering the fourth step callback function execution.

In the synchronous request, the send is the request of the network data, this time must request to the data, will then be the fourth step callback function stored in the event queue, so if the network delay page will be stuck, after the send received data when the ReadyState has been 4, No more changes, so the callback function for the fourth step will not be executed.

Second, the data format

What is a data format?

Data format is organized by a certain specification, called data format.

1. XML Data format

The XML data format is to assemble the data in the form of a label, which must begin with a <? xml version="1.0" encoding="utf-8" ?> label that must appear in pairs, i.e. there must be an end tag for the start tag.

<? xml version="1.0" encoding="utf-8" ?><students>    <student>      <name>张三</name>      <age>18</age>      <sex>男</sex>  </student></students>

Disadvantage: Too large, metadata (descriptive data) too much, parsing inconvenient, the current use very little.

2. JSON data format

The JSON data format is assembled by means of key-value.

{  "student" : [    {      "name": "张三",      "age": "18",      "sex": "男"    },    {      "name": "李四",      "age": "23",      "sex": "女"    }  ]}

Advantages: Small volume, fast transmission, easy to parse.

3, Case: access to book information

Interface Documentation:

TR class= "odd" > TR class= "odd" >

address	/server/getbooks/php
function Description	get book information
request type	GET request
parameters	None
return data format	XML format
return Data description	as follows

<?xml version="1.0" encoding="utf-8" ?><booklist>    <book>        <name>三国演义</name>        <author>罗贯中</author>        <desc>一个杀伐纷争的年代</desc>    </book>        <book>        <name>水浒传</name>        <author>施耐庵</author>        <desc>108条好汉的故事</desc>    </book>        <book>        <name>西游记</name>        <author>吴承恩</author>        <desc>佛教与道教斗争</desc>    </book>        <book>        <name>红楼梦</name>        <author>曹雪芹</author>        <desc>一个封建王朝的缩影</desc>    </book></booklist>

Source:

<! DOCTYPE html>

The format of XML data is mainly obtained by: getElementsByTagName.

4, Case: access to student information

Interface Documentation:

Address	/server/getstudents/php
Function description	Get Student Information
Request type	GET request
Parameters	No
Return Data format	JSON format
Return Data Description	As follows

[  {    "name":"张三",    "age":"18",    "sex":"男"  }]

Source:

<! DOCTYPE html>

You only need to convert the acquired responsetext to a JSON-formatted object, using theJSON.parse(this.responseText);

Learn the Web from scratch Ajax (v) Synchronous asynchronous request, data format