Как использовать ajax для динамического получения графика шины

Question

Я использую ajax для создания веб-сайта, который может отслеживать расписание автобусов SEPTA. Однако моя сеть всегда получала ошибку при отправке запроса на URL-адрес (http://www3.septa.org/hackathon/TransitView/?route=ROUTE_NUAMBER&callback=?).

Это функция, которую я использовал раньше:

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; 
    } 
}) 
} 

Он получил это Erorr сообщение:

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.

Затем я получил модификацию предложение:

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. 

Но я не совсем понимаю, что такое CallBack_function есть. Как я могу сделать мои работы в Интернете?

Answer 1

1) Вы можете указать вашу функцию обратного вызова в вашем JSONP URL:

What is JSONP all about?

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

callback_func функция будет вызываться, когда данные из перегородок были получены, которые затем запустит необходимые продукты:

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) Использовать jsonpCallback свойства АЯКСА в Jquery в:

По состоянию на JQuery 1.5, установив параметр JSONP лжи предотвращает JQuery от добавления "? Обратного вызова" строки в URL или пытаясь использовать «=?» для преобразования. В этом случае вы также должны явно установить настройку jsonpCallback. Например, {jsonp: false, jsonpCallback: "callbackName"}. Если вы не доверяете цели своих запросов Ajax, подумайте о том, чтобы установить свойство jsonp в false из соображений безопасности. 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) Использование метода $ .getJSON: "Обратный вызов ="

JSONP

Если URL-адрес включает в себя строку (или аналогично, как определено API-интерфейсом на стороне сервера), вместо этого запрос обрабатывается как JSONP. Более подробно см. Обсуждение типа данных jsonp в $ .ajax(). 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 
});