Dealing with Ajax browser compatibility issues without relying on jQuery

Below are some JavaScript functions:

//function to get element by id
function getElementByIdCustom(x){
    return document.getElementById(x);
}

//ajax request handling without jQuery
function createXMLHttpRequestObject( method, url ) {
    var xhr = new XMLHttpRequest();
    xhr.open( method, url, true );
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    return xhr;
}
function checkAjaxResponse(xhr){
    if(xhr.readyState == 4 && xhr.status == 200){
       return true; 
    }
}

Any tips on handling browser compatibility issues without relying on jQuery?

javascriptajax

Answer №1

There are numerous options available when you search for it online, but I came across one that might interest you: https://github.com/ilinsky/xmlhttprequest

The main concept is something that I believe could be beneficial for you, particularly in terms of how they determine which class to utilize.

var oXMLHttpRequest = window.XMLHttpRequest;

// Determining the browser type
var bGecko  = !!window.controllers;
var bIE     = !!window.document.namespaces;
var bIE7    = bIE && window.navigator.userAgent.match(/MSIE 7.0/);

// Making "XMLHttpRequest()" call alongside "new XMLHttpRequest()"
function fXMLHttpRequest() {
    if (!window.XMLHttpRequest || bIE7) {
        this._object = new window.ActiveXObject("Microsoft.XMLHTTP");
    } // using initial XHR object internally only if current reference to XHR is our normalized replacement 
    else if (window.XMLHttpRequest.isNormalizedObject) {
        this._object = new oXMLHttpRequest();
    } // otherwise, using whatever is currently referenced by XMLHttpRequest
    else {
        this._object = new window.XMLHttpRequest();     
    }

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

Display the current user status on a PHP page and automatically refresh it

Looking for a way to update my PHP script that queries user status via SOAP in real-time. Want the page to refresh quickly and smoothly when a change in user status occurs, such as making or ending a call. Heard about Ajax and looked into HTML5 solutions. ...

phpajaxrefreshstatus

Transmitting an Array Using an Ajax Call

Is there anyone knowledgeable in Ajax here? I'm struggling with sending a javascript array in an ajax request. Can someone provide me with an example of how the ajax request should be formatted? My goal is to gather all the javascript data, package it ...

javascriptajaxcoldfusion

What are the steps to design a versatile gallery page that can serve various projects?

Allow me to get straight to the point. What is my goal? I am aiming to develop galleries for various projects. Each project's thumbnail on the main page should open a gallery as a new page. These galleries will all have the same layout but different ...

javascriptphphtmlcssgallery

Struggling to retrieve the value from ng-model?

Currently, I am utilizing this account due to being logged into Facebook on my other account and not having access to my phone for the verification code process. On another note, I am struggling to retrieve the value from an ng-model despite numerous atte ...

javascriptangularjs

Setting the select option in AngularJS with predefined options can be easily achieved with

I am encountering an issue with a select element that has predefined options. Even though the select element is using ng-model, when the model is set to one of the option values, it fails to be selected. Below is the snippet of HTML code: <select clas ...

javascriptangularjs

Leveraging the .reduce method to perform specific calculations and generate an object containing the results of an array

After successfully achieving the desired results, here is the data manipulation I have done: const days = [ { date: '2016-12-13T00:00:00.000Z', stats: [ { name: 'Soft Drinks', sold: 34, }, { name: 'Snacks&apo ...

javascriptarraysjsonreduce

Tips for dynamically adjusting the numbering of multiple checkboxes based on user choice

Currently, I have a set of 10 check-boxes that need to be labeled in a specific way based on the user's selection. The labeling system is as follows: when the first check-box is selected, it is labeled "a)." If a second check-box is selected and it fa ...

javascriptjquery

Interactive Registration Modal

I searched online for a sample of a basic Sign Up modal designed for bootstrap, but I was unable to locate any direct PHP examples. It would be greatly appreciated if someone could guide me in the right direction. Thank you very much. Additionally, I am ...

phpajaxtwitter-bootstrap

jquery mobile page navigation option

I am a big fan of the navigation system in jQuery Mobile: <a href="page-transitions-page.html" data-transition="slidedown" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">page</a> () It is incredibly user-friendly, and I really enjoy th ...

javascriptandroidjqueryjquery-mobileframeworks

Using JavaScript, transfer a Base64 encoded image to Google Drive

I've been attempting to upload a Base64 encoded image to Google Drive using a Jquery AJAX POST request. The data successfully uploads to Google Drive, but unfortunately, the image does not display in the Google Drive viewer or when downloading the fil ...

jqueryajaximageuploadbase64

Is it possible to set state only once within a loop when a click event occurs?

In my function, I am iterating over a list of labels and triggering an onClick event that calls a function. This function updates the state of clicked to match the id of the clicked item in the loop, and then logs the state to the console. The issue is th ...

javascripthtmlreactjsonclickfrontend

Deactivate the button while you wait for the Google Maps directionService

When utilizing the Google Maps service to plot a route with multiple waypoints and under slow 3G conditions, I need to deactivate an HTML button until the new route is traced. calculateRoad(departure: any, arrival: any) { const request = { origin: ...

javascriptangularjsgoogle-maps

"Dropping a file into the Dropzone module will always result in the return of 'empty($_FILES)' being true

I'm currently working on a project that requires drag and drop functionality on my web page. My ultimate goal is to retrieve dropped images and upload them to my database. HTML <form action="parser.php" id="file-up" class="dropzone"> <in ...

javascriptphpdropzone.js

Implementing chunk uploading for large video files with Laravel and VueJS

I am currently working on a Laravel project for API and a VueJS project for the front end. My main objective is to efficiently upload large video files to the server with minimal chances of failure. I have explored two different methods for achieving this. ...

javascriptlaravelvue.jsamazon-s3file-upload

When using node.js, the Ajax success function is not being executed

Why doesn't success respond? Here is the code I've used: Client-side code: function add(){ var values = formserial(addd); var tok = "abc", var url= 'http://localhost:8181/add'; $.ajax({ type: "POST", ...

javascriptjsonnode.jsajax

Change the HTML data received from an AJAX post response using jQuery

Attempting to change html data from an ajax post response. var check = '<option value="">All</option>'; var urlpage = 'select.php'; $("select#s1").change(function(){ var s1 = $("select#s1 option:selected").prop("value"); ...

jqueryajax

Unable to configure node and express for file serving

Currently using Windows 7, I have successfully installed nodes 0.10.12 and the latest versions of express and express-generator globally. I then proceeded to create a new express project called nodetest1 and installed all dependencies using npm install. U ...

javascriptnode.jsexpress

Working with attributes in AngularJS directives

Building an overlay (or modal window) in AngularJS has been on my mind, and I've made some progress with the html/css layout. Here's a sneak peek at what it looks like: <section class="calendar"> <a open-overlay="overlay-new-calenda ...

javascriptangularjs

What is the rationale behind calling the open() and send() functions after the anonymous function() in the following code snippet?

function fetchData() { var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (request.readyState == 4 && request.status == 200) { document.getElementById("content").innerHTML = request.responseText; } } ...

javascriptajax

Create a view on the server side using a JavaScript library

I am implementing a JavaScript library called Handsontable that creates tables, and I am adding it using jQuery. This means that along with my HTML, I will be sending the script that generates this table to be executed on the client side. Therefore, my qu ...

javascriptjquery