For example, use the following before calling send for form data sent as a query string:. When you sent the request, you provided the name of a JavaScript function to handle the response:. What should this function do? First, the function needs to check the request's state. DONE corresponding to 4 , that means that the full server response was received and it's OK for you to continue processing it.
The possible codes are listed at the W3C. In the following example, we differentiate between a successful and unsuccessful AJAX call by checking for a OK response code. After checking the state of the request and the HTTP status code of the response, you can do whatever you want with the data the server sent.
You have two options to access that data:. Note that the steps above are valid only if you used an asynchronous request the third parameter of open was unspecified or set to true. If you used a synchronous request you don't need to specify a function, but this is highly discouraged as it makes for an awful user experience.
Let's put it all together with a simple HTTP request. Note that this example uses vanilla JavaScript — no jQuery is involved. Note: If you do not set header Cache-Control: no-cache the browser will cache the response and never re-submit the request, making debugging challenging. You can also add an always-different GET parameter, like a timestamp or random number see bypassing the cache.
Note: If the httpRequest variable is used globally, competing functions calling makeRequest can overwrite each other, causing a race condition. This is a protocol. It is just a set of agreed upon rules of communication. This protocol is pretty fundamental to the functioning of the internet because it is what is used to fetch web pages and many other resources.
When you send a message using HTTP it is called a request. When you send a request you should expect a response. Browsers get the HTML of web pages by sending requests to specific locations on the internet and rendering the responses they get. Browsers can really request all sorts of things, not just HTML pages but we'll get to that later. Every request is associated with a url. If an HTTP request were a letter, the url would be the address written on the outside on the envelope.
Requests can have data attached to them as well in the form of parameter values, these values can be associated in a few different ways. The take home message here is: An HTTP request always has a url and sometimes has data attached to it as well. You don't need to know about these technologies to understand how AJAX works, the reason they are mentioned here is because if you want to do anything significant using AJAX you'll probably come across these terms.
Here we'll actually make a little web page. So follow the steps laid out below. STEP 1 open up your favourite text editor notepad will work if you are using Windows. Didn't I tell you this was going to be easy? So what just happened? Or rather, what did the browser just do? It then rendered the contents.
And that is is. A static web page. It doesn't do anything once it is displayed. So the browser can make requests. And JavaScript can make the browser do stuff. It follows that JavaScript can make the browser make requests. That is the fundamental mechanism of AJAX!
One common use case of this is called paging. Say, for example, we have a web page with a table on it. That table contains a list of So, since the cows are the cows of a very successful and caring dairy farmer there are a few thousand of them and they each have a name. But we don't want to load all of the cows' names in one go because that's a lot of data and maybe we are only interested in looking at the first 50 cows.
This allows users to, for example, update profile info without refreshing the whole page or cast a vote on a site like Designer News and store the vote in a database without a refresh. The key aspect of any Ajax webapp is to understand how data is passed from the frontend to the backend.
Ajax optimization is a subject worth reading if you need to improve the speed of a website. Developers quibble and fall into heavy debates over when to use Ajax in a website. The first is to mitigate HTTP calls as often as possible. Ajax is best used to improve the user experience in a web application. Some blogs use the infinite scrolling technique which changes pagination from page refreshes to Ajax calls.
But generally speaking, Internet speeds are much faster nowadays and you can get away with Ajax calls a lot more often. Ajax started as a luxury for web developers and is now considered standard operating procedure.
While the technicalities behind Ajax can be fascinating, the best way to learn more is to build stuff for yourself. Check out the tutorials below and start with simple goals. APIs can offer a fun way to learn Ajax without building your own database. Jake is a writer and user experience designer on the web. He currently publishes articles related to user experience and user interface design. Find out more on his website or you can follow his updates on Twitter jakerocheleau. Skip to content Vandelay Design may receive compensation from companies, products, and services covered on our site.
For more details, please refer to our Disclosure page. Image via Vecteezy. Similar Posts. This website uses cookies to improve your experience.
0コメント