Make Ajax calls take advantage of caching features

Last Update:2016-05-23 Source: Internet

Author: User

Tags browser cache server memory

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Optimize Web site design (14): make Ajax calls as far as possible using the caching features forewordOptimization of website design is a big topic, there are some common principles, and there are some suggestions for different development platforms. This research has never stopped, and I have shared such topics on different occasions.As a general rule, Yahoo's team of engineers has given 35 best practices. For this list, please refer to best practices for speeding up Your Web Site http://developer.yahoo.com/performance/ rules.html, at the same time, they also released a corresponding test tool YSlow http://developer.yahoo.com/yslow/I strongly recommend that all Web developers learn these best practices and apply them in conjunction with their actual project Scenarios. For the next period of time, I will combine the asp. net this development platform, in accordance with these principles, through a series of articles in the form of some explanation and interpretation, to help you better understand these principles, and to better use Them.Preparatory workIn order to follow my follow-up study, you need to prepare the following development environment and tools <ol> <ol> <li>Google Chrome or firefox, and install the YSlow Extension. Please note that this component is provided by yahoo, but there is currently no version for Ie. <ol> <li>Https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh</li> <li>https://addons.mozilla.org/en-US/firefox/addon/yslow/</li> <li>You should be aware of the developer tools of these browsers, you can call this tool by pressing the F12 key.</li> </ol></li> <li>Visaul Studio SP1 or later, we recommend that you use Visual Studio 2012 <ol> <li>Http://www.microsoft.com/visualstudio/eng/downloads</li> </ol></li> <li>You need to have a good understanding of the basic process and core technologies of asp. this series of articles is difficult to popularize the basic knowledge.</li> </ol> </ol>The topic to be discussed in this paperIn this article, I'm talking about the 14th principle: make Ajax cacheable (making Ajax calls take advantage of the caching features as much as possible).The basic concept of Ajax <ol> <ol> <li>AJAX = asynchronous JavaScript and XML (asynchronous JavaScript and xml).</li> <li>AJAX is not a new programming language, but a new method of using existing STANDARDS.</li> <li>AJAX is the art of exchanging data with a server and updating parts of a Web page without reloading the entire page.</li> </ol> </ol>Typical application scenarios for AjaxAjax is widely used in current applications, providing richer results for the site (although the technology is very early, it was first noticed in Gmail in about 2004 years). Typical application scenarios include <ol> <ol> <li>Asynchronous loading, so that the contents of the page can be loaded in Batches.</li> <li>Partial updates, which make local updates to the page do not cause the page to Refresh.</li> </ol> </ol>Since Ajax actually needs to initiate a request, and then the server executes and sends the result (usually in JSON Format) to the browser for final rendering or processing, we also need to consider whether these requests can be used as much as possible to improve performance in terms of site design Optimization."remarks" about ajax, and how it combines with some of the current technologies (primarily Server-side technologies), I've written a lot before, and interested friends can refer to http://www.google.ee/search?q=site% First. 3awww.cnblogs.com%2fchenxizhang%2f%20ajaxWhat kind of Ajax requests can be cached?There are a number of ways to optimize server requests, and I've written several before, and these principles can be applied in Ajax Scenarios. <ol> <ol> <li>Optimize website design (iii): Add cache control to resources</li> <li>Optimize Web site design (iv): enable compression on resources</li> <li>Optimize website Design (ix): Reduce the number of DNS lookups</li> <li>Optimize website design (10): minimize JavaScript and CSS</li> <li>Optimize website design (11): avoid redirects</li> <li>Optimize website design (13): Configure Etags</li> </ol> </ol>however, for ajax, There are some peculiarities, and not all AJAX requests can be Cached. This is due to the fact that Ajax requests typically have two different methods: post and Get. They are slightly different when they make the Request. <ol> <ol> <li>Post requests are not cached on the client , and each request needs to be sent to the server for processing, and the status code 200 is returned each Time. (here you can optimize the Server-side caching of data to improve processing speed)</li> <li>get requests, which can be cached by the client (and by Default) , unless a different address is specified, the AJAX request of the same address is not repeated on the server, but instead returns 304.</li> </ol> </ol>How to optimize for postPost request, The browser usually assumes that the user wants to submit (or send) the data to the server, so the browser naturally does not cache the request because you are committing the data, so it thinks that the server is naturally required to handle it every Time. We can look at an example.<pre class="csharpcode">Using System;Using System.Web.Services;Namespace webapplication4{ //<summary>//summary description for Hellowebservice //</summary> [WebService (namespa CE = "http://tempuri.org/")] [webservicebinding (conformsto = wsiprofiles.basicprofile1_1)] [ System.ComponentModel.ToolboxItem (false)] //to allow this Web Service to is called from script, using asp. AJA X, Uncomment the following line. [System.Web.Script.Services.ScriptService] public class Hellowebservice: System.Web.Services.WebService {[WebMethod] Public string HelloWorld () { return string. Format ("hello,world--{0}", datetime.now); }}} </pre><style><style></style></style>Above is the definition of a simple XML Web service. It is important to note that if you want to support Ajax access, You must add ScriptService this Attribute.Our calling code is as Follows:<pre class="csharpcode"><pre class="csharpcode"> XML Web Service only supports post, which cannot be cached in the browser, but can be combined with server-side caching to reduce the number of background code executions to improve performance by $ ("#btCallXMLWebService"). Click ( function () { $.ajax ({ "POST", "application/json;utf-8", function ( Result) {alert (result.d);}}); });</pre></pre><style><style></style></style>After running, We click this button multiple times and intercept the following request:According to the above is not difficult to see, in fact, each request is re-processed, they are the return status code of 200.This is the processing of the post Ajax request, which is not cached by the Client. Then you might say, can you change the type to get? such as the following<pre class="csharpcode"><pre class="csharpcode"> $ ("#btCallXMLWebService"). Click (function () { $.ajax ({ "GET", "application/ Json;utf-8 ", " Hellowebservice.asmx/helloworld ", function (result) {alert (result.d);});}); </pre></pre><style><style></style></style>The answer is that for XML Web service or standard WCF services, they do not support requests via get and only support post Requests.The server returned an error with a status code of 500 and described the error message in the body, as shown inso, for this scenario, do we have any way to optimize it?<pre class="csharpcode">Using System;Using System.Web.Services;Namespace webapplication4{<summary>Summary description for Hellowebservice</summary> [WebService (Namespace = "http://tempuri.org/")] [webservicebinding (conformsto = wsiprofiles.basicprofile1_1)] [System.ComponentModel.ToolboxItem (false)] //to allow this Web Service to be Called from script, using asp. AJAX, uncomment the following line. [System.Web.Script.Services.ScriptService] public class hellowebservice: System.Web.Services.WebService {///<summary> ///the method was cached for 10 seconds, is to cache the results in server Memory. ///</summary> ///<returns></returns> [WebMethod (cacheduration=10)] public string HelloWorld () { Span class= "kwrd" >return string. Format ( "hello,world--{0}", datetime.now);}} </pre><style><style></style></style>After this modification, for the client, there is actually no change, multiple calls, the server needs to process, and then return the status code of 200. But what is the difference? The difference is that the server does not need to run the real code every time, it caches the results in memory and repeats the call within 10 seconds, returning the data in that memory directly. (this can improve the performance of the server and improve Concurrency)Note If WCF is the service, the default is not to support caching of operations directly.How to design a service that supports getWe learned that by default, both XML Web service and WCF services support AJAX calls that use the Post method only. So is there a way to design a service that supports get? <ol> <ol> <li>The XML Web service does not support get</li> <li>WCF services can support get through a special webhttpbinding. This article will discuss this Approach.</li> </ol> </ol> <blockquote> <blockquote> "remarks" WCF has a variety of applicable scenarios, I have written two articles before, interested friends can refer to </blockquote> </blockquote>different application scenarios of WCF technology and its implementation analysisdifferent application scenarios and implementation analysis of WCF technology (cont.) <blockquote> <blockquote> 3. The Web API feature can be supported in asp. net mvc, and can be called by a get method. This practice, this article does not do discussion, interested friends can refer to Http://www.asp.net/web-api </blockquote> </blockquote>Let's look at an example. Support for a special operation in WCF is the WebGet<pre class="csharpcode"><pre class="csharpcode">using system; Using system.servicemodel; using System.ServiceModel.Activation; using System.ServiceModel.Web; namespace webapplication4{[servicecontract (namespace = [aspnetcompatibilityrequirements (requirementsmode = aspnetcompatibilityrequirementsmode.allowed)] public class hellowcfservice { [webget (responseformat = webmessageformat.json)] public string restfulhelloworldwithparameter (string Name {return string. Format ( "hello,{0}--{1}", datetime.now, name);}} </pre></pre><style><style></style></style>The Ajax calling code is as follows<pre class="csharpcode"><pre class="csharpcode"> $ ("#btCallRestfulWCFServicebwithParameter"). Click (function () { var name = $ ("#txtName"). Val (); //get requests are cached by default (in the same browser, the default is the temporary cache, the browser is deleted when it is Closed) $.getjson (function (data) {alert (data.d);});}); </pre></pre><style><style></style></style>After running, we enter a different name parameter, and call two times, respectively.We can see that the first call returns the status code (200), and the second call returns the status code (304), but if the argument is different, the status code (200) is Returned. In Turn.And we can actually find two cached data in the browser Cache.So for a get request, it is cached by Default. But what if you want to change this behavior, for example if you don't want to do caching at times?Avoid caching of Get requestssometimes, we may want get requests not to be cached, there are several ways to achieve this purpose. <ol> <ol> <li>Each time a call is called, a different address is requested (a random number can be added after the original address) such as the Following:</li> </ol> </ol><pre class="csharpcode"><pre class="csharpcode"> $ ("#btCallRestfulWCFServicebwithParameter"). click (function () { var name = $ ("#txtName"). Val (); //get requests are cached by default (in the same browser, the default is the temporary cache, the browser is deleted when it is Closed) $.getjson ("hellowcfservice.svc/ Restfulhelloworldwithparameter ", {name:name,version:Math.random () }, function (data) { alert (data.d); }); });</pre></pre><style><style></style></style> <ol> <ol> <li>If you are using jquery, you can consider disabling the AJAX cache</li> </ol> </ol><pre class="csharpcode"><pre class="csharpcode"> false});</pre></pre><style><style></style></style>Use the new features of HTML5 to reduce unnecessary Ajax callsI think a more thorough approach is to consider caching part of the data in the client, and preferably not in a temporary folder, so that it can be used the next time you start up. HTML 5 provides a new feature: local storage, which can be a good solution to this problem if interested friends can refer to the following document <ol> <ol> <li>Http://w3school.com.cn/html5/html_5_webstorage.asp</li> </ol> </ol>Make Ajax calls take advantage of caching features

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More