Background:
Last Friday, the company's front-end engineers trained and mentioned some front-end optimization skills. Of course, the optimization rules of Yahoo yslow cannot be missing. Among them, there is such a "use get for Ajax requests" rule, which has always been concerned from the first 14 to the current 35. But I don't know the reason. In the question section, I asked the front-end engineer if I had any questions about the reasons why I used get instead of post in the Yahoo Web browser Optimization Rule recommendation Ajax. If our engineers say get, the browser sends a package, and the post sends two packets. I still have doubts or even doubts about this explanation. After the training, I searched for it and did not get the desired results. Few people may have doubts about the optimization rules proposed by Yahoo's authoritative organization, few people want to know why they suggest doing so, and more people will stick to the rules. After that, I read the optimization rules again and saw one that recommends developers to use Ajax cache. At this moment, a "great" idea flashed in my head, is it possible for get requests to be cached, but not for post requests? Next, I told my colleagues about my "great" guess that it was time to get off work. Many of my colleagues left the company and I had to pick up my work in a hurry, did not look for the answer carefully.
During the weekend, my head flashed frequently and I still had doubts about my ideas. The idea of Yahoo's front-end team was so awesome, can a cainiao like me guess this easily? My suspicion of my original speculation is as firm as "when I was a child, I suspect that JJ is definitely not just used to peat. However, if I am so lazy, I can't find any time to verify my idea. I 'd rather play a few more CS in my spare time. Until now, the typhoon has arrived. I have been sleeping in my house for two days and cannot find this article.Article.
Verify the Yahoo recommendation reason:
Verify why Yahoo recommends using get instead of post in xhr requests
Post is implemented in the browsers as a two-step process: sending the headers first, then sending data. So it's best to use get
The post request consists of two steps: sending HTTP headers and then sending HTTP data
HTML + JSCode:
01 |
<Body> |
02 |
<SCRIPT src ="Jquery.1.3.2.js"> </SCRIPT> |
03 |
<Form method ="Post" Action =""> |
04 |
<Select name ="Option" Id ="Option"> |
05 |
<Option value ="Post" Name ="Post"> Post </option> |
06 |
<Option value ="Get" Name ="Get"> Get </option> |
07 |
</SELECT> |
08 |
<Input id ="Button"Type ="Button" Value ="Post submission"> |
09 |
</Form> |
10 |
<Script language ="JavaScript"> |
11 |
<! -- |
12 |
$ (# Button'). Click (Function(){ |
13 |
VaR Option = $ ('# Option'). Val (); |
14 |
$. Ajax ({ |
15 |
Type: option, |
16 |
URL:"Cc. php", |
17 |
Data:"Name = cfc4n & option ="+ Option, |
18 |
Success:Function(MSG ){ |
19 |
Alert (MSG ); |
20 |
} |
21 |
}); |
22 |
}); |
23 |
// --> |
24 |
</SCRIPT> |
25 |
</Body> |
Packet capture tool: Wireshark
Tip: When Wireshark (version 1.2.5) captures an HTTP packet, the packet reassembly option is merged by default. Remember to remove all the items. For example, (edit-> preferences)
Wireshark remove packet reassembly Option
I sent a get and a post xhr (XMLHttpRequest) Request respectively, and the data packet is as follows:
Data Packet details sent by get and post in xhr HTTP requests
For example, the data packet sent by the GET request is the result in the first red box; the data packet sent by the POST request is the result in the second red box, but there is an additional 12th packets (in the pink box), from 10.0.0.108 (my PC) to 98.126.129.106 (Www.cnxct.comThe IP address of the server, that is, the IP address of the target server submitted in the form). The information provided by Wireshark is"Continuation or non-http traffic", This prompt means that this packet is sent next to the last HTTP request, with no HTTP header and only HTTP data.
For details, see
Part of the xhr http post request header data:
Part of the xhr http post request header data
Data section of the xhr http post request:
Xhr http post request data section
Conclusion? :
Indeed, as the great Yahoo front-end team said, The xhr http post request will be divided into two steps: first HTTP header and then HTTP data.
However, new questions are raised. Why is it divided into two parts? WHO (such as W3C) stipulates? Is this true for every browser? Is two times more efficient than one time?
Continue:
With this new question, I made the following attempts: I first sent xhr get and xhr POST requests from browsers, IE8, firefox5.0, and chrome13, respectively, to capture packets and compare the results.
I was surprised to find that (the careful students noticed that chrome 13 is the browser with an elliptical box in the third figure ), firefox5 does not send post data packets, as mentioned in the Yahoo front-end optimization rule. They are sent twice, but once HTTP headers and HTTP data are sent. For example:
Firefox5 data packet when sending xhr POST request
As you can seeLine-based text data: Application/X-WWW-from-urlcodedThe following is the post data.
At this moment, there are many questions. What about other browsers? Will all IE versions be sent twice? What about other Firefox versions?
When I tried to compare packets one by one, I was lucky enough to find a PDF of my questions (Analysis_of_browser_specific_characteristics.pdf)
It is mentioned that most Firefox versions are implemented in one package on XP, win7, Ubuntu, Mac OS, and other systems. Other common browsers are divided into two packages.
As you know clearly, when a transaction is completed over HTTP (TCP), the more the number of communications, the more likely it will be to fail (factors such as network latency). The larger the overhead, the browser (client) the server must perform another TCP communication, and it takes some time. For our pursuit of a higher user experience, we need to avoid these shortcomings in HTTP Communication. Why are browser developers still doing this? Is Firefox the best practice?
The PDF above simulates various network environments, such as network latency and network packet loss, to compare the advantages and disadvantages of one packet and two packets for post requests. The conclusion is that when the network environment is good, the time difference between one packet and two packets can basically be ignored. In the case of poor network environment, the (two packets) TCP verification data packet integrity has a very large advantage, the client first tells the server the size of the packet to be sent, MD5 and other identifiers. When the server tells the client to receive (ACK packet), the client sends the post data to the server again. If the network environment is poor, when network latency or packet loss occurs, the server waits (when latency occurs) and the client resends the post data to the service order to ensure the integrity of the request.
The author of this PDF described in detail the cause and result of this blog, as well as some communication processes with the Yahoo yslow front-end team, you can read it here (Yahoo's front-end team seems unfriendly, haha ).
Conclusion:
By referring to this PDF file and my own packet capture test, I learned about this recommendation from the Yahoo yslow front-end Team (they didn't elaborate on this recommendation, a GET request generates a TCP packet. a POST request generates two TCP packets. I didn't even tell us that most Firefox versions [maybe all versions] Send a TCP packet. More detailed, deeper reasons did not say, here also have to thank the author of the http://loadimpact.com ).
Note:
Here we provide the packet during the packet capture test (Some of my cookies are contained in the data package and are not uploaded. This is my new one. Sorry.), You can refer to it. If my text or direction is incorrect, please point it out.
IE8, ff5, and chrome13 initiate xhr request data packets
When you read this article, I admit that I lied to you, the content of the article is not only written in the title, why is it recommended to use post instead of get, it is more about the process of capturing TCP and HTTP Communication packets to verify whether each browser divides two packets as described in yslow, and the advantages and disadvantages of two packages and one package (in PDF ). I hope you will forget the title at the end.
from: http://www.cnxct.com/use-get-for-ajax-requests-why/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
