JSFiddle - React, Tailwind, and code Playground

by Danny Michaelis

HTML

<p>
    The goal of this was to take a string, extract substrings of length 6 or more and send them via POST request to a given server in a CSV format so that the server could parse it later. Javascript comes with a fair amount of string manipulation built in. Assuming that the input will always be a string, it is split on the spaces and put into an array. That array is then filter by length and then put back together in a CSV format. Once the string is ready it had to be sent to the server via XMLHttpRequest. This is the standard method for passing content back and forth between the client and server. Browsers generally use the GET request to get web content from a given server. In this case we are using POST, because we want to send information to the server. It is also worth noting that this is being done asynchronously so we don't have to wait for the server to move on. The given server was "http://example.org/longwords.js", though it cannot accept this content because it has not been set up to share cross origin resources. In other words it has not granted us permission to give and get content from it. I tried an additional server from test-cors.org, which is built to test requests to servers. The server can be configured for all sorts of configurations. The requests sent there work provided that the Content-type is set to text/plain, instead of text/csv. Results of each request is sent directly to the console.
</p>

JavaScript

function is_string_long_enough(input_string){
    return input_string.length > 5;
}

function extract_large_strings(input_string) {
    var split_input_string_array = input_string.split(" ");
    var strings_longer_than_five = split_input_string_array.filter(is_string_long_enough);
    var filtered_strings_in_CSV_format = strings_longer_than_five.join(",");
}

function ajax_POST(string_to_post, url) {
    var http_connection = new XMLHttpRequest();
    http_connection.open("POST", url, true);//true indicates that this should be done asyncrhonosly

    //Callback functions for the server
    http_connection.onload = function () {
        var text = http_connection.responseText;
        console.log('Response from server request to to ' + url + ': ' + text);
    };

    http_connection.onerror = function () { //Few details are avalible in case of an error, so it must default to what ever is printed on the console
        console.log('There was an error see consol for details');
    };

    http_connection.setRequestHeader("Content-type", "text/plain");
    var longwords = string_to_post;
    http_connection.send(longwords);
}

function longwords(text, url) {
    extracted_strings = extract_large_strings(text);
    ajax_POST(extracted_strings, url);
}

var example_url = "http://example.org/longwords.js";
var test_200_url = "http://server.cors-api.appspot.com/server?id=4684155&enable=true&status=200&credentials=false";
var test_404_url = "http://server.cors-api.appspot.com/server?id=4684155&enable=true&status=404&credentials=false";

var sample_text = "a ab abc abcd abcd abcde abcdef abcdefg abcdef abcde abcd abc ab a"

//longwords(sample_text, example_url);     //This request will fail because it has not allowed me access
//longwords(sample_text, test_404_url);    //This request is set to fail
longwords(sample_text, test_200_url);      //And this request is just right.