How to use ajax to get dynamically get the bus schedule

Question

I am using ajax to make a website that can monitor the SEPTA bus schedule. However my web always got error when sending request to the URL(http://www3.septa.org/hackathon/TransitView/?route=ROUTE_NUAMBER&callback=?).

This is the function that I used before:

function getSchedule(){
var route = $("#route");
var myURL = "http://www3.septa.org/hackathon/TransitView/?route=" + route.val() + "&callback=?";
$.ajax({

    type: "GET",
    url: myURL,
    contentType: "application/json; charset-utf-8",
    data: "()",
    datatype: "jsonp",

    success: function(json){
            var myTable = "<tr><td>Vehicle ID</td> <td>Block ID</td> <td>Direction</td> <td>Destination</td> <td>Delay</td></tr>";
            for(var i=0; i<json.bus.lenght; i++){
                var vehicleNumber = json.bus[i].VehicleID;
                var blockID = json.bus[i].BlockID;
                var direction = json.bus[i].Direction;
                var destination = json.bus[i].destination;
                var offset_sec = json.bus[i].Offset_sec;
                var offset_sec_n = parseInt(offset_sec);
                if(offset_sec_n >= 120){
                    var delay = "Delay";
                    }
                else{
                    var delay = "On Time";
                    }

                myTalbe += "<tr><td>" + vehicleNumber + "</td><td>" + blockID + "</td><td>" + direction + "</td><td>" + destination + "</td><td>" + delay + "</td></tr>";
            }

            myTalbe = "<tb>" + myTable + "</tb>";
            document.getElementById("schedule").innerHTML = myTable;
    },

    error: function(xhr, ajaxOptions, thrownError){
        document.getElementById("schedule").innerHTML = "Error fetching "
                     + myURL;
    }
})
}

It got this erorr message:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Then, I got a modification suggestion:

url: "http://ww3.septa.org/Hackathon/TransitView/",
data: {route: route_val}, //where route_val is whatever variable stores the route number. it can be named route, I just wanted to clarify the key vs value
jsonpCallback: "callback_func" //note that this is a string.

But I am not really understand what the CallBack_function is. How can I make my web works?

@Phil - I don't think this is a duplicate of that other question (not that they don't have some points in common, of course). This one is already trying to use JSONP, and the OP is asking about how to use the callback function. This seems more specific. — nnnnnn, Aug 01 '16 at 03:43
Two typos... 1) Remove `data: '()'` as you're already specifying the query params in the URL and "()" isn't anything useful anyway. 2) Change `datatype` to `dataType` (capital "T") — Phil, Aug 01 '16 at 05:02
@nnnnnn you're right. I assumed the remote site wasn't JSONP enabled but it is — Phil, Aug 01 '16 at 05:03

score 0 · Accepted Answer · answered Aug 08 '16 at 06:28

1) You could specify your callback function in your jsonp url:

What is JSONP all about?

var myURL = "http://www3.septa.org/hackathon/TransitView/?route=" + route.val() + "&callback=callback_func";

callback_func function will be called when data from the SEPTA has been retrieved, which will then run the stuffs that you want:

function callback_func(json) {
      var myTable = "<tr><td>Vehicle ID</td> <td>Block ID</td> <td>Direction</td> <td>Destination</td> <td>Delay</td></tr>";
      for(var i=0; i<json.bus.lenght; i++){
            ...
      }
}

2) Utilize the jsonpCallback property of the jquery's ajax:

As of jQuery 1.5, setting the jsonp option to false prevents jQuery from adding the "?callback" string to the URL or attempting to use "=?" for transformation. In this case, you should also explicitly set the jsonpCallback setting. For example, { jsonp: false, jsonpCallback: "callbackName" }. If you don't trust the target of your Ajax requests, consider setting the jsonp property to false for security reasons. https://api.jquery.com/jquery.ajax/

var myURL = "http://www3.septa.org/hackathon/TransitView/?route=" + route.val();

$.ajax({
    type: "GET",
    url: myURL,
    datatype: "jsonp",
    jsonp: false,
    jsonpCallback: function(json){
            var myTable = "<tr><td>Vehicle ID</td> <td>Block ID</td> <td>Direction</td> <td>Destination</td> <td>Delay</td></tr>";
            for(var i=0; i<json.bus.lenght; i++){
               ...
            }
    },
    ...

});

3) Utilize the $.getJSON method:

JSONP

If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.https://api.jquery.com/jQuery.getJSON/

$.getJSON("http://www3.septa.org/hackathon/TransitView/?route=" + route.val() + "&callback=?", function(json){
   //do what you want with the response json data
});

How to use ajax to get dynamically get the bus schedule

1 Answers1