Unidos pelo récorde

Unidos para que o Firefox 3 bata o récorde mundial de download.

Abracem esta idéia!

Requisitando uma página em ajax

A finalidade deste exemplo é mostra para os iniciantes em ajax como é simples efetuar uma requisição usando o ajax.

A primeira coisa a fazer é verificar se o browser do cliente suporta o ajax e instânciar o objeto.

var ajax;
try {
  // Verifica se o Firefox, Opera 8.0+, Safari suporta o ajax
  ajax = new XMLHttpRequest();
} catch (e) {
  // Verifica se o Internet Explorer suporta o ajax
  try {
    ajax = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      ajax = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {
      alert("Seu browser não dar suporte ao AJAX!");
      return false;
    }
  }
}

Agora vamos processar nosso ajax, observe que neste exemplo estamos tratando o readyState 4, que seguinifica que a requisição foi bem sucedida.

// Processa requisição ajax
ajax.onreadystatechange = function() {
  if(ajax.readyState == 4) {
    document.getElementById('campoResposta').innerHTML = ajax.responseText;
  }
}
ajax.open('POST', 'time.php', true);
ajax.send(null);

Neste exemplo o ajax requisita uma página que contém uma função date(‘H:i:s’)
time.php

date('H:i:s')

Agora juntamos as partes do objeto ajax em uma função para efetuarmos a requisição.

function ajaxSend() {
  var ajax;
  try {
    // Firefox, Opera 8.0+, Safari
    ajax = new XMLHttpRequest();
  } catch (e) {
      // Internet Explorer
      try {
        ajax = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        try {
          ajax = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
          alert("Seu browser não dar suporte ao AJAX!");
          return false;
        }
      }
  }

  // Processa requisição ajax
  ajax.onreadystatechange=function() {
    if(ajax.readyState == 4) {
      document.getElementById('time').innerHTML = 'Time: ' + ajax.responseText;
    }
  }
  ajax.open('POST', 'time.php', true);
  ajax.send(null);
}

Função criar elemento input usando DOM

Este exemplo foi criado a partir da necessidade num projeto que fiz, onde tinha arquivos que seria livres e outros privados.

Neste exemplo mostro como criar um campo input ao click em um link ou botão.

Função que cria o elemento DOM

/**
 * Função criar componente usando DOM
 * Evento onclick
 * @author Deusimar Ferreira
 */
function criaElemento() {
  // Verifica se já foi criado o elemento
  if(!document.getElementById('labelInput')){
    // Label area senha
    var labelInput = document.createElement('label'); // Cria um elemento label
    labelInput.innerHTML = 'Senha: '; // Define o texto
    labelInput.id = 'labelInput'; // Define ID

    // Input type password
    var input = document.createElement('input'); // Cria um elemento input
    input.type = 'password'; // Define o tipo como password
    input.name = 'senha'; // Define o nome como senha
    input.id = 'senha'; // Define o Id com senha
    input.size = '10'; // Define o tamanho para 10

    labelInput.appendChild(input); // Adiciona o input ao label
    document.body.appendChild(labelInput); // Adiciona o label ao corpo do documento
  }
}

Função que remover o elemento DOM

/**
 * Função remove componente
 * Evento onclick
 * @author Deusimar Ferreira
 */
function removeElemento() {
  document.body.removeChild(document.getElementById('labelInput')); // Remove os elementos do corpo do documento
}

Auto preenchimento em JS(Equivalente ao str_pad no PHP)

Bem galeira, esta função faz um auto-preenchimento em uma determinada string.

Ex: tenho um campo que seria obrigatório ter 4 digitos, mas ele poderia receber valores com uma, duas, três ou quatro digitos, ae surgiu a ideia de fazer um preenchimento no campos caso o valor recebido fosse menor que 4 espaços, dei uma Googlezada e encotrei esta função que equivale a str_pad do PHP, fiz apenas uma alteração, pois quando inseria um valor númerico a função não reconhecia, a solução foi fazer com que os valores de entrada sejam transformados em uma string.

Você tem as seguintes opções:
STR_PAD_RIGHT, STR_PAD_LEFT ou STR_PAD_BOTH, caso não seja definido na chamada da função o parametro pad_type ele assume como default o valor ‘STR_PAD_RIGHT’.

Veja:
o valor de entrada para este exemplo será 8, a quantidade de espaço a ser preenchido será 4 e o valor adicionado é 0.

//Preenche a esquerda.
document.write(str_pad(8, 4, 0, 'STR_PAD_LEFT'))
//resultado: 0008

//Preenche nas duas extremidades.
document.write(str_pad(8, 4, 0, 'STR_PAD_BOTH'))
//resultado: 0080

//Preenche a direita.
document.write(str_pad(8, 4, 0, 'STR_PAD_RIGHT'))
//resultado: 8000

/**
 * @credits http://kevin.vanzonneveld.net
 * original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
 */
function str_pad( input, pad_length, pad_string, pad_type ) {
    var input = this.String(input);

    var half = '', pad_to_go;

    function str_pad_repeater(s, len){
        var collect = '', i;

        while(collect.length  0) {
        if (pad_type == 'STR_PAD_LEFT') { input = str_pad_repeater(pad_string, pad_to_go) + input; }
        else if (pad_type == 'STR_PAD_RIGHT') { input = input + str_pad_repeater(pad_string, pad_to_go); }
        else if (pad_type == 'STR_PAD_BOTH') {
            half = str_pad_repeater(pad_string, Math.ceil(pad_to_go/2));
            input = half + input + half;
            input = input.substr(0, pad_length);
        }
    }

    return input;
  }