Ajax和跨域

一、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);
        }
    }
}

 

二、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方法

 

三、用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對象

})

 

四、跨域

域名：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&_=1496980303811

返回值：callbackname({success: true, msg: "找到員工：***"}

處理跨域方法2：XHR2

HTML5提供的XMLHttpRequest level2已經實現了跨域訪問，可是IE10如下還不支持。

實現方法很簡單，只需在服務器端代碼里加上：

header("Access-Control-Allow-Origin:*");

header("Access-Control-Allow-Methords:POST/GET");

便可。

 

以上就是我對Ajax異步請求和跨域的理解，終於寫完啦啦啦

禁止轉載