ana sayfa > Ajax > Ajax Örnekleri 1

Ajax Örnekleri 1

Pazartesi, 11 May 2009 Samet Dinçer yorum ekle yorumlara git

Burada şifreleme yöntemlerini ajax ile karşınıza çıkartacaz.Dahada açacak olursak örnegin;kutucuğa “deneme” yazdınız bunu değişik şifreleme diliyle şifreleyip size sunacaz.Bu işlemi size anlatmaya çalışacam.Index sayfasıyla başlayalım.

index.php

<html>

<head>

<title>Cryptojax - Lite</title>

<link href="main.css" rel="stylesheet" />

<!-- AJAX BEGIN -->

<script language="javascript" type="text/javascript" src="ajax.js"></script>

<!-- AJAX END -->

</head>

<body>

<center>

<form method="post" action="./" id="form">

<textarea name="text" rows="5" cols="50"></textarea><br><br>

<select name="cryptmethod">

<option value="asc2bin">ASCII to Binary</option>

<option value="bin2asc">Binary to ASCII</option>

<option value="asc2hex">ASCII to Hex</option>

<option value="hex2asc">Hex to ASCII</option>

<option value="bin2hex">Binary to Hex</option>

<option value="hex2bin">Hex to Binary</option>

<option value="backwards">Backwards</option>

<option value="b64enc">Base 64 Encode</option>

<option value="b64dec">Base 64 Decode</option>

<option value="caesarbf">Caesar Bruteforce</option>

<option value="crypt">DES Crypt (one way)</option>

<option value="entityenc">HTML Entities Encode</option>

<option value="entitydec">HTML Entities Decode</option>

<option value="l33t">l33t 5p34k 3nc0d3</option>

<option value="del33t">l33t 5p34k d3c0d3</option>

<option value="md5">MD5 Crypt (one way)</option>

<option value="igpay">Igpay Atinlay</option>

<option value="unigpay">Un-Pig Latin</option>

<option value="rot-13">ROT-13</option>

<option value="urlenc">URL Encode</option>

<option value="urldec">URL Decode</option>

</select><br /><br><br>

<input type="submit" value="Convert" class="button" />

<BR><BR><BR>

<div id="loading">

<img src="images/loading.gif"/>

</div>

<div id="results"></div>

<div id="loading">loading...</div>

<div id="results"></div>

</body>

</html>

buradaki kodlar aslında bildiğimiz html kodları ile nasıl bir görünüm de işlemimizi yapacağımızı gösterdik.

<link href="main.css" rel="stylesheet" />

burada main.css dosyamızı çağırdık yani yazılarımızın veya diğer türlü özelliklerimizi kayıt ettiğimiz sayfamız.

<script language="javascript" type="text/javascript" src="ajax.js"></script>

işte bu çagırma işlemimiz asıl bizi ilgilendiren bölüm yani ajax bölümü burada ajax.js dosyamızı çagırıyoruz.Çünkü hızımızı ve yapacagımız işlemleri ajax yardımıyla yaptıracağız.

<form> ile başlayıp yapmış oldugumuz işlemler tamamiyle html ile ilgili list menü şeklinde yapmış oldugumuz işlem şifreleme yapacagımız dilleri oraya ekledik.

<div id="loading">
<img src="images/loading.gif"/>
</div>
<div id="results"></div>
<div id="loading">loading...</div>

Buradaki işlem sayfamızda eğer loading.gif adında bir resim varsa o resmi bekleme yaparken koyarak güzel bir görünüm sağlıyoruz.

Şimdi gelelim yukarıda dediğimiz main.css dosyamıza

main.css

body {
font-family: Tahoma, sans-serif;
font-size: 12px;
font-weight: bold;
}

#loading {
display: none;
}

burada body içerisinde bulunan içeriklere özellikler tanımladık birde loading özelliği ekledik sadece bunlar.

Geldik asıl işlemlerimizden birine şifreleme yapacagımız dillerin uygulamasına.

encrypt.php

<?php

function asc2bin($str) {
$text_array = explode("\r\n", chunk_split($str, 1));
for ($n = 0; $n < count($text_array) - 1; $n++) {
$newstring .= substr("0000".base_convert(ord($text_array[$n]), 10, 2), -8);
}
$newstring = chunk_split($newstring, 8, " ");
return $newstring;
}

function bin2asc($str) {
$str = str_replace(" ", "", $str);
$text_array = explode("\r\n", chunk_split($str, 8));
for ($n = 0; $n < count($text_array) - 1; $n++) {
$newstring .= chr(base_convert($text_array[$n], 2, 10));
}
return $newstring;
}

// Made this alias because "bin2hex" would be confusing in the context of this script :P
function asc2hex($str) {
return chunk_split(bin2hex($str), 2, " ");
}

