AJAX跨域封装及JS以POST方式提交数据跳转页面

跨域原因
浏览器的同源策略 ： 域名不同，协议不同，端口不同，是无法访问的
不同源地址之间如果需要相互请求，必须服务端和客户端配合使用
跨域的原理
jsonp 通过script 标签请求一个服务器 php文件
这个文件返回的结果是一段js，作用是调用我们事先定义好的函数
========================封装jsonp原理========================
封装jsonp原理：
客户端：

      function jsonp (url, params, callback) {
              var funcName = 'jsonp_' + Date.now() + Math.random().toString().substr(2, 5)
              if (typeof params === 'object') {
                var tempArr = []
                for (var key in params) {
                  var value = params[key]
                  tempArr.push(key + '=' + value)
                }
                params = tempArr.join('&')
              }

              var script = document.createElement('script')
              script.src = url + '?' + params + '&callback=' + funcName
              document.body.appendChild(script)

              window[funcName] = function (data) {
                callback(data)

                delete window[funcName]
                document.body.removeChild(script)
              }
            }

方法调用：

jsonp('http://localhost/jsonp/server.php', { id: 123 }, function (res) {
              console.log(res)
        })

PHP控制器端：

if (empty($_GET['callback'])) {
          header('Content-Type: application/json');
          echo json_encode($data);
          exit();
  }
        // 如果客户端采用的是 script 标记对我发送的请求
        // 一定要返回一段 JavaScript
        header('Content-Type: application/javascript');
        $result = json_encode($data);
                    $callback_name =$_GET['callback'];
                    echo "typeof {$callback_name} === 'function' && {$callback_name}({$result})";

==========================Jquery跨域请求使用=====================
Jquery跨域请求使用 CORS

$.ajax({          
        url:'http://localhost/jsonp/server.php'                                                                          
        dataType:'jsonp', 
        success:function(res){
            console.log(res);
        }
    })

PHP控制器端需要加请求头声明

    header('Access-Control-Allow-Origin:*')  # *通配符  可以指定域名跨域
    header('Cenntent-Type:application/javascript') #设置返回的数据

==========================js发送post请求跳转页面=====================
因为get方式提交数据都会显示在URL中，一个是安全问题，另外一个是URL长度限制，URL长度约为2083。所以数据量过多时会导致数据丢失。

/*
       *功能： JS跳转页面，并已POST方式提交数据
       *参数： URL 跳转地址 PARAMTERS 参数
       *返回值： 
       */

       function ShowReport_Click() {
           var parames = new Array();
           //添加参数
           parames.push({ name: "param1", value: "param1"});
           parames.push({ name: "param2", value: "param2"});
           Post("www.baidu.com", parames);
           return false;
       }

       /*
       *功能： 模拟form表单的提交
       *参数： URL 跳转地址 PARAMTERS 参数
       *返回值：
       */
       function Post(URL, PARAMTERS) {
           //创建form表单
           var temp_form = document.createElement("form");
           temp_form.action = URL;
           //如需打开新窗口，form的target属性要设置为'_blank'
           temp_form.target = "_self";
           temp_form.method = "post";
           temp_form.style.display = "none";
           //添加参数
           for (var item in PARAMTERS) {
               var opt = document.createElement("textarea");
               opt.name = PARAMTERS[item].name;
               opt.value = PARAMTERS[item].value;
               temp_form.appendChild(opt);
           }
           document.body.appendChild(temp_form);
           //提交数据
           temp_form.submit();
       }