I'm currently working on automating the search functionality of using XMLHttpRequest. However, I am facing an issue where the response is being received before the results finish loading.
If you append a search term like "Layer", "Geoprocessor", "Legend," etc. to the end of the URL provided above and load the page, the #sample-thumbs div will display links to samples containing the specified search term. The loading process takes approximately 10 seconds, causing the request to return prior to the completion of this process. As a result, the #samplesLoading div remains visible while the #sample-thumbs div is yet to appear.
I have included my request function below; I have added checks for readyState being 4 and status being 200 before returning the response. Despite this, due to the delayed loading of the results div, XMLHttpRequest believes the page is fully loaded even though the results div requires additional time to load.
function doAjaxRequest (requestUrl, callback) {
var ajaxRequest;
// Create a request Object
ajaxRequest = new XMLHttpRequest();
ajaxRequest.onreadystatechange = function () {
if (ajaxRequest.readyState == 4) {
if (ajaxRequest.status == 200) {
callback(ajaxRequest.response);
}
}
};
// Set response type
ajaxRequest.responseType = "document";
// Open url
ajaxRequest.open("GET", requestUrl, true);
// Send request
ajaxRequest.send(null);
}
Hence, my question is – Is it possible to make XMLHttpRequest wait until #sample-thumbs appears? Alternatively, can I make subsequent requests to the same page in order to check for the presence of this div? It seems that XMLHttpResponse is simply providing a static snapshot, prompting me to explore other methods for obtaining dynamic responses that continuously update as the page loads.
Apologies for the lengthy query, that actually equates to three questions. Essentially, I am inquiring whether my current approach with XMLHttpRequest is viable and if not, what alternative methods could be employed?
UPDATE: Here's a comprehensive code snippet. By setting a breakpoint at line 25 (.innerHTML += ...) and monitoring ajaxRequest.responseXML.querySelectorAll("#samplesLoading"), it is apparent that the loading div exists but the #sample-thumbs div does not.
function doAjaxRequest(requestUrl) {
var ajaxRequest, loadingDiv;
// Create a request Object
ajaxRequest = new XMLHttpRequest();
ajaxRequest.onreadystatechange = function() {
if (ajaxRequest.readyState == 4) {
if (ajaxRequest.status == 200) {
document.getElementById("output").innerHTML += ajaxRequest.response.querySelectorAll("#sample-thumbs ul");
}
}
};
// Set response type
ajaxRequest.responseType = "document";
// Open url
ajaxRequest.open("GET", requestUrl, true);
// Send request
ajaxRequest.send(null);
};
function doSearch() {
var requestUrl;
// build query url
requestUrl = "https://developers.arcgis.com/javascript/jssamples/#search/";
doAjaxRequest(requestUrl + document.getElementById("searchTerm1").value);
};<div id="bcMain">
<div id="cpRequest">
<h2>Request test</h2>
<label for="searchTerm1">Search Term 1</label>
<input id="searchTerm1" type="text"/>
<br><br>
<button id="btnHttpRequest" type="button" onclick="doSearch()">Search</button>
</div>
<div id="cpResults">
<h2>Results</h2>
<div id="output"></div>
</div>
</div>