文档章节

原生JS解决跨域问题

YJ_
 YJ_
发布于 2017/07/27 13:58
字数 337
阅读 15
收藏 0
 Ajax异步交互
    1.创建对象
        var request = new XMLHttpRequest();
    2.指定请求
        request.open('GET','url');
    3.设定请求头
        request.setRequestHeader('key','value')
        request.setRequestHeader("Content-type","text/plain;charset=UTF-8");
    4.发送请求
        request.send('请求主题内容');  如果没有则为null
    5.取得响应
        request.onreadystatechange=function(){
            if(request.readyState==4 && request.status==200){
                var response=request.responseText/XML;
                showData(reponse);
            }
        }
        //处理后台响应回来的数据
        function showData(response){

        }

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js</title>
    <script src="jsonp.js"></script>
    <script>
        window.onload = function () {
            //解决跨域访问(在最前面的script标签里面引入之后才可以调用)
            // http://169.254.167.130/cb0.js这是别人电脑上的路径
            getJSONP('http://169.254.167.130/cb0.js',function (reponse) {
                test(reponse);
            });
            //处理拿到数据的函数
            function test(val) {
                alert();
                console.log(val);
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

一开始引入(提前封装好的)的jsonp.js

getJSONP.counter = 0;//回调函数名称计数器
function getJSONP(url,callback){
	var cbnum = "cb"+getJSONP.counter++;//cb0
	var cbname = "getJSONP."+cbnum;//getJSONP.cb0

	if(url.indexOf("?") === -1){
		url += "?jsonp="+cbname;//?jsonp=getJSONP.cb0
	}else{
		url += "&jsonp="+cbname;
	}
	var script = document.createElement("script");
	//为每个请求创建了一个全新的内部回调函数,作为getJSON函数的一个属性储存。 getJSONP[cb0] = function(){}
	getJSONP[cbnum]= function(response){
		try{
			callback(response);
		}finally{
			//清理工作:删除回调函数
			delete getJSONP[cbnum];//移除script元素
			script.parentNode.removeChild(script);	
		}
	};
	script.src = url;
	document.body.appendChild(script);
}

 

© 著作权归作者所有

YJ_

YJ_

粉丝 9
博文 117
码字总数 88993
作品 0
昌平
前端工程师
私信 提问
第113天:Ajax跨域请求解决方法

一、原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步:设置状态监听函数 第三步:open一个连接,true是异步请求 第四部:send一个请求,可以发送一个对象和字符串,不需要传递数据发送n...

半指温柔乐
2017/12/13
0
0
常见跨域解决方案以及Ocelot 跨域配置

常见跨域解决方案以及Ocelot 跨域配置 Intro 我们在使用前后端分离的模式进行开发的话,如果前端项目和api项目如果不是一个域名下的话往往会有跨域问题。今天来介绍一下我们在Ocelot网关配置...

WeihanLi
05/11
0
0
【转载】说说JSON和JSONP,也许你会豁然开朗,含jQuery用例

前言: 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯和本地数...

greatddk
2013/05/08
549
7
说说 JSON 和 JSONP

http://oss.org.cn/?action-viewnews-itemid-69846 前言 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。 当然了,通过调用强大的PhoneGap插...

大尾巴De鱼
2012/06/10
290
1
json和jsonp的联系和区别(转载)

说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨...

宋和毅
2014/01/01
663
1

没有更多内容

加载失败,请刷新页面

加载更多

好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
今天
6
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
今天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
今天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
今天
18
0
浅谈java过滤器Filter

一、简介 Servlet中的过滤器Filter是实现了javax.servlet.Filter接口的服务器端程序,主要的用途是过滤字符编码、做一些业务逻辑判断如是否有权限访问页面等。其工作原理是,只要你在web.xml...

青衣霓裳
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部