function hex2asc($str) {
$str = str_replace(" ", "", $str);
for ($n=0; $n<strlen($str); $n+=2) {
$newstring .=  pack("C", hexdec(substr($str, $n, 2)));
}
return $newstring;
}

function binary2hex($str) {
$str = str_replace(" ", "", $str);
$text_array = explode("\r\n", chunk_split($str, 8));
for ($n = 0; $n < count($text_array) - 1; $n++) {
$newstring .= str_pad(base_convert($text_array[$n], 2, 16), 2, "0", STR_PAD_LEFT);
}
$newstring = chunk_split($newstring, 2, " ");
return $newstring;
}

function hex2binary($str) {
$str = str_replace(" ", "", $str);
$text_array = explode("\r\n", chunk_split($str, 2));
for ($n = 0; $n < count($text_array) - 1; $n++) {
$newstring .= substr("0000".base_convert($text_array[$n], 16, 2), -8);
}
$newstring = chunk_split($newstring, 8, " ");
return $newstring;
}

function caesarbf($str) {
$alpha = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
echo "<table width=\"85%\" cellpadding=\"2\" align=\"center\">\n";
for ($n = 1; $n < 26; $n++) {
$cipher = substr($alpha, $n, 26 - $n) . substr($alpha, 0, $n) . substr($alpha, 26+$n, 52-$n) . substr($alpha, 26, $n);
if ($n % 2 == 0) {
echo '<tr bgcolor="#eeeeee">';
} else {
echo '<tr bgcolor="#cccccc">';
}
echo "<td>ROT-$n: ". strtr($str, $alpha, $cipher) ."</td>";
}
echo "<tr>\n";
echo "</table>\n";
}

function entityenc($str) {
$text_array = explode("\r\n", chunk_split($str, 1));
for ($n = 0; $n < count($text_array) - 1; $n++) {
$newstring .= "&#" . ord($text_array[$n]) . ";";
}
return $newstring;
}

function entitydec($str) {
$str = str_replace(';', '; ', $str);
$text_array = explode(' ', $str);
for ($n = 0; $n < count($text_array) - 1; $n++) {
$newstring .= chr(substr($text_array[$n], 2, 3));
}
return $newstring;
}

function l33t($str) {
$from = 'ieastoIEASTO';
$to = '134570134570';
$newstring = strtr($str, $from, $to);
return $newstring;
}

function del33t($str) {
$from = '134570';
$to = 'ieasto';
$newstring = strtr($str, $from, $to);
return $newstring;
}

function igpay($str) {
$text_array = explode(" ", $str);
for ($n = 0; $n < count($text_array); $n++) {
$newstring .= substr($text_array[$n], 1) . substr($text_array[$n], 0, 1) . "ay ";
}
return $newstring;
}

function unigpay($str) {
$text_array = explode(" ", $str);
for ($n = 0; $n < count($text_array); $n++) {
$newstring .= substr($text_array[$n], -3, 1) . substr($text_array[$n], 0, strlen($text_array[$n]) - 3) . " ";
}
return $newstring;
}

function rot13($str) {
$from = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
$to   = 'nopqrstuvwxyzabcdefghijklmNOPQRSTUVWXYZABCDEFGHIJKLM';
$newstring = strtr($str, $from, $to);
return $newstring;
}

function strip_spaces($str) {
$str = str_replace(" ", "", $str);
return $str;
}

// Check to see if form has been submitted yet
/*if(isset($_POST['submit'])) {*/

// Yes, so make sure they filled something in

$text = $_GET['text'];
/*$text1 = $_GET['cryptmethod'];
echo $text;
echo "<BR>";
echo $text1; */

if($text == '') {
die('<script>window.alert("Please enter data in the form");</script>');
}

// Looks good, so clean up data
$text = urldecode(stripslashes($text));

// Make copy of original text for later display
$orig_text = $text;
$orig_text = htmlentities($orig_text);
echo("<p>$orig_text converts to:</p>\n");

// De/Encrypt based on selection in form
switch ($_GET['cryptmethod']) {
case "asc2bin":
$text = asc2bin($text);
break;
case "asc2hex":
$text = asc2hex($text);
break;
case "bin2asc":
$text = bin2asc($text);
break;
case "hex2asc":
$text = hex2asc($text);
break;
case "bin2hex":
$text = binary2hex($text);
break;
case "hex2bin":
$text = hex2binary($text);
break;
case "backwards":
$text = strrev($text);
break;
case 'b64enc':
$text = base64_encode($text);
break;
case 'b64dec':
$text = base64_decode(strip_spaces($text));
break;
case 'caesarbf':
$text = caesarbf($text);
break;
case 'crypt':
$text = crypt($text, 'CRYPT_STD_DES');
break;
case 'entityenc':
$text = entityenc($text);
break;
case 'entitydec':
$text = entitydec($text);
break;
case "l33t":
$text = l33t($text);
break;
case "del33t":
$text = del33t($text);
break;
case 'md5':
$text = md5($text);
break;
case 'igpay':
$text = igpay($text);
break;
case 'unigpay':
$text = unigpay($text);
break;
case "rot-13":
$text = rot13($text);
break;
case 'urlenc':
$text = urlencode($text);
break;
case 'urldec':
$text = urldecode($text);
break;
default:
die("<p>That encryption type is not supported.</p>\n");
} // end switch

