摘要：封裝和跨域知識(shí)使用還是是通過(guò)參數(shù)傳遞到當(dāng)前腳本的變量數(shù)組。對(duì)所發(fā)送信息的數(shù)量也有限制。請(qǐng)求成功時(shí)觸發(fā)，。允許一個(gè)域上的網(wǎng)絡(luò)應(yīng)用向另一個(gè)域提交跨域請(qǐng)求。

$_GET 是通過(guò) URL 參數(shù)傳遞到當(dāng)前腳本的變量數(shù)組。

$_POST 是通過(guò) HTTP POST 傳遞到當(dāng)前腳本的變量數(shù)組。

通過(guò) GET 方法從表單發(fā)送的信息_對(duì)任何人都是可見(jiàn)的_（所有變量名和值都顯示在 URL 中）。GET 對(duì)所發(fā)送信息的數(shù)量也有限制。限制在大于 2000 個(gè)字符。不過(guò)，由于變量顯示在 URL 中，把頁(yè)面添加到書(shū)簽中也更為方便。
GET 可用于發(fā)送非敏感的數(shù)據(jù)。
注釋?zhuān)航^不能使用 GET 來(lái)發(fā)送密碼或其他敏感信息！

通過(guò) POST 方法從表單發(fā)送的信息_對(duì)其他人是不可見(jiàn)的_（所有名稱(chēng)/值會(huì)被嵌入 HTTP 請(qǐng)求的主體中），并且對(duì)所發(fā)送信息的數(shù)量也_無(wú)限制_。

此外 POST 支持高階功能，比如在向服務(wù)器上傳文件時(shí)進(jìn)行 multi-part 二進(jìn)制輸入。

不過(guò)，由于變量未顯示在 URL 中，也就無(wú)法將頁(yè)面添加到書(shū)簽。
提示：開(kāi)發(fā)者偏愛(ài) POST 來(lái)發(fā)送表單數(shù)據(jù)。
接下來(lái)讓我們看看如何安全地處理 PHP 表單！

Name: 
* 

與 POST 相比，GET 更簡(jiǎn)單也更快，并且在大部分情況下都能用。

然而，在以下情況中，請(qǐng)使用 POST 請(qǐng)求：

無(wú)法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）

向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒(méi)有數(shù)據(jù)量限制）

發(fā)送包含未知字符的用戶(hù)輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠

引用自：SF

學(xué)習(xí)Ajax，并嘗試自己封裝一個(gè)Ajax方法。實(shí)現(xiàn)如下方法：

function ajax(url, options) {
    // your implement
}
// 使用示例：
ajax(
    "http://localhost:8080/server/ajaxtest", 
    {
        data: {
            name: "simon",
            password: "123456"
        },
        onsuccess: function (responseText, xhr) {
            console.log(responseText);
        }
    }
);

options是一個(gè)對(duì)象，里面可以包括的參數(shù)為：
type: post或者get，可以有一個(gè)默認(rèn)值
data: 發(fā)送的數(shù)據(jù)，為一個(gè)鍵值對(duì)象或者為一個(gè)用&連接的賦值字符串。使用=來(lái)連接鍵與值，使用&來(lái)連接多個(gè)請(qǐng)求參數(shù)
onsuccess: 成功時(shí)的調(diào)用函數(shù)
onfail: 失敗時(shí)的調(diào)用函數(shù)

/**
 * AJAX函數(shù)封裝
 * @param {string} url     請(qǐng)求地址（必須）
 * @param {object} options 發(fā)送請(qǐng)求的選項(xiàng)參數(shù)
 *   @config {string} [options.type] 請(qǐng)求發(fā)送的類(lèi)型。默認(rèn)為GET。
 *   @config {Object} [options.data] 需要發(fā)送的數(shù)據(jù)。
 *   @config {Function} [options.onsuccess] 請(qǐng)求成功時(shí)觸發(fā)，function(oAjax.responseText, oAjax)。（必須）
 *   @config {Function} [options.onfail] 請(qǐng)求失敗時(shí)觸發(fā)，function(oAjax)。(oAJax為XMLHttpRequest對(duì)象)
 *
 *@returns {XMLHttpRequest} 發(fā)送請(qǐng)求的XMLHttpRequest對(duì)象
 */
