jQuery and Ajax Cross-Site

An article by Pachai Leknettip    No Comments

วันนี้เราจะมาแนะนำการทำ ajax โดยใช้ jQuery แบบ Cross-Site กันครับ
การทำงาน ผมจะใช้ ajax ไปโหลด page url มาซึ่งทาง server-side ผมใช้ PHP ครับและ ทาง PHP ก็ return ค่ากลับมาเป็น json ครับ

Code ในส่วนของ Html

<div  style="background-color:#333333;height:20px;">
<a id="top" href="javascript:void(0);" gt;Show Message</a>
</div>
<div id="layDiv" style="display:none;height:30px;font-weight:bold;color:#ff3300;"></div>

Code ในส่วนของ Javascript

<script language="javascript">
$("document").ready(function(){
            $("#top").click(function(){
                  jQuery.ajax({
                                    url: 'http://executedns.net/hello.php',
                                    type: 'GET',
                                    dataType: 'jsonp',
                                    dataCharset: 'jsonp',
                                    success: function (data){
                                      var content = data.msg;
                                      alert(content);
                                      $('#layDiv').html('');
                                      $('#layDiv').html(content);
                                      $('#layDiv').css("display","block");
                                    }
                    });
            });
});
</script>

สิ่งที่สำคัญสำหรับ code ในส่วนนี้ก็จะเป็น parameter dataType and dataCharset จะต้องเป็น jsonp ครับ

และนี่ก็เป็น Code ในส่วนของ PHP

<?php
$val = array("msg"=>"Hello World !");
echo $_GET['callback'].'('.json_encode($val).')';
?>

Demo