Ajax和跨域

一、Ajaxphp

全稱asynchronous(異步的)JavaScript and XML,是一種無需加載網頁而更新網頁部份內容的技術。web

同步:客戶端發起請求,而後客戶端一直等待服務器端處理,收到服務器端響應後,客戶端從新載入整個頁面,若是有錯誤客戶端再次發起請求……ajax

異步:客戶端發起請求,服務器端處理的同時客戶端能夠繼續運行,沒有等待,服務器端的響應會實時反饋給客戶端。json

步驟:跨域

運用XMLHttpRequset對象和web服務器進行數據的異步交換;數組

運用JS操做DOM實現動態局部刷新。安全

語法:服務器

var request=new XMLHttpRequest();dom

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異步請求和跨域的理解,終於寫完啦啦啦

禁止轉載

相關文章
相關標籤/搜索