function ajax(url, options) {
    //1.創(chuàng)建ajax對(duì)象
    var oAjax = null;
        /**
         * 此處必須需要使用window.的方式,表示為window對(duì)象的一個(gè)屬性.不存在時(shí)值為undefined,進(jìn)入else
         * 若直接使用XMLHttpRequest,在不支持的情況下會(huì)報(bào)錯(cuò)
         **/
    if (window.XMLHttpRequest) {
        //IE6以上
        oAjax = new XMLHttpRequest();
    } else {
        oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    //2.連接服務(wù)器
    //open(方法,url,是否異步)
    var param = ""; //請(qǐng)求參數(shù)。
    //只有data存在，且為對(duì)象使才執(zhí)行
    var data = options.data ? options.data : -1; //緩存data
    if (typeof (data) === "object") {
        for (var key in data) { //請(qǐng)求參數(shù)拼接
            if (data.hasOwnProperty(key)) {
                param += key + "=" + data[key] + "&";
            }
        }
        param.replace(/&$/, "");
    } else {
        param = "timestamp=" + new Date().getTime();
    }

    //3.發(fā)送請(qǐng)求
    var type = options.type ? options.type.toUpperCase() : "GET";
    if (type === "GET") {
        oAjax.open("GET", url + "?" + param, true);
        oAjax.send();
    } else {
        oAjax.open("POST", url, true);
        oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        oAjax.send(param);
    }

    //4.接收返回
    //OnRedayStateChange事件
    oAjax.onreadystatechange = function () {
        if (oAjax.readyState === 4) {
            if (oAjax.status === 200) {
                //請(qǐng)求成功。形參為獲取到的字符串形式的響應(yīng)數(shù)據(jù)
                options.onsuccess(oAjax.responseText, oAjax);
            } else {
                //先判斷是否存在請(qǐng)求失敗函數(shù)
                //存在時(shí)，形參為XMLHttpRequest對(duì)象，便于進(jìn)行錯(cuò)誤進(jìn)行處理
                if (options.onfail) {
                    options.onfail(oAjax);
                }
            }
        }
    };
    return oAjax;//發(fā)送請(qǐng)求的XMLHttpRequest對(duì)象
}

ajax本身并不能跨域，要借助其他方式進(jìn)行跨域。引用有SF

可能平時(shí)最常用到的就是get方式的jsonp跨域，可以用jquery提供的$.ajax 、$.getJSON。

$.ajax({
    url:"接口地址",
    type:"GET",
    data:"想給接口傳的數(shù)據(jù)",
    dataType:"jsonp",
    success:function(ret){
        console.log(ret);
    }
});

這樣很簡(jiǎn)單的就可以實(shí)現(xiàn)jsonp的跨域，獲取接口返回值。實(shí)現(xiàn)原理是利用script標(biāo)簽跨域

a.com html:

a.com callback.php:
";
//回調(diào)原頁(yè)面上函數(shù)處理返回結(jié)果
echo "window.top.postcallback(" .$_GET["data"]. ");";
echo "";

b.com api.php:


CORS跨域
原理：CORS定義一種跨域訪問(wèn)的機(jī)制，可以讓AJAX實(shí)現(xiàn)跨域訪問(wèn)。CORS 允許一個(gè)域上的網(wǎng)絡(luò)應(yīng)用向另一個(gè)域提交跨域 AJAX 請(qǐng)求。實(shí)現(xiàn)此功能非常簡(jiǎn)單，只需由服務(wù)器發(fā)送一個(gè)響應(yīng)標(biāo)頭即可。
注：移動(dòng)終端上，除了opera Mini都支持。
利用 CORS，http://www.b.com 只需添加一個(gè)標(biāo)頭，就可以允許來(lái)自 http://www.a.com 的請(qǐng)求，下圖是我在PHP中的 hander() 設(shè)置，“*”號(hào)表示允許任何域向我們的服務(wù)端提交請(qǐng)求：
header("Access-Control-Allow-Origin:*");
也可以設(shè)置指定域名：
header("Access-Control-Allow-Origin:http://www.b.com");
js部分：
$.ajax({
    url: a_cross_domain_url,
    crossDomain: true,
    method: "POST"
});
CORS比較適合應(yīng)用在傳送信息量較大以及移動(dòng)端來(lái)使用。
script標(biāo)簽來(lái)跨域（有待補(bǔ)充調(diào)整）

js.onload = js.onreadystatechange = function() {
    if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
        // callback在此處執(zhí)行
        js.onload = js.onreadystatechange = null;
    }
};
h5的postMessage
otherWindow.postMessage(message, targetOrigin);
otherWindow: 對(duì)接收信息頁(yè)面的window的引用?？梢允琼?yè)面中iframe的contentWindow屬性；window.open的返回值；通過(guò)name或下標(biāo)從window.frames取到的值。
message: 所要發(fā)送的數(shù)據(jù)，string類(lèi)型。
targetOrigin: 用于限制otherWindow，“*”表示不作限制
a.com/index.html中的代碼：


b.com/index.html中的代碼：

6、子域跨域（document.domain+iframe）(h5中這個(gè)標(biāo)簽已經(jīng)被禁止了)
www.a.com上的a.html
document.domain = "a.com";
var ifr = document.createElement("iframe");
ifr.src = "http://script.a.com/b.html";
ifr.style.display = "none";
document.body.appendChild(ifr);
ifr.onload = function(){
    var doc = ifr.contentDocument || ifr.contentWindow.document;
    // 在這里操縱b.html
    alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};
script.a.com上的b.html
document.domain = "a.com";
具體的做法是可以在 http://www.a.com/a.html 和http://script.a.com/b.html兩... = "a.com"；然后通過(guò)a.html文件中創(chuàng)建一個(gè)iframe，去控制iframe的contentDocument，這樣兩個(gè)js文件之間就可以“交互”了。當(dāng)然這種辦法只能解決主域相同而二級(jí)域名不同的情況。