jQuery、AJAX基礎學習筆記

XMLHttpRequest發送請求

request.open(“GET”,”get.php”, true);

request.send();

request.open(“POST”, “post.php”, true);

request.send();

request.open(“POST”, “create.php”, true);

request.setRequestHeader(“Content-type”, “application/s-www-form-urlencoded”);

requset.send(“name=…&sex=…”);

XMLHttpRequest取得響應

responseText:獲得字元串形式的響應資料

responseXML:獲得XML形式的響應資料

status和statusText：以數字和文本形式傳回HTTP狀态碼

getAllRequestHeader():擷取所有的響應報頭

getResponseHeader():查詢響應中的某個字段的值

readyState屬性

0：請求未初始化，open已經調用了

1：伺服器連接配接已建立，open已經調用了

2：請求已接受（接受到了頭資訊）

3：請求進行中（接受到響應主體）

這裡寫代碼片

4：請求已完成，響應已就緒（響應完成）

var request = new SMLHttpRequest();

requset.open(“GET”, “get.php”, true);

requset.send();

requset.onreadystatechange = function(){

if (request.readyState ==== 4 && requset.status === 200)

//doSomething – requset.reponseText

}

——監聽request的readyState屬性的值（變化？某些浏覽器會從0~4進行周遊，這裡隻用看4的情況）

同時監聽status

用jQuery實作Ajax

jQuery.ajax([settings]) —内置的ajax方法

• type：類型，“PSOT”“GET”
• url： 發送請求的位址
• data：是一個對象，連同請求發送到伺服器的資料

• dataType：語氣伺服器傳回的資料類型、如果不指定

  jQuery将自動根據HTTP請求來隻能判斷，一般采用json格式，可以設定為“json”

• success： 是一個方法，請求成功後的會掉函數，傳入傳回後的資料，以及包含成功代碼的字元串
• error： 是一個方法，請求失敗是調用次函數。傳入XMLHttpRequset對象

$(document).ready(function(){
    $("#search").click(function(){
        $.ajax({
            type:"GET",
        url:"service.php?number= " + $("#keyword").val(),
        dataType:"json".
        data:{
            name:$("#staffName").val(),
        number:$("#staffNumber").val(),
        sex:$("#staffSex").val(),
        job:$("#staffJob").val()
            }
        success:function(data){
            if (data.success){
            $("#searchResult").html(data.msg);
        }else{
            $("#searchResult").html("出現錯誤" + data.msg);
        }
        },
        error:function(jqXHR){  //接收的參數
            alert("發生錯誤：" + jqXHR.status);
            }
        })
    });
});
           

————jQuery中Ajax的一般使用

http:// www . abc.com : 8080 / service.js

協定 子域名 主域名 端口号 請求資源位址

當協定，子域名，主域名，端口号中熱議一個不相同時，都算作不同域

不同域之間互相請求資源，就算做“跨域”

javascript處于安全性方面的考慮，不允許跨域調用其他頁面的對象（需在背景執行）。

（跨域：一個域名下的頁面，請求另一個域名下的資源。協定，子域名，主域名，端口号中任意一個不同，就算跨域）

處理跨域的方法：

1.通過在同域名的web伺服器建立一個代理。背景請求其他域名下的服務，把響應傳回的結果調回前端

2.jsonp（解決主流浏覽器的跨域資料通路的問題）

3.XHR2

jsonp

不支援post請求方式,隻支援get請求

<script>
    function jsonp(json){
        alert(json["name"]);
    }
</script>
<script src = "http://www.......jsonp.js">-----在這個頁面中：
           

jsonp({‘name’:’…’, ‘age’:’24’});

HTML5提供的XMLHttpRequest Level2已經實作了跨域通路以及其他的一些新功能

IE10以下版本不支援（其他的方式，貌似是對象不同）

在伺服器端做一些小的改造即可：

header(‘Access-Control-Allow-Origin:‘); //這裡的表示所有的域名，也可以設定為單個的域名

header(‘Access-Control-Allow-Methods:PSOT,GET’);