This is the 25th day of my participation in Gwen Challenge

AJAX profile

AJAX Asynchronous JavaScript and XML. Save asynchronous, or “immediate,” information that is processed in AJAX in a cache instead of calling DHMTL element information every time you do asynchronous processing.

Normally, once the form information is filled in and submitted, the entire form information is sent to the server, which forwards it to the script that processes the form, usually PHP or JAVA in the background, and sends back the new page information when the background script is complete. AJAX normally puts JavaScript technology and XMLHttpRequest objects between the Web form and the server. When the form information is filled in and submitted, it is executed using JavaScript code instead of sending it directly to the server. That is, JavaScript code sends requests to the server in the background and can be processed asynchronously, that is, JavaScript code sends messages without waiting for a response from the server and can continue to send other messages.

AJAX’s relationship to the WEB and DHTML is shown in figure 2.

DHTML is the art of making HTML pages dynamic, and DHTML is a set of techniques for creating dynamic and interactive WEB sites. To most people, DHTML means a combination of HTML, stylesheets, and JavaScript.

When making an active AJAX request, the user may still have to wait, so the request must be optimized, the most important way to optimize the request is to make the response cacheable.

That is, when AJAX sends data successfully, the URL of the request and the returned response result information are stored in the cache. In this way, when AJAX sends the same request next time, the data is directly retrieved from the cache, which improves the response speed of the request.

Improve page performance through Ajax caching

AJAX caching allows requests to process information about static page content more quickly, such as images, CSS files, JS scripts, and so on. Response headers that can be made cacheable by AJAX include: Expires, Last-Modified, and cache-Control.

Expires

Expires determines whether to use the content in the browser cache by determining whether it has been changed, and if we know when it has been changed, we can use the Expires response header. Header defined in HTTP /1.0 is the most basic browser cache processing. It indicates that resources can be obtained from the browser cache within a certain period of time without requiring the server to obtain resources. In this way, resources can be quickly obtained and pressure on the server can be relieved. In the response header, the format is: Expires: Thu, 01 Dec 1994 16:00:00 GMT (the FORMAT must be GMT). application

  1. You can add it in the HTML page<meta http-equiv="Expires" content="Thu, 01 Dec 1994 16:00:00"/>To set the page cache time.
  2. For images, CSS, etc., you need to configure the rules in the IIS or Apache runtime container to add the responese header when requesting the resource.

Last-Modified

Setting this flag tells the browser to use the if-Modified-since header to check its local cache with a GET request. If the data does not need to be updated, the server will respond with an HTTP 304 status code, and if it needs to be updated, the server will return a 200 status code. The first time the browser requests a URL, the server returns an HttpReponse Header with a status of 200, indicating the source of the request, and a last-Modified attribute indicating the Last time the file was Modified at the server end. The format looks something like this: Last-modified :Thu, 28 Feb 2019 08:01:04 GMT When the client requests this URL for the second time, The browser sends an if-modified-since Header to the server asking If the file has been Modified Since then: If-modified-since :Thu, 28 Feb 2019 08:01:04 GMT If the resources on the server have NotChanged, the HTTP304 (NotChanged.) status code is automatically returned, which saves data transfer. When server-side code changes or the server is restarted, the resource is re-issued, returning similar to the first request. This ensures that resources are not repeatedly issued to the client and that the client can get the latest resources when the server changes.

Cache-Control

Cache-control specifies the caching mechanism followed by requests and responses. Setting cache-control in a request or response message does not modify the caching process in the other message process. The cache instructions at request include no-cache, no-store, max-age, max-stale, min-fresh, and only-if-cached. Directives in response messages include public, private, no-cache, no-store, notransform, must-revalidate, proxy-revalidate, and max-age. If allowed, it should be set to “public” so that other users can store and share data on the intermediate proxy and cache server. Public indicates that the response can be cached by any cache. JQuery provides apis that make it easy to create AJAX requests. You can use HTTP Get and HTTP Post to request text, HTML, XML, or JSON from a remote server and you can load these external data directly into selected elements of a web page. JQuery is a JavaScript library that greatly simplifies JavaScript programming. JQuery provides load(), get(), and POST () methods that handle AJAX requests. AJAX caching has many advantages, but it also has some disadvantages. If AJAX makes changes to some background data, the data is changed on the server side, but the results in the browser cache are not changed. The browser simply reads the data from the cache and returns it to the client side. Of course, to address the AJAX caching issue, you can disable page caching.

When should YOU use Ajax?

Ajax is essentially a browser-side technology, and the big difference with the traditional Server Centri Web architecture is that it moves a lot of business logic from the Server side to the browser. The advantage is that when the data changes, you only need to re-render the relevant HTML instead of loading the entire page. The downside is that projects that use a lot of Ajax are more C/S than B/S, and naturally have C/S characteristics, some of which can be a disadvantage in a browser environment. For example, Ajax requires that the business logic must be loaded before the data, and the browser must load the relevant JS files before the data can be loaded, so the first page ready will be later than a traditional Web page. However, there are many solutions to this problem. For example, Application Cache can save files in the browser to avoid loading the same scripts and resource files repeatedly. So the conclusion is: Whether you should use Ajax depends on the business process and technology stack.

Tips on using Ajax

  • For example, the problems in the Timeline of the first page of Zhihu’s home page are read directly from the server and written into the current page source code, while the content obtained after “showing more” is read by Ajax.
  • You don’t need Ajax to switch pages. Don’t use Ajax just because the header or side of a web page hasn’t changed. Because it’s a different page, in other words, with completely different content or completely different page logic. Their URLS should be different. Add: Use the HTML5 History API exception, but consider compatibility with earlier versions of browsers.
  • Ajax is usually used for submitting, modifying, and deleting parts.
  • The part of the message alert is usually Ajax. Since Comet long connections are likely to be used to ensure that messages are pushed in real time, Ajax is the best alternative to WebSocket.
  • The module division of labor is clear when coding. With jQuery, for example, all Ajax requests are best wrapped and then transferred to$.postor$.ajaxAnd so on.