// Convert to HTML entities so special chars show up
$text = htmlentities($text);

// Display result to the screen
echo("<p>$text</p>\n");

/*} // end if*/
?>

buradaki işlemler kısaca şöyle anlatayım burada bildigimiz ve bilmediğimiz şifreleme dilleri var yapmış olduğumuz tüm hepsinin kullanımı yaptık ve değişkenler içine attık ve index.php den seçilen hangisiyse onu işleme sokarak gösterme işlemi yapacatır.

Burada en önemli noktalardan biriside index.php deki list menüde vermiş oldugumuz “value” yani tek isim ile encrypt.php deki değişkenlerimizin hepsi birbiriyle uymalıki işlemimiz güzel ve düzgün bir şekilde çalışsın.

Gelelim konumuzla ilgili olan bölüme yani ajax sayfasına.Bu sayfada zaten büyük bir kısmı hatta neredeyse tamamı javascript kodlarıyla oluşmakta zaten ajax ın mantığını ajax dersimizde söylemiştik diğer dillere katkı bulundurmak için kullanılıyor daha güzel ve düzgün çalışsın diye.

ajax.js

var xml = makeXML();
var form;
var loading;
var results;
function makeXML () {
if (typeof XMLHttpRequest == 'undefined') {
objects = Array(
'Microsoft.XmlHttp',
'MSXML2.XmlHttp',
'MSXML2.XmlHttp.3.0',
'MSXML2.XmlHttp.4.0',
'MSXML2.XmlHttp.5.0'
);
for (i = 0; i < objects.length; i++) {
try {
return new ActiveXObject(objects[i]);
} catch (e) {}
}
} else {
return new XMLHttpRequest();
}
}
window.onload = function () {
form = document.getElementById('form');
loading = document.getElementById('loading');
results = document.getElementById('results');
form.onsubmit = function () {
results.style.display = 'none';
results.innerHTML = '';
loading.style.display = 'inline';
xml.open('get', './encrypt.php?text=' + escape(this.text.value) +'&cryptmethod=' + escape(this.cryptmethod.value));
xml.onreadystatechange = function () {
if (xml.readyState == 4 && xml.status == 200) {
results.style.display = 'block';
results.innerHTML = xml.responseText;
loading.style.display = 'none';
}
}
xml.send(null);
return false;
}
}

burada artık javascript olayları var o konuyu fazla bilmediğim için fazla yardımcı olamayacağım ama bazı kısımları anlatmaya çalışayım var bölümünde değişkenler tanımlanıyor diğer sayfalarda anlattığım gibi loadig değişkeninii göreceksinizdir bu işlem sayesinde bekleme işlemini yapmış oluyorruz ve index sayfasına yönlendiriliyor.

form = document.getElementById('form');

yukardaki kodlarla index.php deki formumuza bağlantı sağlanıyor.Bildiklerim bukadar javascripte arkadaşlar.

Sizler için birde bu yapmış olduğumuz örneği upload etmek istedim belki yazdıklarımı okumak istemeyen olur diye.

İndir.

Umarım güzel bir anlatım olmuştur.Kolay Gelsin.

Categories: Ajax Tags: , , ,
Bu kategorideki rastgele diğer yazılar
  • » jQuery Lava Lamp Menu
  • » Mootools Örnekleri - 12 Sosyal Paylaşım
  • » Mootools Örnekleri - 8 Renk Seçici
  • » Mootools Örnekleri - 1 Resim Galerisi
  • » Jquery Örnekleri-Lightbox
  • » Mootools Örnekleri - 5 Kayan Menü
  • » jQuery space galeri
  • » Jquery Tab Menü
  • » jQuery tab menu 3
  • » Mootools Örnekleri – 2 Resim Galerisi 2
  • » Ajax | Ajax Örnekleri
  • » Jquery Örnekleri-Akordion 1
  • » Ajax Örnekleri | Lightbox | Öne Dogru Açılan Resim
  • » Mootools Örnekleri - 6 Accordion menü
  • » Mootools Örnekleri -7 Kayan İçerik
    1. kaan
      Pazartesi, 17 May 2010 zamanında 23:37 | #1
      yanıtla | alıntı

      paylaşım için teşekkürler

    1. şimdilik geri bağlantı yok

    *
    Bu bir spamlara karşı koruma yazılımıdır, resimde gösterilen güvenlik kelimesi girilmelidir. Kelimeyi sesli duymak için resmi tıklayın
    Anti-spam kelimeyi duymak için tıklayın