jQuery ช่วยส่งข้อมูลแบบ Cross Domain ง่ายนิดเดียว

การส่งค่า AJAX ไปยัง server side script ที่อยู่คนละโดเมนกับไฟล์ที่รีเควสท์ browser ต่างๆ จะไม่อนุญาติให้ทำเนื่องจากเหตุผลทางด้าน security
โดยทั่วไปจะแก้ปัญหาใช้วิธีรีเควสท์ AJAX ผ่านทาง Proxy แต่วิธีนี้ต้องใช้คำสั่งจำพวก
open remote file ถ้าใช้เว็บโฮสฟรีก็หมดสิทธิใช้คำสั่งพวกนี้เพราะมักจะถูกกันเอาไว้ไม่ให้ใช้

แต่มีอีกทางเลือกหนึ่งเป็นเทคนิคในการแทรก script tag ลงไปพร้อมกับตั้ง src ให้เป็น url ของไฟล์ที่มีฟอร์แมท JSONP
ทำให้เราสามารถเอาข้อมูลมาใช้งานได้เลย
ฟอร์แมทของ JSONP สรุปง่ายๆ เลยก็คือเป็น statement ของการ call function ธรรมดาๆ นี่เอง
โดยมี agument อยู่ในรูปแบบ JSON
เช่น callbackfunction({"name":"hello world"}); เป็นการส่ง argument
ไปให้กับ function ที่ชื่อว่า callbackfunction ดังนั้นเมื่อเราสร้าง function ที่ชื่อว่า callbackfunction อยู่ก่อนแล้ว
function callbackfunction(e){
alert(e.name); //แสดง hello world (จะทำงานทันทีหลังจากโหลด JSONP เรียบร้อย)
}
เราก็สามารถดึงเอา argument ที่ได้ server ส่งมาให้ได้โดยง่าย

เมื่อเราเรียกคำสั่ง $.ajax และกำหนด dataType เป็น jsonp
jQuery จะเปลี่ยนจากการรีเควสท์ AJAX เป็นการแทรก tag script ดังกล่าวข้างต้นให้โดยอัตโนมัติ
ทำให้เราสามารถรีเควสข้อมูลแบบ GET ผ่านทาง script tag ได้ราวกับการรีเควส AJAX ตามปกติ

test.php

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=TIS-620" />
<title>JSONP</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

$(function(){
 $("#jsonp-request").click(function(e){
   $.ajax({
     url:'http://goldxp.thport.com/jquery/jsonpdata.php',
   type:'GET',
   dataType:'jsonp', //ตรงนี้ทำให้สามารถ cross domain ได้
   dataCharset:'jsonp',
     success:function(e){
    alert("jsonp data="+e[0].name);
   }
   });
   e.preventDefault();
 });
});

</script>

</head>
<body>
    <a href="#" id="jsonp-request">JSONP-Request</a>
</body>
</html>

jsondata.php

<?php echo $_GET['callback']?>([{"name" : <?php echo rand(1,1000);?>}]);    

เนื่องจากเป็นการเรียกข้ามโดเมนจึงมีเรื่องต้องระวังเรื่องความปลอดภัยเพิ่มขึ้นดังนี้ครับ
1) ฝั่ง server ถ้าจะรับข้อมูลจาก client เอาไปบันทึก แม้ว่าจะเชื่อถือ http referer ไม่ค่อยได้
แต่อย่างน้อยก็ควรจะตรวจสอบ http referer เพื่อกันการยิ่งข้อมูลมั่วๆ เข้ามา
2) ฝั่ง client ถ้าไม่ได้ตรวจสอบ json ให้ละเอียดว่าเป็นข้อมูลอย่างเดียวไม่มีคำสั่งปนเข้ามา
จะต้องรับข้อมูล json, jsonp หรือ javascript จาก server ที่น่าเชื่อถือเท่านั้น
เพราะอาจจะมีการแทรกคำสั่ง javascript เข้ามาใน json ได้เหมือนกันยกตัวอย่างเช่น
callbackfunction(function(){alert('test');}());
สำหรับ json ยังพอที่จะตรวจสอบข้อมูลได้ก่อนจะเรียกคำสั่ง eval(response_text)
แต่ jsonp ที่เรียกผ่านทาง tag script เป็นคำสั่งโดยตรงเลย
ดังนั้นควรจะรับข้อมูล jsonp ก็เฉพาะเว็บไซท์ที่น่าเชื่อถือเท่านั้นครับ

