Arquitetura para HTML 5 acessar banco de dados remoto

Assuntos Gerais
#1

Oi pessoal estou começando a utilizar o HTML 5, porém não acho exemplos de como fazer ele acessar banco de dados remoto.

Eu sei que o HTML e JAVASCRIPT não acessam banco de dados, mas de qual maneira eu poderia estar acessando?

#2

Não é boa prática expor um banco de dados para ser acessado diretamente por um cliente na internet. O correto é criar um web service que faça o acesso ao banco e fazer a aplicação HTML 5 consumir esse web service.

#3

O uso de WebService me parece uma das melhores opções para ser usada pelo javascript.

Você teria algum exemplo com listagem de dados, insert, delete, alter and update?

Pois irei usar o localStorage para um armazenamento temporário e quando houver conexão disponível, irei consumir esse WebService.

#4

Dá uma olhada nisso:
http://coding.smashingmagazine.com/2010/10/11/local-storage-and-how-to-use-it/

#5

O ideal é você não expor seu banco, cria um wEB service, para fazer isso para você

Perdão se repeti alguém mas não li os POSTs

#6

Então pessoal criei meu WebService bem simples… uma soma passando dois parâmetros.

<!DOCTYPE HTML>
<HTML lang="pt-br">
	<HEAD>
	    <meta  charset=utf-8>
		<title>Pedidos</title>
	</HEAD>
	<BODY>
	    <article>
		   <header>
		      <h1>kobile</h1>			
		   </header>
		   
		</article>	
		<br>
		   	<form name="formSoma" method="get" action="">
				
				<p><label> Valor 1: <input type=search placeholder="Digite o primeor valor" name="valor1" autofocus> </label></p>
				<p><label> Valor 2: <input type=search placeholder="Digite o segundo valor" name="valor2" > </label></p>
				<p> <input type=button value=Enviar  onclick="CallWs();"></p>
			 </form>
		<br>

	</BODY>

	<script type="text/javascript">
	var ajax;

	/**
	 * Criar o objeto ajax que vai fazer a requisição
	 */

	function CreateAjaxObject() 
	{
		if(window.XMLHttpRequest) 
		{// Mozilla, Safari, Novos browsers...
			ajax = new XMLHttpRequest();
		} 
		else if(window.ActiveXObject) 
		{// IE antigo
			ajax = new ActiveXObject("Msxml2.XMLHTTP");
			if(!ajax) 
			{
				ajax = new ActiveXObject("Microsoft.XMLHTTP");
			}
		}

    if(!ajax)// iniciou com sucesso
        alert("Seu navegador não possui suporte para esta aplicação!");
	}
 
	/*
	 * Envia os dados para a URL informada
	 *
	 * @param url Arquivo que irá receber os dados
	 * @param dados dados a serem enviados no formato querystring nome=valor&nome1=valor2
	 * @param AjaxResponseFunction  variável to tipo function(string) para receber a resposta do ajax
	 */

	function SendData(url, dados, AjaxResponseFunction)
	{

		CreateAjaxObject();
		if(ajax) 
		{
			ajax.onreadystatechange = function trataResposta() 
			{
				if(ajax.readyState == 4) 
				{
					AjaxResponseFunction(ajax.status, ajax.responseText);
				}
			};
			//definir o tipo de método
			ajax.open("POST", url, true);
	 
			//definir o encode do conteúdo
			ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
	 
			//tamanho dos dados enviados
			ajax.setRequestHeader('Content-length', dados.length);
		
			//enviar os dados
			ajax.send(dados);
		}
	}
 

	/**
	 * Chama o webservice
	 */
	function CallWs() 
	{
		/*
			aqui passe os parâmetros do método.

			no formato 'querystring'

			ex:
				nomeParam1=valor1&nomeParam2=valor2&nomeParamN=valorN
	 
			Muita atenção aqui, pois deve ser informado aqui os nomes dos parâmetros
			que estão definidos no wsdl.
			Uma boa olhada, com atenção ao wsdl irá te mostrar os parâmetros,tipos e os nomes dos métodos
			disponíveis no método ou web service
		*/

		var dados = '';
		dados += 'valor1=' + document.forms['formSoma']['valor1'].value;
		dados += '&valor2=' + document.forms['formSoma']['valor2'].value;
	     

		//aqui o caminho completo do webservice seguido do nome do método
		SendData("http://localhost:8080/axis/Servico.jws?method=soma", dados, AjaxResponseFunction);
	}

 

	/**
	 * tratar a resposta do servidor
	 * @param status status da resposta
	 * @response resposta do servidor
	 */

	function AjaxResponseFunction(status, response)
	{ 
		alert(''+response);
		/*var divR = document.getElementById('divResponse');
		
		if(ajax.status != 200)
			divR.style.color = '#FF0000'; //vermelho
		else
			divR.style.color = '#0000FF';//azul
			
		//escrever na div de resposta
		divResponse.innerHTML = response;*/
	}
	</script>
</HTML>

Porém ele não consegue chegar nesse método que é o retorno.
Não existe problema no webservice.

function AjaxResponseFunction(status, response)
	{ 
		alert(''+response);

	}
#7