What technology does Facebook use to auto-update information on a page without reloading it?
For example, while someone is viewing his profile if he receives a new message the inbox number auto-updates in the top bar. Same with wall posts, etc. Code-wise how is this managed?
They are using several new technologies like AJAX and History API.
I strongly recommend you to use jQuery or another framework for AJAX and History.js for the History API.
the core javascript function set_timeout() is the man! Every x seconds the server is queried to fetch new results, updates etc. FB uses AJAX to get the info from the server and JS to update the page.
Facebook open a connection using AJAX which then hangs and hangs. The server doesn't send anything or respond to your browser unless, of course, a notification. Eventually, your browser may give up and disconnect from Facebook in which case the javascript will create a new connection and the process continues.
This is superior to polling the server every few seconds as it reduces load and makes load more predictable too.
Here's more info: http://en.wikipedia.org/wiki/Comet_%28programming%29
use setInterval on a function which makes an Ajax call to a file in which you have a MySQL query which checks something.
setInterval( "refresh();", 60000 );
refresh = function(){
var URL = "file.php";
$.ajax({ type: "GET",
url: URL,
succes: function(data){
if(data){
//change stuff
}
}
});
}
that should be a good starting point
coba gunakan script ini..
autocallajax.php
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(document).ready(function(){
var callAjax = function(){
$.ajax({
method:'get',
url:'load.php',
success:function(data){
$("#sample").html(data);
}
});
}
setInterval(callAjax,5000);
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<?php
<div id='sample'>100 </div>";
?>
</body>
</html
load.php
<?php
mysql_connect("localhost","root","siantarman");
mysql_select_db("konsultasi") or die("<br><br><hr width=350 size=1 align=left>
<font color=red><b>Database belum tersambung!</font></b>
<br>Hubungi administrator anda!<br>" . mysql_error());
$sql_info=mysql_query("select jumlah from data_konsultasi where id = '9'");
$r_data=mysql_fetch_array($sql_info);
echo"$r_data[jumlah]";
?>
selamat mencoba..
Related
I have an AJAX request, processing of AJAX request is complex and lengthy. The problem is that this lengthy request freezes browser. I mean when AJAX request is in process then no matter if I click any link/button from page or type some Url of same website in browser address bar it does nothing and keep waiting fro AJAX request response, once AJAX response arrives back other processes start working. I am using async: true with AJAX request.
Here is the code I am using. Its a simple page having nothing else but this jQuery AJAX request. My server side PHP.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: 'http://www.mywebsite.com/doprocessing',
async: true,
success: function () {
alert('done');
}
});
});
</script>
</body>
Why this is happening? How can I solve this?
PS: Before you mark this duplicate, I have checked almost all similar questions on StackOverflow. No solution is working in my case (though solution in most cases was using async: true which I am already doing.
Thanks in advance,
The reason, why any of the links of the same website are not working during ajax, is that your script is locking the session in the server.
You could either not to use session for this script, or finish session after you are sure that this is correct user etc, but before starting sending emails (or doing anything else lengthy).
Use session_write_close() before starting sending emails in PHP for this.
Alternatively you can implement your own asynchronous session handler.
How to check data from mysql realtime using ajax post requests ?
I use this code for check in mysql , if user have a new message it's will be echo YOU HAVE NEW MESSAGE text on realtime.
and this code will post to get_data.php every 1 sec , i think it's very work hard for server and client ,
when i try it's not work, How can i do that ?
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<form id="idForm"/>
<input name="uid" value="1234"/>
</form>
<div id="result_data"></div>
<script type="text/javascript">
$(function(){
setInterval(function(){
$.ajax({
type: "POST",
url: get_data.php,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
$('#result_data').show();
}
});
},1000);
});
</script>
Your best practice would be to go with WebSockets.
The protocol overhead is much smaller than HTTP and you will play PING and PONG with the server to check for new data.
With websockets your client could send a message by emitting data your server would receive this and e.g. broadcast it out to other clients.
Try to get your head in Socket.io that is what I did to understand this ;)
Asumming your php file is correct, it might help if you wait for your document to be ready in your javascript
$(document).ready(function(){
//Your code
});
It's a minor thing but sometimes it break scripts
I have a PHP script that takes around 1 minute 20 seconds to load as it fetches data from other websites. However I need some way to show the user that the page is loading. Something like 'This page is loading and may take up to 2 minutes' with a .gif loading images.
I have tried jquery:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script>
// Put an animated GIF image insight of content
$("#content").empty().html('<img src="http://www.website.com/images/loading.gif" />');
// Make AJAX call
$("#content").load("http://website.com/page.php")
</script>
<div id="content">
Content to load here!
</div>
</body>
</html>
But the page is blank (don't know if i'm implementing something wrong).
Is there any other way of doing so?
I have looked at other questions but can't find anything that matches what I need, that I can get to work.
Thanks,
Jack.
You won't get a response from the server, until the script has finished loading. Therefor you have to 'prepend' the page with another page, which shows the loading part. That page should call the script you want to execute, through for example an AJAX call.
You can use an AJAX call with beforeSend and success events:
$.ajax({
url: "http://website.com/page.php", type: "POST",
beforeSend: function() {
$("#content").html('<img src="images/loading.gif" />');
},
success: function(data) {
$("#content").html(data);
}
})
you got the script tags wrong. you need to close the script with the src call, and open a new one for the actual code
Also, you need to load the DOM before using JQuery to fetch objects. You can use $(document).ready() or place your script after the DOM element.
Where is your jquery loaded in the file? If its loaded at the top, you should wait for the dom to load before executing its JS.
http://api.jquery.com/ready/
I am using ajax for retrieving data from my remote server when i am posting the ajax url directly in the address bar of browser, i am getting the data but when i am doing ajax call to that url in javascript file , it is showing error.I am pasting my code here.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$.ajax({
url:"http://www.appitechture.com/api/index.php?action=getContactDetails&id=96",
type:'get',
datatype:'json',
success:function OnSuccess(data , status){
alert(data);
} ,
error: function OnError(request , status , error){
alert('error');
}
});
</script>
</head>
<body>
<div id="images"></div>
</body>
</html>
so please if any one knows its solution please tell me.
Thank's
puneet
Are you trying to do a crossdomain AJAX request? Bad idea, read this article http://en.wikipedia.org/wiki/Same_origin_policy
If it is not the same domain, you need to use JSONP (JSON with padding). This is due to Same Orgin Policy, as Bogdan Burim states.
jQuery.getJSON can help you with this in a easy way. It will include a script tag like this on your page.
<script type="text/javascript"
src="http://example.com/jsonp?callback=parseResponse">
</script>
You will also need to change the response of the remote server to include the callback var like this:
parseResponse({"bar": "foo", "foo2": "bar2"});
You can also have a look at easyXDM:
easyXDM is a Javascript library that enables you as a developer to
easily work around the limitation set in place by the Same Origin
Policy, in turn making it easy to communicate and expose javascript
API’s across domain boundaries.
Wikipedia have a nice article about JSONP.
Using Javascript (or Ajax) I want to connect to a page (a .php page) every 10 seconds. This will be done in user-side (browser) within a web page. Just, I'm trying to see the online users. I have about 1-2 visitors daily, in my personal web site.
Using jQuery's $.post() method:
setInterval(function(){
$.post("getCount.php", function(result) {
// do something with result
}, "html");
}, 10000);
I'm assuming you have a good reason to query your own local script. If you want detailed information about who is visiting your site, when, and from what types of environments (machines, browsers, etc), I'd suggest you look into implementing something like Google Analytics.
This Javascript will read the page usersonline.php every 10 seconds and place the contents onto the current web page.
<html>
<head>
<script>
var xmlrequest;
function gotnewdata()
{
if(xmlrequest.readyState == 4)
{
document.getElementById("output").innerHTML = xmlrequest.responseText;
setTimeout("loadpage();", 10000);
}
}
function loadpage()
{
xmlrequest = new XMLHttpRequest();
xmlrequest.open("GET", "usersonline.php", true);
xmlrequest.onreadystatechange = gotnewdata;
xmlrequest.send(null);
}
</script>
</head>
<body onload="loadpage();">
<h1>My Page</h1>
<p>USERS ONLINE:</p><p id="output"></p>
</body></html>
<html>
<body>
<form target='userCountFrame' action='http://www.google.com'></form>
<iframe name='userCountFrame'></iframe>
<script>
setInterval(function(){
document.getElementsByTagName('form')[0].submit();
}, 10 * 60 * 1000);
</script>
</body>
</html>
change the url accordingly, save the above code as count.html on your desktop, and open it using Firefox