用jsonp 解决跨域问题 - Go语言中文社区

用jsonp 解决跨域问题


想自己用 js写一个原生的ajax请求,访问本地文件,json/txt。但是demo,写了一个后,发现

原来是跨域了。

                           js 写的原生ajax 请求代码如下

html代码

js 代码

function loadX (){

    /* 老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
    variable=new ActiveXObject("Microsoft.XMLHTTP");
    为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。
    如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :*/


    var xmlhttp;
    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();     //IE7,FireFox,Chrome,OPera,Safari
    }else{
        xmlhttp = new ActiveXobject('Microsoft.xmlHTTP');  // IE6,IE5
    }   


       /* 属性    描述
        onreadystatechange  存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 
        readyState      存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
                        0: 请求未初始化
                        1: 服务器连接已建立
                        2: 请求已接收
                        3: 请求处理中
                        4: 请求已完成,且响应已就绪
          status        200: "OK"
                        404: 未找到页面

     onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
       当 readyState 等于 4 且状态为 200 时,表示响应已就绪:*/


    //    根据 readyState  值不同,代表响应状态 的进程
  xmlhttp.onreadystatechange=function(){
      if (xmlhttp.readyState==0){
                  alert(0)
      }
      else if (xmlhttp.readyState==1){
                  alert(1)
      }
      else if (xmlhttp.readyState==2){
                  alert(2)
      }
      else if (xmlhttp.readyState==3){
                  alert(3)
      }
    else if (xmlhttp.readyState==4 && xmlhttp.status==200){
              alert(4)
              document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
      }
  }
        xmlhttp.open('GET','text.txt',true);
        xmlhttp.send(); 

}

txt 文本内的内容

网上查找了方法,可以用jsonp 。于是又去找jsonp 的文档

1.jsonp简介
json 是一种数据格式

jsonp 是一种数据调用的方式。

1)什么是jsonp

为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。

2)与ajax的区别

1、ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jQuery和ext等框架都把jsonp作为ajax的一种形式进行了封装;

2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加script标签来调用服务器提供的js脚本。

3、所以说,其实ajax与jsonp的区别不在于是否跨域,ajax通过服务端代理一样可以实现跨域,jsonp本身也不排斥同域的数据的获取。

4、还有就是,jsonp是一种方式或者说非强制性协议,如同ajax一样,它也不一定非要用json格式来传递数据,如果你愿意,字符串都行,只不过这样不利于用jsonp提供公开服务。

总而言之,jsonp不是ajax的一个特例,尽管jquery等把jsonp封装进了ajax,也不能改变这一点。

  1. 自己使用jsonp 调用本地文件的demo

index.json 中内容

这样打印出来的内容就是这样的

版权声明:本文来源博客园,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://www.cnblogs.com/jiaoshuai/p/6844993.html
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2019-11-17 17:27:29
  • 阅读 ( 971 )
  • 分类:前端

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