JavaScript without using the jQuery library

Question

JavaScript without using the jQuery library

Similar Question:
How can I create an ajax call without using jQuery?

I currently have JavaScript code utilizing Ajax, but I am looking to achieve the same functionality without using XMLHttpRequest.

$.ajax({
            type:'POST',
            data:'slug='+prize,
            url:'/wybrana-nagroda/',
            success:function(msg)
            {
                $('#whaiting').hide();
                if(msg==='winner') 
                    $(window.location).attr('href','/formularz');
            }
        });

What would be the alternative approach?

function send(post, url) {
  var client = new XMLHttpRequest();
  client.open("POST", url);
  client.send(message);
}

Any suggestions on how to accomplish this?

Thank you!

javascript ajax

Answer 1

Answer №1

To ensure compatibility across all browsers, you will need to implement the following code:

function sendRequest(url,callback,postData) {
    var req = createXMLHTTPObject();
    if (!req) return;
    var method = (postData) ? "POST" : "GET";
    req.open(method,url,true);
    req.setRequestHeader('User-Agent','XMLHTTP/1.0');
    if (postData)
        req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    req.onreadystatechange = function () {
        if (req.readyState != 4) return;
        if (req.status != 200 && req.status != 304) {
//          alert('HTTP error ' + req.status);
            return;
        }
        callback(req);
    }
    if (req.readyState == 4) return;
    req.send(postData);
}

var XMLHttpFactories = [
    function () {return new XMLHttpRequest()},
    function () {return new ActiveXObject("Msxml2.XMLHTTP")},
    function () {return new ActiveXObject("Msxml3.XMLHTTP")},
    function () {return new ActiveXObject("Microsoft.XMLHTTP")}
];

function createXMLHTTPObject() {
    var xmlhttp = false;
    for (var i=0;i<XMLHttpFactories.length;i++) {
        try {
            xmlhttp = XMLHttpFactories[i]();
        }
        catch (e) {
            continue;
        }
        break;
    }
    return xmlhttp;
}

Source: quirksmode

Answer 2

To ensure compatibility across all browsers, you will need to implement the following code:

function sendRequest(url,callback,postData) {
    var req = createXMLHTTPObject();
    if (!req) return;
    var method = (postData) ? "POST" : "GET";
    req.open(method,url,true);
    req.setRequestHeader('User-Agent','XMLHTTP/1.0');
    if (postData)
        req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    req.onreadystatechange = function () {
        if (req.readyState != 4) return;
        if (req.status != 200 && req.status != 304) {
//          alert('HTTP error ' + req.status);
            return;
        }
        callback(req);
    }
    if (req.readyState == 4) return;
    req.send(postData);
}

var XMLHttpFactories = [
    function () {return new XMLHttpRequest()},
    function () {return new ActiveXObject("Msxml2.XMLHTTP")},
    function () {return new ActiveXObject("Msxml3.XMLHTTP")},
    function () {return new ActiveXObject("Microsoft.XMLHTTP")}
];

function createXMLHTTPObject() {
    var xmlhttp = false;
    for (var i=0;i<XMLHttpFactories.length;i++) {
        try {
            xmlhttp = XMLHttpFactories[i]();
        }
        catch (e) {
            continue;
        }
        break;
    }
    return xmlhttp;
}

Source: quirksmode

JavaScript without using the jQuery library

Answer №1

Similar questions

Tips on determining the type of DOM element for CSS Selector adjustment

Prevent selection of items in ng-select. Modifying the default item selection behavior in ng-select

Eliminate duplicate elements based on a property in a JavaScript array

Encountering an issue with an Uncaught SyntaxError: Unexpected identifier

What are the steps for modifying the JSON data format in AngularJS?

Initiate movement upon scrolling

What is the most effective method for defining 2 routes that point to the same component?

Managing additional data in jQuery autocomplete

Restricting input to only letters when using the onkeyup function and preventing keys like PgUp, Del, and ArrowLeft from being entered

Utilizing a React Hook to set data by creating a pure function that incorporates previous data using a thorough deep comparison methodology

The loading of the module from was hindered due to an invalid MIME type restriction

The default value in an Ionic select dropdown remains hidden until it is clicked for the first time

Error message for Joi when validating a nested array of objects

In JavaScript, ensure to directly use the value of a variable when defining an asynchronous function, rather than by reference

What is the best way to integrate the Telegram login widget into an Angular application?

The clearing of sessions is not supported by Node.js / Express.js

Can I link the accordion title to a different webpage?

What is my strategy for testing a middleware that accepts arguments?

Is there a way to refresh my comments partial using ajax?

Using Leaflet to beautify categorical json information