Ajax Örnekleri 1
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<html> <head> <title>Cryptojax - Lite</title> <link href="main.css" rel="stylesheet" /> <!-- <strong>AJAX</strong> BEGIN --> <script language="javascript" type="text/javascript" src="<strong>ajax</strong>.js"></script> <!-- <strong>AJAX</strong> 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.
|
1 |
<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.
|
1 |
<script language="javascript" type="text/javascript" src="<strong>ajax</strong>.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.
|
1 2 3 4 5 |
<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
|
1 2 3 4 5 6 7 8 9 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
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.
|
1 |
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.
Umarım güzel bir anlatım olmuştur.Kolay Gelsin.
-
Html 5 jquery slider 10 Şık ve ilgi çekici tasarım html 5 uyumlu.Aşağıdaki ön izleme olarak örnek’ten baka bilirsiniz. -
Html 5 jquery slider 9 Şık ve ilgi çekici tasarım html 5 uyumlu. Aşağıdaki ön izleme olarak örnek’ten baka
About Author
smtdncr
27,09,1991 Rize Dpğumluyum İlkokulu 3 değişik okulda okudum ilk sene Çayeli Fikri Keçeli İlköğretim Okulu 2-3-4-5 Rize Şevket Yardımcı İlköğretim Okulu 6-7-8 Rize Çaykur İlköğretim Okulunda okudum lise hayatımın tamamını Rize Mimar Sinan İMKB(Hasan Kemal Yardımcı Lisesi yeni adı) Lisesinde Okudum. Üniversiteyide inş güzel bir okulda okuyup hayat okuluna tek başıma devam etmeye başlarım.