What is the quickest method to load a section of a file using AJAX?

I have numerous books stored in text files.

I've created an index for these books on a website.

The idea is: To load a specific part of a book from the index by retrieving it from a text file containing the entire book.

INDEX OF THE BOOK(for example with 3 indexes):

<ul>
   <li><a onClick="return LoadThis('a1')">INDEX-1</a><div id="loader1" ></div></li>
   <li><a onClick="return LoadThis('a2')">INDEX-2</a><div id="loader2" ></div></li>
   <li><a onClick="return LoadThis('a3')">INDEX-3</a><div id="loader3" ></div></li>
</ul>

The JavaScript Code:

var loadUrl = "http://www.website.com/books/the-book.php";

function LoadThis(link_anchor)
{
var loader="#loader"+link_anchor.substring(1);
$(loader).html(ajax_load).load(loadUrl+" #"+link_anchor);

$(loader).addClass('ajax-active');
}

The-Book.PHP file

<div id="a1"><p>Index-1 texts...</p></div>
<div id="a2"><p>Index-2 texts ....</p></div>
<div id="a3"><p>Index-3 texts ....</p></div>

Issue: Loading times can be slow, especially as the number of indexes and the size of The-Book.php file increases.

Question: Is my current AJAX LOAD function programming method considered standard?

Are there more efficient, standardized, and faster methods to achieve this task?

Your assistance is much appreciated.

Answer №1

While using the .load() function itself is not inherently a bad practice, it may not be the most efficient solution in your case.

When you use .load() to fetch a page and specify a selector to insert into your document, jQuery will download the entire file regardless of whether you only need a specific portion of it. This means that if the file is large (such as a few hundred kilobytes) and there is no caching mechanism in place, you may end up downloading unnecessary data multiple times to populate different sections of your page.

If you are looking to load specific parts of a file, one approach could be to store separate files on your hard drive and dynamically load the appropriate file for each section. Alternatively, you could have your PHP script filter the content before returning it to include only the requested part.

For more information on parsing HTML/XML using PHP, you can refer to How do you parse and process HTML/XML in PHP?.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Activate the checkbox input by defining the form type with Javascript

I am attempting to control the enabling or disabling of input types based on whether a checkbox is checked or unchecked using JavaScript. Here is the code I am using: <script language="JavaScript"> <!-- function enable_text(status) { status=!st ...

Switch the image source when hovering over a text menu

Currently, I have been using the following code to switch between images. However, what I actually want to do is change the image when hovering over the title link of the image. onmouseover="this.src='Images/img.png'" onmouseout="this.src=' ...

Retrieve and process various arrays from a .json document

I have been keeping track of all the movies I watch by storing my data in movies.json. Within movies.json, there are multiple arrays starting with "MarvelMovies" containing 2 movies. Following that is "ComedyMovies" with another 4 movies listed. While I ...

Is it possible to invoke a function located in the 'code behind' using AJAX in ASP.NET WebForms?

Is there a way to access a method in code behind when clicking on a span in an aspx view? CODE IN DEFAULT.ASPX VIEW: <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> <%-- SPAN ELEMENT --%> <span runat="ser ...

The controller is not being triggered by the Ajax call

Looking at my code, I have an ajax call that is not reaching the action as expected: function openMapTab(lat, lng) { $.ajax({ url: "/Controller/DisplayMap?qid=" + $('body').data('usid'), data: { latitude: lat, l ...

Sending Massive Real-Time Analytical Data

I am currently in the process of developing a dynamic analytics website using Asp.Net and C#. I am seeking advice on the most effective way to transmit data from the server to the client. Here are some options I have considered so far: Utilizing an Asp ...

Combining and consolidating JSON attributes

I am working with a JSON object that has multiple instances of the email property, like so: accounts": [ { "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="61120e0c04030e051821050e0c">[email protected]</a& ...

What strategies can be utilized to address the absence of an element in an array iteration that is currently ongoing?

Currently, I am looping through an array of strings using forEach() method to check if each element's length is even or odd. If the length is even, I am removing it using splice(). Although my conditions seem correct, when I look at the input and out ...

Exploring the interactivity of Vue3 Composition API props!

Currently, I am monitoring two props on a child component (basicSalaryMin and basicSalaryMax). Once the value changes, my next step is to update a reactive value on the parent component (data.companyModels, which is also passed to the child component as a ...

Find the nearest value in an array

I need to find the closest number in an array that is not higher than a specified number. Here's an example scenario: Let's say we have an array: [1, 3, 7, 15, 40, 55, 70, 80, 95] The variable for the number is: numberD1; If numberD1 is 8 ...

Submitting documents via jQuery post

I am facing an issue with my HTML form where I am trying to upload an image file. After submitting the form, I use JavaScript to prevent the default action and then make a jQuery post request (without refreshing the page) with the form data. However, despi ...

Getting data from a document containing key value pairs

I have a collection of text files that are structured in a key-value pair format. "Site Code": "LEYB" "Also known as": "" "Location": "Pier Site, Poblacion del Sur, Villaba, Southern Leyte" "Contact person(s)": "" "Coordinates[1]": "11 ...

JavaScript node_modules import issue

I've been grappling with this issue for quite some time now. The problem lies in the malfunctioning of imports, and I cannot seem to pinpoint the exact reason behind it. Let me provide you with a few instances: In my index.html file, which is complet ...

Issue: Avoid creating functions inside loops

I am struggling to update variables in an email template. Here is the code I have been working on: Unfortunately, I keep encountering the "error: Don't create functions within a loop" var dataPlaceholders = [{ "username":"John Johny", ...

Retrieve the value of a duplicated object key from a JSON and replace it with just one unique value

In my current project, I am faced with the challenge of extracting duplicate object keys' values from a JSON dataset and replacing them with only one value. My goal is to ultimately return these unique key-value pairs as an array. NOTE: This data has ...

How can I adjust the timeout or enhance my code for Excel Online's ExcelScript error regarding the Range getColumn function timing out?

I am struggling with a code that is supposed to scan through the "hello" sheet and remove any columns where the top cell contains the letter B: function main(workbook: ExcelScript.Workbook) { let ws = workbook.getWorksheet("hello"); let usedrange = ws ...

Including a property within a nested for-loop results in identical values being assigned to every parent for-loop

I am working with an array that contains data about playing cards (cardInfo). Below is a snippet of the array in the code. Since there can be duplicates of each card, I aim to utilize this data to generate a deck by storing its information in a new array ( ...

Instructions for using Selenium to access the "stats for nerds" option on a YouTube video by right-clicking

I am currently working on a program that has the ability to block YouTube ads and keep track of the blocked Ad Video IDs. To achieve this, our selenium program needs to simulate a right click on the video to open the video menu and then select "stats for ...

When resizing an anchor tag with a percentage in CSS, the child image width may not scale accordingly

In short, I have multiple draggable images on a map enclosed in anchor tags (<a><img></a>) to enable keyboard dragging. The original image sizes vary, but they are all too large, so I reduced them to 20% of their original sizes using the ...

Utilizing the default event object in ag-Grid's event methods with JavaScript

I am a newcomer to ag-grid and I need help with calling event.preventDefault() in the "cellEditingStopped" grid event. Unfortunately, I am struggling to pass the default JavaScript event object into it. Is there a way to make this work? Additionally, I al ...