Tutorial

• start using PlainAjax
• send ajax request to the server
• post data from HTML input elements
• inplace editor
• autoresend (implement a web-chat)

Auto-repetition of Ajax requests

Task description

Implementing web-based a chat box

Working example

Chat box

Implementation steps

• Create a HTML div to contain the list of submitted messages
• Create a HTML input field for the new messages
• Create an HTML button and make it call PlainAjax
• Configure the PlainAjax request to submit the new message
• Set up a PlainAjax request for auto-resend (for refreshing the chatbox)

The HTML Code

<div id="chatmessages">
</div>
<div id ="messageinputs">
  <input type="text" name="message" value="" />
<input type="button" value="Submit message" onclick="plainajax.request('respurl: chat.php; resultloc: chatmessages; paramloc: messageinputs;');" />
</div>
<script type="text/javascript">
  plainajax.request('respurl: chat.php; resultloc: chatmessages; autoresend: 3000;');
</script>

Note: the server-side script stores the new message if receives, then displays the list of already received messages

Check another example on how to

• send an Ajax request to the webserver and display its response
• post data from HTML input elements to the server using Ajax
• autoresend (implement a web-based chat)