`

纯js获取url json/jsonp数据,支持主流浏览器和手机浏览器

    博客分类:
  • js
阅读更多
// 获取json数据,目前主流浏览器和手机浏览器都兼容
var getJSON = function(url, type) {
      type = type || 'get';
      return new Promise(function(resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open(type, url, true);
        xhr.responseType = 'json';
        xhr.onload = function() {
          var status = xhr.status;
          if (status == 200) {
            resolve(xhr.response);
          } else {
            reject(status);
          }
        };
        xhr.send();
      });
    };

 

// 我们这样使用
getJSON('/forum.php?mod=hot&page=' + page).then(function(data) {
  // Do something you want
}, function(status) {
  console.log('Something went wrong, status is ' + status);
});

 

 

// 获取jsonp数据我们可以这样
function insertReply(content) {
    document.getElementById('output').innerHTML = content;
}

// create script element
var script = document.createElement('script');
// assing src with callback name
script.src = 'http://url.to.json?callback=insertReply';
// insert script to document and load content
document.body.appendChild(script);

 

 

//如果上面的不支持,说明浏览器没有promise对象,可使用callback的方式:

var getJSON = function(url, success, error) {
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
          if (xhr.status === 200) {
            if (success)
              success(JSON.parse(xhr.responseText));
          } else {
            if (error)
              error(xhr);
          }
        }
      };
      xhr.open('GET', url, true);
      xhr.send();
    };


loadJSON('my-file.json',
         function(data) { console.log(data); },
         function(xhr) { console.error(xhr); }
);

 

分享到:
评论

相关推荐

    jsonp跨域调用

    **JSONP**(JSON with Padding)是一种被广泛采用的技术,用于绕过浏览器的同源策略限制,实现跨域数据请求。虽然JSONP并不是一种正式的标准或协议,但它在实际应用中发挥了重要作用。 JSONP的工作原理基于以下两个...

    jsonp跨域请求

    JSONP(JSON with Padding)是一种常见的解决JavaScript跨域问题的技术。由于浏览器的同源策略限制,JavaScript通常不能向不同源的服务器发起XMLHttpRequest请求。但JSONP通过动态插入`<script>`标签的方式,巧妙地...

    JSONP案例学习

    JSONP(JSON with Padding)是一种在JavaScript中跨域获取数据的技术,主要应用于浏览器环境,由于浏览器的同源策略限制,JavaScript不能直接从不同源获取数据。JSONP巧妙地利用了HTML `<script>` 标签不受同源策略...

    jsonp格式前端发送和后台接受写法的代码详解.docx

    JSONP(JSON with Padding)是一种跨域数据请求的方法,通常用于解决浏览器同源策略限制下的数据获取问题。同源策略是浏览器的一种安全措施,它限制了一个网页脚本只能读取来自同一源的文档或数据,这导致了跨域数据...

    jsonp解决跨域_js_方案_web_跨域_

    标题中的“jsonp解决跨域”指的是JavaScript对象标记协议(JSON with Padding,简称jsonp)这一跨域数据交互协议,它是Web应用程序中广泛使用的一种解决同源策略限制的技术。同源策略是浏览器为了安全而实施的一项...

    Cors跨域(四):解决方案对决JSONPvsCORS.docx

    JSONP(JSON with Padding)是一种解决跨域问题的方法,它主要应用于不支持CORS的老一代浏览器。JSONP的工作原理是利用`<script>`标签的特性,即`<script>`标签可以加载来自任意域的JavaScript文件,并且不会受到同源...

    JSONP原理及应用实例详解

    JSONP是解决浏览器同源策略限制的有效手段,通过动态插入`<script>`标签和回调函数的方式,允许网页从其他域获取JSON数据。虽然它有其局限性(只能用于GET请求,且没有错误处理机制),但在早些年,它是实现跨域数据...

    jsonp跨域请求数据实现手机号码查询实例分析

    JSONP(JSON with Padding)是一种在Web应用中实现跨域请求数据的有效方法。它允许用户在一个域的网页上访问另一个域的数据,这是由于浏览器的同源策略限制,导致在默认情况下不同域之间不能进行AJAX通信。同源策略...

    JQury实现Ajax跨域访问

    - **数据类型**:CORS支持所有类型的HTTP请求和数据类型,而JSONP仅限于GET请求和JSON数据格式。 ### 四、实际应用中的注意事项 1. **预检请求(Preflight Request)**:对于非简单请求(如POST、PUT、DELETE,...

    JavaScript跨域总结

    JSONP的工作原理是利用`<script>`标签不受同源策略限制的特点,通过动态创建`<script>`元素并指定其`src`属性为目标服务器提供的URL,该URL会返回一个JavaScript函数调用,函数名由客户端指定,参数为返回的数据。...

    JS跨域交互(jQuery+php)之jsonp使用心得

    其次,JavaScript语言原生支持JSON,所以几乎所有主流浏览器都对其有良好的支持。同时,JSONP作为轻量级的数据格式,相比其他数据格式占用更少的字符,特别适合在网络环境中传输。另外,JSON格式数据结构简单,...

    JSONP 跨域共享信息

    JSONP(JSON with Padding)是一种实现跨域请求的方法,特别适用于Web应用。...而JSONP的优势在于它的兼容性更好,支持所有主流浏览器,尤其对于那些不支持CORS的旧浏览器而言,JSONP是一种较为方便的解决方案。

    ajax课堂笔记

    - **浏览器兼容性**:确保支持所有主流浏览器的XMLHttpRequest实现,可能需要使用polyfill库。 - **回退机制**:对于不支持Ajax的浏览器,提供传统的表单提交或页面跳转方案。 - **缓存控制**:使用`cache: false`...

    .net Ajax 框架

    .NET AJAX框架支持JSON(JavaScript Object Notation)和XML作为数据交换格式。JSON因其轻量级和高效的特性,通常被首选用于AJAX通信。ASP.NET AJAX框架提供了JavaScriptSerializer类来序列化和反序列化JSON对象。 ...

    Ajax跨域提交

    这个策略旨在防止恶意网站通过脚本获取并操纵其他网站的数据,以保护用户的隐私和安全。然而,随着Web应用的复杂性和交互性的提高,跨域数据请求的需求越来越普遍,这就引出了Ajax跨域提交的概念。 Ajax,即...

    跨域问题 之 window.name

    标签“源码”和“工具”可能意味着在实现这个功能时,需要深入理解JavaScript源码和利用一些辅助工具,比如JSON库用于数据转换。在实际项目中,可能还会结合其他跨域解决方案,如CORS(跨源资源共享)、POSTMessage...

    AJAX In Action(中文版)

    - **跨浏览器兼容**: 不同浏览器对AJAX的支持程度不同,开发时需考虑IE、Firefox、Chrome等主流浏览器的差异。 - **错误处理**: 通过异常处理和日志记录,确保在出现错误时有合适的反馈。 通过《AJAX In Action...

    Ajax的综合案例

    例如,JSON因为其简洁和易读性,现在已成为Ajax应用中的主流数据格式。 ### 4. 响应数据处理 在`onreadystatechange`事件中,我们通常会检查`readyState`是否为4,表示请求已完成,`status`是否为200,表示请求...

    使用JavaScript 实现各种跨域的方法

    现在,JSON格式逐渐成为数据交换的主流格式,它基于纯文本,易于阅读,而且被原生JavaScript支持。JSON格式的数据主要通过两种描述符来定义,即大括号{}用来描述对象,方括号[]用来描述数组。它们之间的分隔符是逗号...

    Ajax实战(Ajax in action中文版) (例题)

    早期的Ajax应用常使用XML来传输数据,但JSON(JavaScript Object Notation)因其简洁、易于解析和更高效的性能,逐渐成为主流。JSON是JavaScript原生格式,可以无缝与JavaScript对象互换,简化了数据处理。 **3. ...

Global site tag (gtag.js) - Google Analytics