跨域的方法
jsonp跨域get請求
通過iframe實作跨域
flash跨域http請求
window.postmessage
header實作跨域
serialize序清單表格内容為字元串,不支援form嵌套中的子form
html代碼:

<form id="myform">
姓名:<input type="text" name="name" size="10" />
性别:<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
<input type="submit" value="ok" />
</form>
<div id="rename"></div>
<div id="resex"></div>
<div id="re" style="display:none"></div>
show.php代碼:

<?php
header("cache-control: no-cache, no-store, must-revalidate, max-age=-1");
header("content-type: application/json; charset=utf-8");
$user['name']="姓名:".$_request['name'];
$user['sex']="性别:".$_request['sex'];
echo json_encode($user);
?>

<script type="text/javascript">
$(document).ready(function () {
$(":submit").click(function () {
var str = $("#myform").serialize();
$.ajax({
url:"show.php",
type:"post",
data:str,
datatype:"json",
timeout:1000,
error:function () {
alert("ajax error!");
},
success:callback
});
return false;
});
});
function callback(jsondata) {
$("#rename").html(jsondata.name);
$("#resex").html(jsondata.sex);
}
</script>
第二種方式:2、load(url,data,callback)

$(document).ready(function(){
$(":submit").click(function(){
var str=$("#myform").serialize();
$("#re").load("show.php",str,function(jsondata){
data=eval("("+jsondata+")");
$("#rename").html(jsondata.name);
$("#resex").html(jsondata.sex);
return false;
});
load方式可以在url後面加選擇器的,文法形如 "url #some > selector",但這裡的例子傳回的資料是json格式,是以就不能加選擇器,這裡隻是為了示範,是以就用一個隐藏的div來載入json資料,然後 在回調函數裡顯示出來,在實際項目中是不會這樣整的。。。
第三種方式:3、jquery.get(url,data,callback,type)

$.get("show.php",str,function(jsondata){
},"json");
第四種方式:4、jquery.getjson(url,data,callback) 異步請求

$.getjson("show.php",str,function(jsondata){
</script>
getjson還可以通過jsonp協定來進行跨域調用資料。隻要用jsonp方式就隻能是get,因為本質是script方式加載的一個簡單的例子:

$.getjson("http://www.b.com/server.php?name=jackie&sex=boy&callback=?",function(data){
alert(data.name+" "+data.sex);

$name=$_request['name'];
$sex=$_request['sex'];
$jsondata="{name:'".$name."',sex:'".$sex."'}";
echo $_get['callback']."(".$jsondata.")";

callback({name:'this is json data',sex:'男'})
header實作跨域

// ajax通過設定access-control-allow-origin來實作跨域通路比較簡單.指定允許其他域名通路
header('access-control-allow-origin:*');
// 響應類型
header('access-control-allow-methods:post, get, options');
// 響應頭設定
header('access-control-allow-headers:x-requested-with,content-type');
第五種方式:5、jquery.post(url,data,callback,type)

$.post("show.php",str,function(jsondata){
},"json")
第六種方式:jquery.getscript(url,[callback])

<html>
<head>
<title>jquery學習</title>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
var obtntest = $("#btntest");
obtntest.click(function(){
obtntest.disabled = true;
var oresult = $("#result");
oresult.html("loading").css("color","red");
jquery.getscript("http://app.cntvs.com/test/js.txt",
function(){
oresult.html("name:" + jimmy.name + "<br/>email:" + jimmy.email).css("color","black");
obtntest.disabled = false;
</head>
<body>
<button id="btntest">btntest</button>
<div id="result"></div>
</body>
</html>
遠端伺服器端js.txt的内容為:
var jimmy = {name:"jimmy.yang",email:[email protected]}