HTML5跨域请求--POST方式

        var xmlHttp;
        // Create the XHR object.
        function createCORSRequest(method, url) {
            var xhr = new XMLHttpRequest();
            if ("withCredentials" in xhr) {
                // XHR for Chrome/Firefox/Opera/Safari.
                xhr.open(method, url, true);
            } else if (typeof XDomainRequest != "undefined") {
                // XDomainRequest for IE.
                xhr = new XDomainRequest();
                xhr.open(method, url);
            } else {
                // CORS not supported.
                xhr = null;
            }
            if (method == "POST") {
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            }
            return xhr;
        }

        // Helper method to parse the title tag from the response.
        function getTitle(text) {
            return text.match(‘<title>(.*)?</title>‘)[1];
        }

        //function callback() {
        //    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        //        var b = xmlHttp.responseText;
        //        alert(b);
        //    }
        //}

        // Make the actual CORS request.
        function makeCorsRequest(url) {
            // All HTML5 Rocks properties support CORS.

            xmlHttp = createCORSRequest(‘POST‘, url, true);
            //xmlHttp.onreadystatechange = callback;
            if (!xmlHttp) {
                alert(‘CORS not supported‘);
                return;
            }

            // Response handlers.
            xmlHttp.onload = function () {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    var text = xmlHttp.responseText;
                    // var title = getTitle(text);
                    var resultDiv = document.getElementById("callbacktext");
                    resultDiv.innerHTML = text;
                    //alert(‘Response from CORS request to ‘ + text);
                }
            };

            xmlHttp.onerror = function () {
                alert(‘Woops, there was an error making the request.‘);
            };

            var params = "Email=" + $("#email").val();
            xmlHttp.send(params);
        }

        function urlDeal(url){
            //解决缓存的转换
            if (url.indexOf("?") >= 0) {
                url = url + "&t=" + (new Date()).valueOf();
            } else {
                url = url + "?+=" + (new Date()).valueOf();
            }

            //解决跨域的问题
            if (url.indexOf("http://") >= 0) {
                url.replace("?", "&");
                url = "Proxy?url=" + url;
            }

            return url;
        }

        var url = "请求的API地址";
        //var params = { "Email": "[email protected]" };

        $("#btnPost").delegate("", "click", function () {
            makeCorsRequest(url);
        });
时间: 2024-10-27 11:03:42

HTML5跨域请求--POST方式的相关文章

审视跨域请求实现方式

之前在组内进行过相关分享,为防止以后再单独整理,故在此将自己的PPT内容存放下. 问题产生 在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源策略). 同源与非同源的区别: 1.协议 2.域名 3.端口号 三者必须相同,才能称为"同源"! 实际中的问题 Ajax通过XMLHttpRequest发起请求,而XMLHttpRequest则受制于同源策略. 解决方式 原理追踪 "callback"的

java跨域请求的方式

1.基于servlet和过滤器的方式 /** * 设置跨域请求相关参数的过滤器 * @Author LQY * @Date 2018/12/3 */ @WebFilter("/*") public class MyFilter implements Filter { @Override public void init(FilterConfig filterConfig) throws ServletException { } @Override public void destroy

jsonp跨域请求的方式

1.jsonp一种请求方式.用于解决一个棘手的问题: 由于浏览器具有同源策略:即可以通过后台去访问其他网站,而不能通过浏览器(ajax请求)访问其他网页或域(阻止ajax请求,但是无法阻止<script src="">请求,所有带src属性的都不阻止 巧妙的实现方式: 创建一个<script>标签,设置它的src属性为需要访问的地址,返回的数据必须是json格式的.只能发get请求 实现原理: 在src里面带一个callback=fun参数,参数的值是需要服务端

跨域请求的3种方式

视频教程 跨域请求的方式:3种 1.后台代理 2.jsonp 3.HTML5中的XHR2 需要前端会的方法是后两种. 2.jsonp使用方法:只支持get方式 $.ajax({dataType:"jsonp",jsonp:"callback",success:...,error:...});//前台,修改数据类型,定义jsonp属性和参数名,等待后台调用 var request=$_GET("callback");//后台,接收前台定义好的参数名

八种方式实现跨域请求

浏览器的同源策略 ? 提到跨域不能不先说一下"同源策略". ? 何为同源?只有当协议.端口.和域名都相同的页面,则两个页面具有相同的源.只要网站的 协议名protocol. 主机host. 端口号port 这三个中的任意一个不同,网站间的数据请求与传输便构成了跨域调用,会受到同源策略的限制. ? 同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互.这是一个用于隔离潜在恶意文件的关键的安全机制.浏览器的同源策略,出于防范跨站脚本的攻击,禁止客户端脚本(如 JavaScr

jQuery中Ajax+Spring MVC实现跨域请求

项目开发中,某个可独立.也可集成的子业务模块须要向外开放相关API接口,先说下项目本身使用了jersery来实现RESTful webservice以名词形式公布API.有意思的是在实际的操作中同事却通过Ajax跨域请求的方式去调用该API,先不说成功与否,这样的方式本就是"滑稽"的.和他一起探讨了此种做法的不合理性,之后选择jersey client的方式进行远程调用.只是他在跨域请求中遇到了问题,自己闲暇时间予以解决,这才是此篇文章的由来. jQuery对跨域请求有两种解决方式各自

jQuery jsonp跨域请求详解

跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具有相同的源,否则就是不同源的. 如果要在js里发起跨域请求,则要进行一些特殊处理了.或者,你可以把请求发到自己的服务端,再通过后台代码发起请求,再将数据返回前端. 这里讲下使用jquery的jsonp如何发起跨域请求及其原理. 先看下准备环境:两个端口不一样,构成跨域请求的条件. 获取数据:获取数据

jQuery jsonp跨域请求

跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具有相同的源,否则就是不同源的. 如果要在js里发起跨域请求,则要进行一些特殊处理了.或者,你可以把请求发到自己的服务端,再通过后台代码发起请求,再将数据返回前端. 这里讲下使用jquery的jsonp如何发起跨域请求及其原理. 先看下准备环境:两个端口不一样,构成跨域请求的条件. 获取数据:获取数据

js跨域请求方式 ---- JSONP原理解析

这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下 跨域请求数据解决方案主要有如下解决方法: 1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 Html5的XDomainRequest Flash request 分开说明: 一.JSONP: 直观的理解: 就是在客户端动态注册一个函数 function a(data),然后将函数名传到服务器,服务器返回一个a({/*json*/})到客户端运行,这样就调用客户端的 function a(data),从而