I'm using AJAX to present calculation results.
I invoke a PHP file that returns the results, and then I present it on the web page.
Sometimes the calculation takes a long time, and the page gets stuck until the AJAX call has returns the results.
Is there a way to use ajax, and still get the ability to perform other actions on the web page, and don't have to wait until the AJAX call has returned.
I'm using this AJAX call function( a standard function as i know).
function GetCalculation(str)
{
var result ;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
result = xmlhttp.responseText ;
}
}
xmlhttp.open("GET","GetRouts.php?q="+str,false);
xmlhttp.send();
result = xmlhttp.responseText ;
return result;
}
Yes, just pass true as the third parameter to open, then process the result in the onreadystatechange event instead.
Ajax is async if you need your javascript to work with the data send by the request you need to wait for the callback. If you dont need to work with the data from the request ( for example animate something etc...) you can just write your code outside of this function.
Related
I am searching for this from yesterday, Do not know, I am unable to implement, or going in wrong direction.
My currently ajax function which is working with local server
function tooltipajax(r_ID)
{
var str ;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('span'+ r_ID).innerHTML = xmlhttp.responseText ;
}
}
xmlhttp.open("GET","accounteditajax.php?key=" +r_ID,true);
xmlhttp.send();
}
PHP code:
print("<tr bgcolor=\"#EEEEEF\">");
print("<td class='normal' id=\"serialno\" onMouseOver='tooltipajax(this.id)'>
<a class=\"tooltip\" >Serial Number <span id=\"spanserialno\"
class=\"custom info\"></span> </a></td>");
print("<td bgcolor = \"#FFFFFF\" ><b>$serial</b></td>\n");
print("</tr>\n");
How can I get data from another server?
xmlhttp.open("GET","accounteditajax.php?key=" +r_ID,true);
I want to get from
http://iphere/filename.php
If you use use jQuery like so, this works.
function tooltip_ajax(r_ID) {
$.ajax({
url: "http://iphere/filename.php?id=" + r_ID,
context: document.body,
success: function(data) {
if(data) {
$('span' + r_ID).html(data);
}
}
});
}
That's tested with a different server and it works.
In order to retrieve data from another server using AJAX, you will need to utilize JSONP. This is due to Cross-Domain restrictions on AJAX requests. To expand on this further, if you wanted to make an AJAX request from a page located at http://test1.com, to a page / script located at http://test2.com, you would not be allowed.
Check out this article for more information: http://www.jquery4u.com/json/jsonp-examples/
Basically, JSONP involves adding a temporary SCRIPT tag to the page, which CAN load external content. The URL for this SCRIPT tag contains data, and a callback function name. The JSONP should then respond with the data, enclosed in a call to that function. Of course, the one downside is that the target server must support JSONP requests.
One alternative is using a bridge PHP script locally, that utilizes CURL to make the request, and return the information to your page, via AJAX.
For a bit more information regarding utilizing CURL in PHP, take a look at this article: http://codular.com/curl-with-php
I am trying to get data back from a PHP file assigned with GET parameters in an AJAX request:
xmlhttp.open("GET","getMyData.php?name="+name+"&email="+email,true);
Can I call the getMyData.php like that, or it has to be in the root of the project? Now is in the same directory as the javascript file.
Also, if possible, a small example of how to insert the returned data into an input field.
Thanks a bunch!
Here the example
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//xmlhttp.responseText; //content
document.getElementById("myDiv").innerHTML=xmlhttp.responseText; //write inside myDiv
}
}
xmlhttp.open("GET","getMyData.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name="+name+"&email="+encodeURIComponen(email));
xmlhttp.send();
}
Look here get more information and example
Have a look at relative and absolute paths. You will understand how the /, ../ etc. work. You will also see that your example is correct if the PHP file is in the same folder as your web page where the javascript is executed.
About the last part, I'm cutting off a little bit the code (that you can find fully here for example), but here is the point:
if (xhr.readyState === 4 && xhr.status === 200) {
// The datas returned by PHP are in the variable 'xhr.responseText' or 'xhr.responseXml'.
// In this case you can add straight the HTML into a DIV, but you usually have datas in JSON.
// To "transform" your JSON string into a javascript object, use the following:
// var obj = JSON.parse(xhr.responseText)
document.getElementById("myDiv").appendChild(xhr.responseXml) // Don't use 'innerHTML', it is evil.
}
I have an embedded XMLHttpRequest problem;
The flow of data should go like this:
Interface.php uses modifyRecords.js (XMLHttpRequest) to call information from modifyRecords.php, which in turn uses showRecords.js (XMLHttpRequest) to call information from showRecords.php.
If I could somehow accomplish this, it would save a ton of code copying and/or rewriting.
When I backtrack to find where the errors are, there doesn't appear to be any problem showRecords.php and modifyRecords.php both load fine individually, just when AJAX calls another AJAX it totally breaks.
The nitty gritty is this:
My user interface is calling modifyRecords.js which is as follows;
function modifyRecords(cell,report,column,oldValue)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
var xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(cell).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","modifyRecords.php?report="+report+"&column="+column+"&oldValue="+oldValue,true);
xmlhttp.send();
}
modifyRecords.php is calling another AJAX function called showRecords.js;
function showRecords(str,column,nextDiv,oldValue)
{
if (str== null)
{
document.getElementById(nextDiv).innerHTML="----------------------------------------";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
var xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(nextDiv).innerHTML=xmlhttp.responseText;
document.getElementById(nextDiv).value = oldValue ;
}
}
xmlhttp.open("GET","showRecords.php?"+column+"="+str,true);
xmlhttp.send();
}
The problem is that each one of these works in isolation, however, when I use one AJAX function to call a page that is dependent on the second AJAX function, the records do not load.
I know this has something to do with synchronicity, because my only guess is that the referenced page has not finished loading when the referencing function is calling it.
I have tried setting the parameters to "false" for synchronous, instead of the usual asynchronous, however that breaks either function.
What would be the best solution?
I have considered combining all my AJAX functions, which would require a ton of rewrite to make them more generic, and functional for both environments.
Unless I'm much mistaken, you are trying to call your second AJAX script by setting the innerHTML of an element with the first?
Scripts aren't executed when added with innerHTML. Don't know why, it's been an annoyance to me, but you'd probably be better off separating HTML and JS, then putting the HTML in the innerHTML, and eval'ing the JS.
i want to pass js variable to php .my code is follows
function sub(uid){
window.location.href='<?php echo $urlp -> certificationceap(uid) ;?>';
here is some problem
You can't.
The browser makes a request
The webserver runs the PHP
The webserver delivers an HTTP resource to the browser
The browser parses the HTML and executes any JS in it
At this stage, it is too late to send data to the PHP program as it has finished executing.
You need to make a new HTTP request to get data back to it.
Probably something along the lines of:
function sub(uid){
location.href = 'redirect.php?uid=' + encodeURIComponent(uid);
}
check this thread How to pass JavaScript variables to PHP?
You can use ajax to achieve this..... advance apologies if it is not intended answer...
function send_var(js_var_1, js_var_2){
var parms = 'js_var_1='+js_var_1+'&js_var_2='+js_var_2;
if(js_var_1!='' && js_var_1!=''){
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
//your result in xmlhttp.responseText;
}
}
xmlhttp.open("POST","<REMOTE PHP SCRIPT URL>",true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send(parms);
}
}
function download() {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{ //alert(xmlhttp.readyState);
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert (xmlhttp.responseText);
}
}
xmlhttp.open("GET","import.php?file="+document.getElementById('uploaded_file').value,false);
xmlhttp.send();
// location.reload(true);
}
if I put alert and monitor xmlhttp.readyState then it shows me that its status does turn 4 and it does go in the if statement, if I don't monitor it with alert then it doesn't go in the if statement but I know import.php is working because I can see the changes in the database. I don't know whats going on...can anyone help.
Thanks
thats because the location.reload(true); is reloading the page, and not waiting for the xmlhttp call to complete
UPDATE:
try setting the 3rd parameter in the xmlhttp.open call to true
from the docs:
A Boolean indicator of whether the
call is asynchronous. The default is
True (the call returns immediately).
If set to True, attach an
onreadystatechange property callback
so that you can tell when the send
call has completed.
http://msdn.microsoft.com/en-us/library/ms757849%28v=vs.85%29.aspx