Ajax to load data for company products without refreshing the page

Question

I am using AJAX script to fetch data from a database. For example, it has

• Motorola
• Samsung
• Apple

as company and I use AJAX to fetch models of it, so that when Apple is selected then it shows Apple iPhone 12, iPhone 13, iPhone 14, 14 pro max.

This is an improved version of my AJAX script to load data for mobile phones from table.

Here's the Ajax code - is it near perfect yet, or are there still improvements I can make?

function createRequestObject(){var e,t=navigator.userAgent;return e="Microsoft Internet Explorer"==t?new ("Microsoft.XMLHTTP"):new XMLHttpRequest}function getRequest(e,t,n,a){elementId=t,loading_layer_in=a,http.open("get",e),http.onreadystatechange=ManipulateRequest,http.send(null)}function getRequestalert(e){http.open("get",e),http.onreadystatechange=function(){if(4==http.readyState){var e=http.responseText;res=e}},http.send(null)}
    
    function ManipulateRequest(){if(""==e)var e="<FONT><B>Loading please wait.........</B></FONT>";else msg=e;if(document.getElementById(loading_layer_in)&&(document.getElementById(loading_layer_in).style.display="block"),1==http.readyState);else if(4==http.readyState){var t=http.responseText;document.getElementById(elementId)&&(document.getElementById(elementId).innerHTML=t)}}
    
    function hideLoadingLayer(e){var t=e;document.getElementById(t)&&(document.getElementById(t).style.display="none")}var elementId="",loadingMessage="",loading_layer_in="",http=createRequestObject();

Answer 1

Checking for Internet Explorer requires other means

The answer by QAnew stated:

It is generally not recommended to use the navigator.appName property to determine the user's web browser, because this property can be easily changed by the user or by third-party software. Instead, you can use the navigator.userAgent property, which returns a string that contains information about the user's web browser and operating system.

It appears that

t=navigator.appName;

was changed to

t=navigator.userAgent

And that is used in a comparison:

"Microsoft Internet Explorer"==t

It is highly unlikely that the userAgent property will be exactly equal to the string "Microsoft Internet Explorer". There are many sites that list possible user agent strings - e.g. this list on useragentstring.com for Internet Explorer. Notice that string is not listed.

Use feature detection instead of attempting to detect the browser

As this StackOverflow answer suggests: use feature detection instead of browser detection to determine which object to use. This MDN page about IE 6 also matches this advice:

Using XMLHttpRequest in IE6

XMLHttpRequest was first introduced by Microsoft in Internet Explorer 5.0 as an ActiveX control. However, in IE7 and other browsers XMLHttpRequest is a native JavaScript object.

In all modern browsers, you can create a new XMLHttpRequest object using the following code:

const request = new XMLHttpRequest() 

However, if you need to also support Internet Explorer 6 and older, you need to extend your code like this:

let request; 
if (window.XMLHttpRequest) {
    //Firefox, Opera, IE7, and other browsers will use the native object
    request = new XMLHttpRequest(); 
} else {
    //IE 5 and 6 will use the ActiveX control
    request = new ActiveXObject("Microsoft.XMLHTTP");
}

¹

Usage of Internet Explorer is down dramatically in recent years

As I mentioned in this answer IE8 isn’t supported by Microsoft anymore. Even the last version of IE - i.e. 11 had support end on June 15th 2022. While users may still be using it, usage is low. For example, the caniuse.com usage table (based on data from StatCounter GlobalStats²) currently shows usage numbers less than 0.5% for the seven latest versions:

IE
5.5: 0.01%
6: 0.01%
7: 0.01%
8: 0.04%
9: 0.09%
10: 0.01%
11: 0.42%

²

Some HTML tags used are deprecated or can be replaced by other styling tools

In function ManipulateRequest() the following assignment statement exists:

e="<FONT><B>Loading please wait.........</B></FONT>"

Note that some of those HTML elements are deprecated - e.g. per the MDN documentation for <font>:

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time. ³

And while the <b> tag is not deprecated it is recommended to use other tools for styling instead:

<b>: The Bring Attention To element

The <b> HTML element is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. This was formerly known as the Boldface element, and most browsers still draw the text in boldface. However, you should not use for styling text; instead, you should use the CSS font-weight property to create boldface text, or the <strong> element to indicate that text is of special importance. ⁴