I need to load some markers into an embedded Google Map based on what a user searches. The markers are determined by lng/lat coordinates in a MySQL table.
The map is created in a Javascript function in a separate Javascript file (so not embedded in the HTML) and it takes an XML file as input. I created a PHP page (called 'xml.php') that can dynamically generate the XML file I need based on whatever the user searchers. Right now I'm manually typing in POST information in my Javascript function, so it calls 'xml.php?query=hello'
I'd like to somehow send the original query to the Javascript file, so that I can append it to the end of 'xml.php'. This way, everything is done automatically from the original search, to generating an xml file, and reading it to create markers.
I've seen solutions that are fairly simple when the Javascript is embedded in tags but I'm trying to avoid that
Here's my function that calls for an XML file:
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
The XML information will change based on what the user originally searched though. So it's actually a php file (xml.php) that performs an SQL search and echos it out in XML format. I can control the SQL search by adding POST info when calling xml.php
downloadURL('xml.php?query=whatever', somefunction())
But that appended POST data needs to be dynamic too.
So the overall flow is:
Search page --> Sends data to results page, which calls on Javascript file to create map --> Javascript file calls on XML information to put map in results page
Could show us some code?
have you tried localstorage?
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
You can use this to set some information and then, call the post method using ajax.
but It is only useful if you want to keep some data in session.
references: [1] and [2]
Related
I am new to both php and javascript and having trouble understanding how to communicate between the two. I have a php array and I used json_encode() to turn it into json and now I just don't know what to do from there. I have just been looking around and haven't been able to find an answer of what to do from there. Do I print it? If I do print it... how do I used javascript to grab it. I can't use the php variable name since javascript doesn't understand it. I am just not grasping this concept.
The most popular way to make a Javascript script communicate with a PHP script is via Asynchronous Javascript And XML (AJAX) requests.
In AJAX requests, your javascript code calls the PHP script needed, sending to it any required parameters. Then, your PHP script should print (echo) the result (the JSON encoded array in your case), and when it does, an event gets fired in your javascript code, which you can handle accordingly.
In Javascript, there are two main ways of performing AJAX requests:
1- Using the XMLHTTPRequest object:
In this method, we are using a Javascript XMLHTTPRequest object to send the request to our PHP script, and we handle its onload event to get the response and do something with it :
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "some_url.php?param1=123");
xmlhttp.send();
xmlhttp.onload = function() {
//here the response from the PHP script is saved in the this.responseText variable
//parsing the JSON string we got into an actual array
var myArray = JSON.parse(this.responseText);
//do something with the array
}
(note that we can also handle the object's onreadystatechange, but onload is a bit simpler to handle)
2- Using a promise (fetch):
fetch("some_url.php?param1=123")
.then(function(response) {
return response.text();
})
.then(function(data)) {
var myArray = JSON.parse(data);
//do something with the array
});
I am aware of how REST calls work from within a Java Web application. E.g. when a URL is reached its method will be called using HTTP.
For example:
#GET
#Path("people/{id}")
public Response getPersonWithId(#PathParam("id") id) {
//return the person object with that Id
}
What I am unsure of is how this links to the front end?
Is the role of the UI ( i.e. javascript ) just to take a user to the specific URLs so that the back end methods can be called?
E.g. if a user presses a "get details" button, does the button just redirect them to this URL that deails with returning the details, and the back end functionality is then called?
WebService is not actually linked or tied to the front end similar to webapp. Instead, webservice is a service that provides result in the form of JSON/XML, Plain text Format according to request type(get, post, update, delete) and hence, the service can be used by any multiple front end application(not only web application but also smartphone app, desktop app etc.). Also, webservice can be on totally different server.
Let me give you a scenario:
Suppose, you have an front end web site ABC-Website and a backend
webservice on host: www.xyzservice.com/api with following methods:
/product - get request that return all product as list in json format.
/product/id - get request return product detail given id in json
format.
Now, if you simply type in browser www.xyzservice.com/api/product then
all product list will displayed in json format in the browser. That means, You can also read data from webservice directly in browser without front end system and i.e. webservice is not linked/tied to any front end.
Now, you want to use this webservice in your ABC-Website to display all the product list:
You call www.xyzservice.com/api/products and get JSON object that you can use to display in your html page.
<button type="button" onclick="getProducts()">Click Me!</button>
function getProducts(){
$.ajax({
type : "GET",
contentType : "application/json",
url : "http://www.xyzservice.com/api/product",
dataType : 'json',
timeout : 100000,
success : function(data) {
// now you have "data" which is in json format-same data that is displayed on browser.
displayDate(date);
},
error : function(e) {
//do something
},
done : function(e) {
//do something
}
});
}
function displayDate(){
//your codes to parse and display json data in html table in your page.
}
Lets say that your client is a website and you have a Java API.
In the javascript of your website you could do a request to the backend to retrieve the data and then present it to the user. Your javascript (using jQuery as an example) could look like the following:
// here it prints the data retrieved from the backend route (/people/{id}
$.get('http://localhost:3000/people/3',function onDataReceived(data) {
console.log(data);
})
As pointed out, jQuery is not necessary. Here is an example using regular javascript:
this.getRequest('http://localhost:3000/people/3', function onReceived(data) {
});
function getRequest(url, callback)
{
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
callback(xmlHttp.responseText);
}
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
in javascript, usually you want to do these request at the background your webpage.
Im gonna try to explain this with an example:
Imagine you have a page that displays a list of cars for sell which can be fetched from the web service provided by java back-end. The back-end have an url that will respond to GET method with a JSON (or XML) object.
What you have is a HTML file where you write a structure for the displayed data and also includes a javascript file that asynchronously calls this webservice, GETs the data, parses the JSON and then it can manipulate it to the form you want to display it on the page.
In different example you can validate forms on the background, or save the forms or do any other stuff that works with the web service API.
For making these asynchronous request you can use different libraries.
Most used is ajax included in jQuery framework or fetch as n standalone library.
I have noted that in my program every time when I want to declare a object, for example list, save, add, remove I write the following every time in each function.
ajax.open("Get", "./route/action",true);
ajax.send();
I want to do something like this.
//this.ajax.get('./route/action').update('ajax-content');
./route/action // this is path to my Action class-using servlet
Every time I have to open a connection, give the path to my action class which is a servlet and then send. I do this every time I want to load a list, delete or update.
How can I write a function that I will be just be:
this.ajax.get('./route/action');
// 'ajax.content' is the id of the div where I
// want to show the list,where after updating AJAX show the update list to the user.
update('ajax-content');
For example after adding a user I can see the added user without reloading the whole page. I am working on a maven project using Java EE, Servlet and JavaScript.
Try this:
function ajaxRequest(AJAXurl, callbackElementID){
x = new XMLHttpRequest();
x.open("get", AJAXurl, true);
x.onreadystatechange = function() {
if (x.readyState == 4 && x.status == 200) {
document.getElementById(callbackElementID).innerHTML = x.responseText; //Will send the received data to the element passed in the function
}
};
x.send();
}
Use as following:
ajaxRequest("/somefile.php", "elementID"); //This will send recieved data to the element with "elementID" as id
Note: The way this is built is only for GET requests. Change code if you want POST request.
I found many posts with this topic. But the solutions I found is not much unsuitable for me. Some experts advised to change code structure, but I am not sure how can I do that.
What I want:
1) Get a list of movie from SQL database
2) Fetch information from a website for each movie
Problem I face: PHP MAX_TIMEOUT occurs.
Solution I thought: call async req for each movie, separately
Bottleneck: Too many async requests
Can you please advice how to implement that (if possible only JS, not jquery please)?
Some solutions from web:
1) Use ASYNC = FALSE.... I don't want to use SYNC req, pointless of using Ajax then
2) Collect all data, then make Ajax call once ... well, I did that first .. but it is a long script (fetching movie info from web), so ultimately causing PHP MAX_TIMEOUT
3) increase PHP MAX_TIMEOUT ... not feasible, I don't know how much to increase.
JS
function loadData(mArray){
mArray = [{"movieid":"1","title":"10 Things I Hate About You"},{"movieid":"2","title":"100 Girls"}]; // TO SIMLYFY, I PUT THIS CODE HERE .. NORMALLY I GET THIS ARRAY USING ANOTHER AJAX CALL
for (var i = 0; i < mArray.length; i++) {
var obj = mArray[i];
webAjaxcall(obj["mid"],obj["title"]); // DEFINITELY NOT A GOOD IDEA
}
return true;
}
function webAjaxcall(mid,title){
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
//DO SOMETHING
}
}
xmlhttp.open("POST","file2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
params = "title="+title+"&mid="+mid;
xmlhttp.send(params);
}
Just in case anybody wants to know how I populate the JS array:
FILE 1
$sql = "SELECT `movieid`,`title` FROM movielist";
$result = mysql_query($sql) or die(mysql_error());
while($row=mysql_fetch_assoc($result)){
$output[] = $row;
}
exit(json_encode($output));
FILE 2
$json=file_get_contents("http://www.website.com/?t=".rawurlencode($moviename));
$info=json_decode($json);
DO SOMETHING
AJAX TO GET MOVIELIST
var xmlhttp=new XMLHttpRequest();
var myarr;
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
myarr = xmlhttp.responseText;
loadData(JSON.parse(myarr));
}
}
xmlhttp.open("POST","file1.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
params = "fname=<?php echo $ses_id;?>";
xmlhttp.send(params);
Note: ASYNC = FALSE means synchronous, which means everything is going to happen in sequence, one call waiting for the previous, and ultimately results in blocking code.
Solution / Opinion: assuming that the site (or API) where you're pulling data can't handle multiple results in a single request, the only way you'll be able to handle this volume of looping ajax requests is to cache the ajax results directly in your SQL db:
::pseudo-architecture::
Let's assume the following PHP files:
index.php
Displays your results
Handles loop logic to display your movies using a single SQL query
Results that are not cached display a "loading" indicator
Write a $(document).ready() function that loops through all the "not-cached" movies, asynchronously calls get.php with appropriate GET parameters for each entry that wasn't already cached. This way it doesn't affect the page load time, as it occurs after the page has already loaded.
::pseudocode::
for movie in movies
if object has cached data and date retrieved is less than [some time ago]
return data from SQL db
else
display a "caching in progress" notification for that title
send GET request to get.php
Note: you might need to queue/delay your requests to get.php depending on how powerful your server is, lest you get 1000 separate threads running at once.
get.php
Example url: http://www.yoursite.com/get.php?name=superman&year=1980
Retrieves $_GET parameters sent from your index.php's ajax loop and forwards a request to your 3rd party API/website.
You want this to be asynchronous, throwing a connection-close ASAP (see how to do that)
Think of this like an API "proxy"
::pseudocode::
send 200 ok status code and connection-close header
get $_GET parameters
retrieve API data for your movie by sending $_GET parameters
cache to your SQL db once data is returned
Ultimately, the page loads in realtime, and in order to see the new data, you'd need to refresh the page (or if you want to get REALLY fancy, do something with WebSockets that notifies the client).
I have a JavaScript map that takes some coordinates from a django view/function when the template page first loads up like this:
<script type="text/javascript">
...
map.setCenter(new f.LatLng{{lat_long}}, 11);
...
</script>
I also have another function on the same views.py file handling an ajax request that does some calculations and returns new coordinates that supposed to update the same spot where {{lat_long}} tag is.
So in a way I should make the {{lat_long}} coming from the function when the page first loads up disappear and replace it with a new {{lat_long}} that's coming form the function handling the ajax request.
What would be the best way to go about this so both functions can update the same lat/long in the javascript code above? Real examples will be truly appreciated.
What Chris said is correct. You want to dynamically update the value from the server. Putting the code where you have it now just does it when the page is loaded, you need to use an AJAX request to keep asking the server for the latest value.
What you need to do is make another Django View that just returns the latitude and longitude, JSON being the easiest way (i.e. in the form {"latitude": 12.2, "longitude": 11.1}).
Your view will do the following:
Get latitude/longitude values from models
Convert to JSON format
Return a HTTPResponse object using render_to_response or whatever
On your client side, here is an example using the jQuery Javascript library to do an AJAX request:
<script type="text/javascript">
//Run When page first loads
map.setCenter(new f.LatLng{{lat_long}}, 11);
var updateLatLng = function () {
$.ajax({
type: "GET",
url: "/url/to/latlng/view",
data: "mapID=7", //Whatever extra parameters you need will go here
success: function(data) {
//This is run when we get data back from the server,
//If you send back the data in JSON format
//Then you can access the data using "data.latitude" and "data.longitude"
map.setCenter(new f.LatLng(data.latitude, data.longitude});
}
});
};
//Call updateLatLng every two seconds
window.setInterval(updateLatLng , 2000);
</script>
You're dealing with different points in time here.
Django renders template, calculates lat_long and feeds it in.
Rendered page is sent to client.
Browsers loads page and individual content resources, including your AJAX scripts.
AJAX eventually runs, fetches new lat_long from server and returns it to client.
Success function of AJAX request receives data and does something with it.
The point is that the value has long been set by the on page script before the AJAX request returns a new one. They're not really in competition here. If you want to change the map center based on the new value for lat_long, then just recall map.setCenter with the new value in your AJAX success method.