Ajax和跨域
1、Ajax
全稱asynchronous（異步的）JavaScript and XML，是一種無需加載網頁而更新網頁部分內容的技術。
同步：客戶端發起請求，然後客戶端一直等待服務器端處理，收到服務器端響應後，客戶端重新載入整個頁面，如果有錯誤客戶端再次發起請求……
異步：客戶端發起請求，服務器端處理的同時客戶端可以繼續運行，沒有等待，服務器端的響應會實時反饋給客戶端。
步驟：
運用XMLHttpRequset對象和web服務器進行數據的異步交換；
運用JS操作DOM實現動態局部刷新。
語法：
var request=new XMLHttpRequest();
request.open("GET/POST","URL",true/false); //true表示異步請求，默認可省略，false表示同步請求
request.send(string);
XMLHttpRequest對象的屬性和方法：
readyState屬性：HTTP請求的狀態。4表示HTTP響應已完全接收。
status屬性：HTTP狀態碼。202表示成功，404表示"Not Found"。
responseText屬性：服務器接收到的響應體，字符串形式。
onreadystatechange事件句柄：每次readystate屬性改變的時候調用的事件句柄函數。
可參考（http://www.w3school.com.cn/xmldom/dom_http.asp）
例：發送Ajax請求 查詢並處理
var request=new XMLHttpRequest();
request.open("GET","server.php?number="+document.getElementById("keyword").value);
request.send();
request.onreadystatechange=function(){
if(request.readyState===4){
if(request.status===200){
document.getElementById("searchResult").innerHTML=request.responseText;
}else{
alert("發生錯誤"+request.status);
}
}
}
2、JSON
全稱JavaScript Object Notation，是一種存儲和交換信息的表示法，類似XML，它采用【鍵值對】的方式組織，易於及其解析，
json是獨立於語言的，只要按照規則任何語言都可以解析json，
與xml相比，json長度短，讀寫速度快，可以使用js內建的方法eval()解析轉換為js對象，
表示：json值可以是字符串（用雙引號）、對象（用{}）、數組（用[]）、數字、true/false、null，
如，var jsondata=‘{"staff":[{"name":"mavis","age":24},{"name":"jack","age":25},{"name":"tony","age":26},]}‘ ;
json解析
（1）eval(string)：var jsonobj=eval(‘(‘+jsondata+‘)‘);
只接受字符串為參數，eval方法不會檢查json字符串是否合法，而且json字符串中的JavaScript方法會自動執行，如果json字符串包含惡意代碼，比如window.location轉向了一個惡意地址，危險！不建議使用
（2）JSON.prase()：
把json字符串解析為對象，會檢查json字符串是否合法，不會執行json字符串中的JavaScript方法
3、用jQuery實現Ajax
$.ajax({
type:"POST", //POST/GET
url:"請求地址",
dataType:"json", //預期服務器返回的數據類型
data:{name:$("#staffname").val(),number:$("#staffnumber").val(),age:$("#staffage").val()},
success:function(data){}, //請求成功的回調函數，傳入返回的數據和包含成功代碼的字符串
error:function(jqXHR){alert("請求失敗："+jqXHR.status);} //請求失敗的回調函數，傳入XMLHttpRequest對象
})
4、跨域
域名：http://www.abc.com:8080/index.js
http://協議
www子域名
abc.com主域名
8080端口號（http協議的默認端口號為80，一般可以省略）
協議、子域名、主域名、端口號其中任意一個不同，就叫做不同域，不同域之間相互請求資源叫作“跨域”。
JavaScript出於安全考慮，不允許跨域即同源策略，但是<script><img>這些含有src屬性的標簽沒有同源策略，所以
處理跨域方法1：jsonp
原理：給<script src="跨域的文件的地址"></script>，這個跨域的文件返回跨域的服務器端數據。因此json只支持GET請求，不支持POST請求。
在www.aa.com頁面中
<script src=“http://www.bb.com/jsonp.js”></script>
<script>
function jsonp(json){alert(json[“name”]);}
</script>
在www.bb.com頁面中
jsonp({"name":"洪七公","age":70})
例，客戶端：
$.ajax({
type:"GET",
url:"http://***/serverjsonp.php?number="+$("#keyword").val(),
dataType:"jsonp",
jsonp:"callback",//回調函數
jsonpCallback:"callbackname",//回調函數名稱，如省略服務器會自動生成
success:function(data){
……
},
error:function(jqXHR){
alert("發生錯誤"+jqXHR.status);
}
});
服務器端部分語句：
$jsonp=$_GET["callback"];
$result = $jsonp.‘({"success":false,"msg":"沒有找到員工。"})‘;
$result = $jsonp.‘({"success":true,"msg":"找到員工：***"})‘;
查看調試工作臺：
Request URL:http://***/serverjsonp.php?number=101&callback=callbackname&_=1496980303811Ajax和跨域