- HTML and CSS for marking up and styling information.
- A method for exchanging data asynchronously between browser and server, thereby avoiding page reloads. The XMLHttpRequest (XHR) object is usually used, but sometimes an IFrame object or a dynamically added tag is used instead.
The following diagram illustrates the process.
AJAX’s fundamental function is to create fast and dynamic web pages. It does this by sending HTTP requests to the server asynchronously, this means that the entire web page doesn’t need to reload in order to update most content. The response data is parsed using the DOM(Document Object Model). AJAX that returns JSON (the data format of choice for most web developers today) is officially called AJAJ, but this term is not widely used. My personal favourite way to perform an AJAX request is using a promise. Some advantages and disadvantages of AJAX are as follows:
- It reduces the traffic levels between the client and server, potentially speeding up your website if done properly, for example using lazy loading techniques.
- The response time is faster which increases performance and speed.
- You can use JSON instead of XML which is much easier to parse.
- AJAX communicates over the HTTP protocol, which means it has access to GET,PUT, POST, DELETE and HEAD requests.
- It can increase design, devtime and complexity of your application, possibly unnecessarily.
- You may need to import third party libraries to facilitate AJAX requests, for example Redux-thunk if you are using Redux for state management.
- AJAX apps have worse security as all of the files are downloaded to the client side.
- SEO may suffer in AJAX apps as browsers cannot index AJAX pages.
- If your user is using a JS disabled browser(unlikely these days) then your app won’t work. A more likely scenario would be that your user has disabled JS inadvertently in the settings for their browser.
- Due to security constraints you can only use it to access info from the host that served the initial page, if you need to display info from another server, it’s not possible from within the AJAX.
AJAX in a nutshell, in a nutshell:
Here come the juicy bullet points:
- Uses HTTP protocol to communicate.
- Does not require entire browser window to reload to change data.
- JSON is the current returned data format of choice for the web.
Opencart makes really good use of Ajax all throughout the framework installation. There may come a time where you will…blog.arvixe.com
What is the essence of AJAX? For example, I want to have a link on my page such that when a user clicks this link, some…stackoverflow.com
Blog posts about programming, mostly JS and frontend, but a few other topics as well.lucybain.com