ajax封装和跨域知识

ajax封装和跨域知识

ajax 使用get还是post

$_GET 是通过 URL 参数传递到当前脚本的变量数组。

$_POST 是通过 HTTP POST 传递到当前脚本的变量数组。

何时使用 GET？

通过 GET 方法从表单发送的信息_对任何人都是可见的_（所有变量名和值都显示在 URL 中）。GET 对所发送信息的数量也有限制。限制在大于 2000 个字符。不过，由于变量显示在 URL 中，把页面添加到书签中也更为方便。
GET 可用于发送非敏感的数据。
注释：绝不能使用 GET 来发送密码或其他敏感信息！

何时使用 POST？

通过 POST 方法从表单发送的信息_对其他人是不可见的_（所有名称/值会被嵌入 HTTP 请求的主体中），并且对所发送信息的数量也_无限制_。

此外 POST 支持高阶功能，比如在向服务器上传文件时进行 multi-part 二进制输入。

不过，由于变量未显示在 URL 中，也就无法将页面添加到书签。
提示：开发者偏爱 POST 来发送表单数据。
接下来让我们看看如何安全地处理 PHP 表单！

Name: <input type="text" name="name">
<span class="error">* <?php echo $nameErr;?></span>

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

按照要求封装自己的ajax（原生非jquery）

引用自： SF

任务描述

学习Ajax，并尝试自己封装一个Ajax方法。实现如下方法：

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是一个对象，里面可以包括的参数为：
type: post或者get，可以有一个默认值
data: 发送的数据，为一个键值对象或者为一个用&连接的赋值字符串。使用=来连接键与值，使用&来连接多个请求参数
onsuccess: 成功时的调用函数
onfail: 失败时的调用函数

实现如下

/**
 * AJAX函数封装
 * @param {string} url     请求地址（必须）
 * @param {object} options 发送请求的选项参数
 *   @config {string} [options.type] 请求发送的类型。默认为GET。
 *   @config {Object} [options.data] 需要发送的数据。
 *   @config {Function} [options.onsuccess] 请求成功时触发，function(oAjax.responseText, oAjax)。（必须）
 *   @config {Function} [options.onfail] 请求失败时触发，function(oAjax)。(oAJax为XMLHttpRequest对象)
 *
 *@returns {XMLHttpRequest} 发送请求的XMLHttpRequest对象
 */
function ajax(url, options) {
    //1.创建ajax对象
    var oAjax = null;
        /**
         * 此处必须需要使用window.的方式,表示为window对象的一个属性.不存在时值为undefined,进入else
         * 若直接使用XMLHttpRequest,在不支持的情况下会报错
         **/
    if (window.XMLHttpRequest) {
        //IE6以上
        oAjax = new XMLHttpRequest();
    } else {
        oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    //2.连接服务器
    //open(方法,url,是否异步)
    var param = ""; //请求参数。
    //只有data存在，且为对象使才执行
    var data = options.data ? options.data : -1; //缓存data
    if (typeof (data) === "object") {
        for (var key in data) { //请求参数拼接
            if (data.hasOwnProperty(key)) {
                param += key + "=" + data[key] + "&";
            }
        }
        param.replace(/&$/, "");
    } else {
        param = "timestamp=" + new Date().getTime();
    }

    //3.发送请求
    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) {
                //请求成功。形参为获取到的字符串形式的响应数据
                options.onsuccess(oAjax.responseText, oAjax);
            } else {
                //先判断是否存在请求失败函数
                //存在时，形参为XMLHttpRequest对象，便于进行错误进行处理
                if (options.onfail) {
                    options.onfail(oAjax);
                }
            }
        }
    };
    return oAjax;//发送请求的XMLHttpRequest对象
}

跨域方式

ajax本身并不能跨域，要借助其他方式进行跨域。引用有 SF

get方式的jsonp跨域，可以用jquery提供的$.ajax

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

$.ajax({
    url:'接口地址',
    type:'GET',
    data:'想给接口传的数据',
    dataType:'jsonp',
    success:function(ret){
        console.log(ret);
    }
});

这样很简单的就可以实现jsonp的跨域，获取接口返回值。实现原理是利用script标签跨域

post方式的form表单跨域。

a.com html:
<script>
function postCallback(data){}
</script>
<form acrion='接口链接' method='post' target='ifr'></form>
<iframe name='ifr'></iframe>

a.com callback.php:
<?php
header('Content-type: text/javascript');
echo '<script>';
//回调原页面上函数处理返回结果
echo 'window.top.postcallback(' .$_GET['data']. ');';
echo '</script>';

b.com api.php:

<?php
//....
$data = '{"ret":0,"msg":"ok"}';
// ** 让结果跳转到a.com域 **
header("Location: http://a.com/callback.php?data=".urlencode($data));

CORS跨域

原理：CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。

注：移动终端上，除了opera Mini都支持。

利用 CORS，http://www.b.com 只需添加一个标头，就可以允许来自 http://www.a.com 的请求，下图是我在PHP中的 hander() 设置，“*”号表示允许任何域向我们的服务端提交请求：

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

也可以设置指定域名：

header("Access-Control-Allow-Origin:http://www.b.com");

js部分：

$.ajax({
    url: a_cross_domain_url,
    crossDomain: true,
    method: "POST"
});

CORS比较适合应用在传送信息量较大以及移动端来使用。

script标签来跨域（有待补充调整）

<script src='访问的接口地址'></script>
js.onload = js.onreadystatechange = function() {
    if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
        // callback在此处执行
        js.onload = js.onreadystatechange = null;
    }
};

h5的postMessage

otherWindow.postMessage(message, targetOrigin);
otherWindow: 对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性；window.open的返回值；通过name或下标从window.frames取到的值。
message: 所要发送的数据，string类型。
targetOrigin: 用于限制otherWindow，“*”表示不作限制

a.com/index.html中的代码：

<iframe id="ifr" src="b.com/index.html"></iframe>
<script type="text/javascript">
window.onload = function() {
    var ifr = document.getElementById('ifr');
    var targetOrigin = 'http://b.com';  // 若写成'http://b.com/c/proxy.html'效果一样
                                        // 若写成'http://c.com'就不会执行postMessage了
    ifr.contentWindow.postMessage('I was there!', targetOrigin);
};
</script>

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

<script type="text/javascript">
    window.addEventListener('message', function(event){
        // 通过origin属性判断消息来源地址
        if (event.origin == 'http://a.com') {
            alert(event.data);    // 弹出"I was there!"
            alert(event.source);  // 对a.com、index.html中window对象的引用
                                  // 但由于同源策略，这里event.source不可以访问window对象
        }
    }, false);
</script>

6、子域跨域（document.domain+iframe）(h5中这个标签已经被禁止了)

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'；然后通过a.html文件中创建一个iframe，去控制iframe的contentDocument，这样两个js文件之间就可以“交互”了。当然这种办法只能解决主域相同而二级域名不同的情况。