AJAX - môj prvý test

Javascript vložený v HTML hlavičke obsluhuje kliknutie na odkazy menu v HTML kóde funkcia ajaxRequest(). Funkcia ajaxResult() spracuje hodnoty vrátené serverom.

<?xml version="1.0" encoding="utf-8">
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>AJAX Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript">

		// diskuse.jakpsatweb.cz/index.php
		// msdn.microsoft.com/workshop/author/dhtml/reference/properties/onreadystatechange_1.asp
		// podrobne www.peej.co.uk/articles/rich-user-experience.html
		// strucne www.mousewhisperer.co.uk/ajax_page.html
		
		var req = null;

		function init() {
			req = getObj( "Msxml2.XMLHTTP" );
			if( !req ) 
				req = getObj( "Microsoft.XMLHTTP" );
			if( !req ) {
				if( typeof XMLHttpRequest!="undefined" )
				req = new XMLHttpRequest();
			};
			if( !req ) {
				alert( "Našeptávač nefunguje ve vašem " + "neschopném prohlížeči." );
			}
			self.encFunc = encodeURIComponent ?
			encodeURIComponent : escape;
		}
		
		function getObj( obj ) {
			try { return new ActiveXObject( obj ); }
			catch(e) { return null; }
		}
		
		function ajaxRequest( urlCode ) {
			var url = "http://localhost/___2/ajax/content__01.php?page=" + urlCode;
			if( req != null ) {
				req.onreadystatechange = ajaxResult;
				req.open( "GET", url, true );
				req.send( null );
			}
		}

		function ajaxResult() {
			if( req.readyState == 4 ) {
				if( req.status == 200 ) {
					try {
						document.getElementById( "content_in" ).innerHTML = eval( "req.responseText;" );
					}
					catch( e ) {
						alert( e.description );
					}					
				}
				else {
					document.getElementById( "content_in" ).innerHTML = "Problem: " + req.statusText;
				}	
			}
		}

	</script>
</head>
<body onload="init();">
<div id="page">
	<div id="content">
		<div id="header">
		</div>
		<div id="menu">
			<ul>
				<li><a href="index.php?page=o_nas" onmouseover="ajaxRequest('o_nas')">first</a></li>
				<li><a href="index.php?page=galeria" onmouseover="ajaxRequest('galeria')">second</a></li>
				<li><a href="index.php?page=akcie_a_vystavy" onmouseover="ajaxRequest('akcie_a_vystavy')">third</a></li>
			</ul>
			<input name="ajax" type="submit" onclick="ajaxRequest()" />
		</div>
		<br style="clear: both; float: none;" />
		<div id="content_in">...</div>
	</div>
	<div id="break"> </div>
</div>
</body>
</html>

PHP

Kód na strane servera obsluhujúci volanie Javascriptu. Preberá jediný parameter page (z premennej GET), podľa ktorého vyberie obsah, ktorý sa má zobraziť klientovi:

<?php

	switch( trim( $_GET['page'] ) ) {
		case 'o_nas':
			$text = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit...';
			break;
		case 'galeria':
			$text = 'In fringilla scelerisque turpis...';
			break;
		case 'akcie_a_vystavy':
			$text = 'In est nisl, vehicula in, porta in, lobortis pulvinar, tortor. Etiam quis nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum neque erat, ultricies quis, elementum at, congue et, ipsum. In hac habitasse platea dictumst. Sed non nisl eget felis vulputate iaculis. Nullam a dui a pede laoreet aliquam. Vivamus tellus. Nunc quis ante in purus commodo tincidunt. Pellentesque nibh risus, convallis in, porttitor quis, nonummy eu, nisi. Praesent libero turpis, vulputate id, ullamcorper quis, blandit nec, nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pharetra. Suspendisse quis lorem. Integer egestas. Etiam viverra massa quis neque. Sed ornare molestie eros...';
			break;
		default:
			$text = '...';
	}
	
	header( 'Content-type: text/html' );
	echo $text;
	
?>


	Sajax

Generátor typoscriptu

Vytvára typoscript pre bežné použitie. Generátor je jednoduchý na obsluhu, stačí vyplniť zopár položiek formulára.

rtgx

AJAX - môj prvý test

PHP

Generátor typoscriptu

Odkazy