侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 144685 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

原生JS解决跨域问题

2024-04-03 星期三 / 0 评论 / 0 点赞 / 4 阅读 / 3233 字

Ajax异步交互 1.创建对象 var request = new XMLHttpRequest(); 2.指定请求 request.open('GET','url'); 3.设定请

 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);}

 

广告 广告

评论区