IFRAME and Ajax comparison

Speaking of comparison, I may want to introduce this product to you, but I already have a lot of understanding. Let me simply put it.

Ajax:
This is a web development technology used to create interactive web applications. It mainly uses the XMLHTTPRequest object. This object was first introduced in Internet Explorer 5. It is a technology that supports asynchronous requests. In short, XMLHttpRequest allows you to use JavaScript to request and process responses to the server without blocking users.


IFRAME:
HTML tags are used to document or floating frame ).

The above statement is entirely taken from Baidu Baike. However, from their descriptions, they seem completely incomparable. However, we can use IFRAME to implement Ajax-like technologies. This is very simple, and we did use it before XMLHttpRequest came out. The following uses a simple example to simulate the IFRAME remote script call. This example does not actually call the server, but just wants to let everyone know how to use IFRAME to implement remote script call.

Iframe.html file:

<span style="font-size:18px;">


Server.html File




<span style="font-size:18px;">

Run this code and you will see the pop-up prompt box: 'This function is called from server.html'

In this example, we fully implement remote script calls. This seems to be the same as Ajax, but what is the difference between the two.

1. What we want to talk about first is what we generally know: asynchronous communication, the biggest feature of Ajax.


1) when you use IFRAME to request data from the server, the progress bar in the browser is usually moving forward like opening a new webpage. If you set a refresh alarm sound, the computer will make a click, which may be annoying to the user. If the request is frequent, the user may feel annoyed.
2) The preceding situation does not occur when Ajax is used to request server data. But in essence, if the server's return value is the same, their speed difference is the same.

2. functions:

1) IFRAME contains an entire webpage. We usually use it when layout a webpage. In this way, the web page is created naturally and conveniently.
Ajax is usually used when a small part of a webpage needs to be changed. It is quick and exquisite when the webpage content is changed. IFRAME is usually not used when you need to change the words on the webpage.


2) If you want to use a non-Refresh Technology to upload a data file, you must select IFRAME. This is a common method. IFRAME must be flexible and simple.
With Ajax, you usually need to write a bunch of declared code, which will be troublesome in short. However, if the server needs to perform complex operations and the return value is a very simple result, Ajax must be a good choice.

3. problems between the two:
The two major problems that Ajax has encountered so far are:
1) Chinese garbled characters. This seems to be a problem of encoding, which can be basically solved, but some problems still occur in some earlier browsers.

2) Cross-origin post data submission, which does not seem to be implemented directly. It can only be implemented through proxy or other methods.

These two problems are basically not met by IFRAME, but the problem with IFRAME is that
1) How many IFRAME requests do you need to create ~ Otherwise, it cannot be performed at the same time.

2) The IFRAME method processes the content of the IFRAME page, and the trigger mode of successful interaction mainly depends on.
A) regular page read page loading status: This method will inevitably cause a large amount of occupation of client resources.
B) IFRAME triggers the parent page event: This method increases the returned data, and the variables and methods on the parent page and framework page must be consistent. (In the preceding example, this method is used.) at this point, only the required data (XML or text) is returned during Ajax interaction ), this is one of the biggest advantages of Ajax over IFRAME.

The above is a rough comparison between the two. For a deeper understanding, you need to practice a lot in future projects.