radio button validation

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />

<title>radio check demo</title>

<script type="text/javascript">
function test(f){
 var t1;for(var i=0;i<f.q1_1.length;i++) if (f.q1_1[i].checked == true)  t1 = true;
 if (!t1) {alert('radio group 1 empty.'); f.q1_1[0].focus();return false;}
 
 var t2;for(var i=0;i<f.q1_2.length;i++) if (f.q1_2[i].checked == true)  t2 = true;
 if (!t2) {alert('radio group 2 empty.'); f.q1_2[0].focus();return false;}
 
 return true;
}
</script>
</head>


<body>

<form method="post" action="" onsubmit="return test(this);" name="f1" id="f1">
1.1 ???
<input name="q1_1" type="radio" id="rdo5" value="5" >
<input name="q1_1" type="radio" id="rdo4" value="4">
<input name="q1_1" type="radio" id="rdo3" value="3">
<input name="q1_1" type="radio"id="rdo2" value="2">
<input name="q1_1" type="radio" id="rdo1" value="1">
1.2 ???
<input type="radio" name="q1_2" id="rdo5_2" value="5">
<input type="radio" name="q1_2" id="rdo4_2" value="4">
<input type="radio" name="q1_2" id="rdo3_2" value="3">
<input type="radio" name="q1_2" id="rdo2_2" value="2">
<input type="radio" name="q1_2" id="rdo1_2" value="1">

<input type="submit" />

</form>

</body>
</html>

เช็คหลายๆ radiobox

<?php $radio_size = 3;?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
 
<title>radio check demo</title>
 
<script type="text/javascript">
 
 var radio_size = <?php echo $radio_size;?>;
 function radio_checked(rdo){
  var t1=false;for(var i=0;i<rdo.length;i++) if (rdo[i].checked == true)  t1 = true;
  return t1;
 }
 
function test(f){
 for(var i=1;i<=radio_size;i++)
  if (!radio_checked(f['q'+i])){
    alert('radio group '+i+' empty.');
    f['q'+i][0].focus();
    return false;
  }
 return true;
}
</script>
</head>
 
 
<body>
 
<form method="post" action="" onsubmit="return test(this);" name="f1" id="f1">

 <?php foreach(range(1,$radio_size) as $i):?>
    <hr /><?php echo $i;?> ???
    <input name="q<?php echo $i;?>" type="radio" value="5" >
    <input name="q<?php echo $i;?>" type="radio" value="4">
    <input name="q<?php echo $i;?>" type="radio" value="3">
    <input name="q<?php echo $i;?>" type="radio" value="2">
    <input name="q<?php echo $i;?>" type="radio" value="1">
    <?php endforeach;?>

<input type="submit" />
 
</form>
 
</body>
</html>

jquery plugin ที่น่าสนใจ

improve-jquery-tips
lightbox
alert
create slide show
curvycorner
fancy thumbnail hover
sifr
uploadify
jcrop
auto-province
image-color
impromptu
cycle
image-dropdown
multi-level-menu
fisheye menu
gps

http://www.thaicreate.com/outling.aspx?l=http://dhtmlx.com/docs/products/dhtmlxGrid/
http://www.learningjquery.com/2009/07/setting-up-visual-studio-intellisense-for-jquery
http://www.javascripttoolbox.com/jquery/cheatsheet/
http://www.demoncodez.com/component/tag/ajax.html
http://www.longtailvideo.com
http://code.google.com/p/flot/
http://www.ryancooper.com/resources/keycode.asp
http://www.tareeinternet.com/scripts/comparison-tool/
http://htmlpurifier.org/
http://www.ziddu.com/download/7770677/jquery-form-validation-01.zip.html

function php ใน javascript

http://phpjs.org