使用ajax加载内容

i am using two box

<div id='box' onclick='loadFun();'>Load Content</div>
<div id='loading'></div>

Function

function loadFun() {
 $("#box").html('wait..').load('/content.php');
}

i need it such that when i click DIV box text wait.. should appear in DIV loading and when content loads fully DIV loading should become empty.
Also
can we set the time that if content dont load within 20 secs then the request should be canceled

try this

function loadFun() {
 $("#loading").html('wait..');
$("#box").load('/content.php',function(){
 $("#loading").html('');
});
}

The .load has following parameters :

.load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )

Now you are only using : URL.

So using the Function at Complete parameter solve your problem like @Hushme said :

function loadFun() {
     $("#loading").html('wait..');

     $("#box").load('/content.php',function(){   //here he loaded the content, and whenever Content loading completes he cleared the waiting msg...
     $("#loading").html('');

    });
}

Here, what he does is that, Whenever the Content from the Content.php get loads successfully, remove the Wait... message inside the #Loading Div.

Hope you got clear picture.

I guess.. You can use the HushMe's answer for showing the loading message.. I would like to answer about cancelling the request if content is not loaded in 20 secs. Firstly jquery .load method internally uses $.ajax method which uses the POST method if data is provided as an object; otherwise, GET is used. So for SETTING TIMEOUT you can simply use following ajax call, which throws error after request times out. Additionally in the error callback you can check whether error occured because of timeout and can provide custom message like "Request timed out..."

$.ajax({
url: "/content.php",
error: function(jqXHR, textStatus){
    if(textStatus == 'timeout')
    {     
         alert('Request timed out..');         
    }
},
success: function(){
    //do something
},
timeout:20000
});

Hope this helps..