- Tags:
- Show more
- Pages:
- 1
- Words:
- 275
Ajax and JQuery in a Webpage Firstname LastnameUniversity Name Ajax and JQuery in a Webpage Asynchronous JavaScript and XML (AJAX) allows a webpage to send/receive data with the server in the background and update only specific portions of a webpage that require an update rather than reload contents of the entire page. AJAX uses some of JQuery methods for its functionalities. Some important JQuery methods for Ajax are load(), get() and post(). These JQuery methods allow a webpage to use HTTP get and post methods to request data (text/JSON/XML/HTML) from the server and load it into an HTML element on the webpage. Adding Ajax and JQuery To explain how to add Ajax and JQuery to a webpage, we use the following example. Figure SEQ Figure * ARABIC 1 Ajax JQuery Example In this example, the data contained in a text file will be loaded into the webpage when the user clicks the button. We start by referring to the JQuery library of Ajax, which is available online, in the <script> elements of the webpage. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> Next we define the data on the server the contents of which may get updated with time. For instance, we define a text file on the server with the name ‘data.txt’ and add some data into it as shown below. Figure SEQ Figure * ARABIC 2 Data on Server We define the element in the page (i.e. with an id ‘serverdata’ in this case) where the server data will be loaded in the following way. <div id="serverdata"></div> We define the button, which when clicked would load the data. <button id="dataBtn">Get Server
Leave feedback