Convert jQuery to JavaScript code equivalent

Question

I know how to use jQuery well, but I don't know so much pure JavaScript.

This is my jQuery code:

$(document).ready(function() {
    $.get('http://jsonip.com/', function(r){
        var ip_address = r.ip;
        my_function(ip_address);
    });
    function my_function(ip_address){
        var url = "Url_to my server hosted on a different domain";
        var data = {number:"1286", ip: ip_address};
        $.ajax({
            url: url, 
            type: "POST", 
            dataType: 'json', 
            crossDomain: true, 
            data: {data: data}, 
            success: function (data) {console.log(JSON.stringify(data));}, 
            error: function (xhr, error) {console.log("There was an error and data was not posted.");}});}
});

What it does: it is pasted in any website, then it picks any visitors ip address and send that as JSON to my server as variable data.

Problem: the code is working perfectly okay in some sites but not all the sites due to jQuery dependency. And I want to remove this and use pure JavaScript.

I am getting great answers but CORS is not working, there failing them. I am using different domains since the site we are sending data to is hosted on another server.

If you're adding this code to a page, why don't you just check if jQuery is present and load it from a CDN, etc. if it isn't? — Sam Hanley
– Sam Hanley, Commented Jan 13, 2015 at 20:03
It should technically work in more sites because the jQuery dependency fixes many cross browser quirks — Christopher Marshall
– Christopher Marshall, Commented Jan 13, 2015 at 20:04
You dont need the first ajax request, your server side should be able to get it from the request headers. You can check if jQuery is loaded with this line if (window.jQuery), as someone already suggested, if it isn't loaded just use the code in this answer to load it in — Scriptable
– Scriptable, Commented Jan 13, 2015 at 20:04
ben, jQuery is JS, you know, so the problem is not the way jQ uses JS but in your code. — Roko C. Buljan
– Roko C. Buljan, Commented Jan 13, 2015 at 20:06
I have tried that, but it will be tired to do for hundreds of websites where the code will be used — ben
– ben, Commented Jan 13, 2015 at 20:08

Community · Accepted Answer · 2017-05-23 12:30:58Z

As mentioned in my commment above, you do not need the first ajax request as you can get this information from the request headers (PHP Example below) from your AJAX request.

To make sure that your website(s) have jQuery loaded you can run a check in your script and load it in dynamically. Using some code from this answer. See below for an example:

// Anonymous "self-invoking" function
(function() {
    // Load the script
    var script = document.createElement("SCRIPT");
    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
    script.type = 'text/javascript';
    document.getElementsByTagName("head")[0].appendChild(script);

    // Poll for jQuery to come into existance
    var checkReady = function(callback) {
        if (window.jQuery) {
            callback(jQuery);
        }
        else {
            window.setTimeout(function() { checkReady(callback); }, 100);
        }
    };

    // Start polling...
    checkReady(function($) {
        var url = "Url_to my server hosted on a different domain";
        var data = {number:"1286", ip: ip_address};
        $.ajax({
            url: url, 
            type: "POST", 
            dataType: 'json', 
            crossDomain: true, 
            data: {data: data}, 
            success: function (data) {console.log(JSON.stringify(data));}, 
            error: function (xhr, error) {console.log("There was an error and data was not posted.");
        });
    });
})();

To get the IP Address from your ajax request: (PHP) Source

if (!empty($_SERVER['HTTP_CLIENT_IP'])) {
    $ip = $_SERVER['HTTP_CLIENT_IP'];
} elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {
    $ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
} else {
    $ip = $_SERVER['REMOTE_ADDR'];
}

Chris Bouchard · Accepted Answer · 2015-01-13 20:23:59Z

1

The annoying part is that you need to do a cross-domain POST to send your data. There's a W3C standard for this called Cross-Origin Resource Sharing (CORS). Check out this tutorial for more info.

You'll want to put this at the bottom of the page. Different browsers handle ready state change events differently, so let's just avoid them.

<script>
    // Once the JSONP script loads, it will call this function with its payload.
    function getip(ipJson) {
        var method = 'POST';
        var url = 'URL of your server';

        // The XMLHTTPRequest is the standard way to do AJAX. Try to use CORS.
        var xhr = new XMLHttpRequest();

        if ("withCredentials" in xhr) {
            // XHR for Chrome/Firefox/Opera/Safari.
            xhr.open(method, url, true);
        } else if (typeof XDomainRequest != "undefined") {
            // XDomainRequest for IE.
            xhr = new XDomainRequest();
            xhr.open(method, url);
        }

        // Create your request body. It has to be form encoded. I'm not sure
        // where you get `number` from, so I've hard-coded it.
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send('number=1286&ip=' + ipJson.ip);
    }
</script>

<!-- Get the IP using JSONP so we can skip implementing that. -->
<script type="application/javascript" src="http://www.telize.com/jsonip?callback=getip"></script>

This probably only works in modern browsers, but it should work in most modern browsers.

answered Jan 13, 2015 at 20:23

Chris Bouchard

8037 silver badges13 bronze badges

2 Comments

ben Over a year ago

Hello chris, How to use Cors is my problem now. I am trying it but it seems not to work. getting this "XMLHttpRequest cannot load my server. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:3000'; is therefore not allowed access. The response had HTTP status code 500."

Scriptable Over a year ago

@ben Doing the Cross domain ajax request with pure JS can be quite tricky, you may get some issues, Most websites will have jquery already and those that dont will have a cached version in their browser, they will of been on one site with jquery before. The code in my answer below ensures you always have jquery available, reduces number of requests and only loads jquery in if its needed so will ensure your code works on all sites. jQuery will handle the browser specific and CORS issues you'll face. I think it would be the best option

Álvaro Martínez · Accepted Answer · 2015-01-13 20:22:52Z

0

Replace $.ready(function...) with document.addEventListener('DOMContentLoaded', function..., false).

Replace $.ajax with XMLHttpRequest:

var xhr = new XMLHttpRequest();

//var data = {number:"1286", ip: ip_address};
var data = new FormData();
data.append("number", "1286");
data.append("ip", ip_address); // As stated by Scriptable in the question comments, your server should be able to get it from the request headers.

xhr.onload = function() { console.log(JSON.stringify(this.response)); };

xhr.onerror = function() { console.log("There was an error and data was not posted.") };

xhr.open("POST", "URL to your server");
xhr.send(data);

edited Jan 13, 2015 at 20:22

answered Jan 13, 2015 at 20:14

Álvaro Martínez

1,0677 silver badges10 bronze badges

2 Comments

ben Over a year ago

this one is attempting to send, but then it gives an error XMLHttpRequest cannot load my server. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:3000' is therefore not allowed access. The response had HTTP status code 500.

Álvaro Martínez Over a year ago

You have to add the Access-Control-Allow-Origin: * header on your server to allow cross-origin requests. Check enable-cors.org/server.html for more info.

Collectives™ on Stack Overflow

Convert jQuery to JavaScript code equivalent

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related