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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.