// 获取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**(JSON with Padding)是一种被广泛采用的技术,用于绕过浏览器的同源策略限制,实现跨域数据请求。虽然JSONP并不是一种正式的标准或协议,但它在实际应用中发挥了重要作用。 JSONP的工作原理基于以下两个...
JSONP(JSON with Padding)是一种常见的解决JavaScript跨域问题的技术。由于浏览器的同源策略限制,JavaScript通常不能向不同源的服务器发起XMLHttpRequest请求。但JSONP通过动态插入`<script>`标签的方式,巧妙地...
JSONP(JSON with Padding)是一种在JavaScript中跨域获取数据的技术,主要应用于浏览器环境,由于浏览器的同源策略限制,JavaScript不能直接从不同源获取数据。JSONP巧妙地利用了HTML `<script>` 标签不受同源策略...
JSONP(JSON with Padding)是一种跨域数据请求的方法,通常用于解决浏览器同源策略限制下的数据获取问题。同源策略是浏览器的一种安全措施,它限制了一个网页脚本只能读取来自同一源的文档或数据,这导致了跨域数据...
标题中的“jsonp解决跨域”指的是JavaScript对象标记协议(JSON with Padding,简称jsonp)这一跨域数据交互协议,它是Web应用程序中广泛使用的一种解决同源策略限制的技术。同源策略是浏览器为了安全而实施的一项...
JSONP(JSON with Padding)是一种解决跨域问题的方法,它主要应用于不支持CORS的老一代浏览器。JSONP的工作原理是利用`<script>`标签的特性,即`<script>`标签可以加载来自任意域的JavaScript文件,并且不会受到同源...
JSONP是解决浏览器同源策略限制的有效手段,通过动态插入`<script>`标签和回调函数的方式,允许网页从其他域获取JSON数据。虽然它有其局限性(只能用于GET请求,且没有错误处理机制),但在早些年,它是实现跨域数据...
JSONP(JSON with Padding)是一种在Web应用中实现跨域请求数据的有效方法。它允许用户在一个域的网页上访问另一个域的数据,这是由于浏览器的同源策略限制,导致在默认情况下不同域之间不能进行AJAX通信。同源策略...
- **数据类型**:CORS支持所有类型的HTTP请求和数据类型,而JSONP仅限于GET请求和JSON数据格式。 ### 四、实际应用中的注意事项 1. **预检请求(Preflight Request)**:对于非简单请求(如POST、PUT、DELETE,...
JSONP的工作原理是利用`<script>`标签不受同源策略限制的特点,通过动态创建`<script>`元素并指定其`src`属性为目标服务器提供的URL,该URL会返回一个JavaScript函数调用,函数名由客户端指定,参数为返回的数据。...
其次,JavaScript语言原生支持JSON,所以几乎所有主流浏览器都对其有良好的支持。同时,JSONP作为轻量级的数据格式,相比其他数据格式占用更少的字符,特别适合在网络环境中传输。另外,JSON格式数据结构简单,...
JSONP(JSON with Padding)是一种实现跨域请求的方法,特别适用于Web应用。...而JSONP的优势在于它的兼容性更好,支持所有主流浏览器,尤其对于那些不支持CORS的旧浏览器而言,JSONP是一种较为方便的解决方案。
- **浏览器兼容性**:确保支持所有主流浏览器的XMLHttpRequest实现,可能需要使用polyfill库。 - **回退机制**:对于不支持Ajax的浏览器,提供传统的表单提交或页面跳转方案。 - **缓存控制**:使用`cache: false`...
.NET AJAX框架支持JSON(JavaScript Object Notation)和XML作为数据交换格式。JSON因其轻量级和高效的特性,通常被首选用于AJAX通信。ASP.NET AJAX框架提供了JavaScriptSerializer类来序列化和反序列化JSON对象。 ...
这个策略旨在防止恶意网站通过脚本获取并操纵其他网站的数据,以保护用户的隐私和安全。然而,随着Web应用的复杂性和交互性的提高,跨域数据请求的需求越来越普遍,这就引出了Ajax跨域提交的概念。 Ajax,即...
标签“源码”和“工具”可能意味着在实现这个功能时,需要深入理解JavaScript源码和利用一些辅助工具,比如JSON库用于数据转换。在实际项目中,可能还会结合其他跨域解决方案,如CORS(跨源资源共享)、POSTMessage...
- **跨浏览器兼容**: 不同浏览器对AJAX的支持程度不同,开发时需考虑IE、Firefox、Chrome等主流浏览器的差异。 - **错误处理**: 通过异常处理和日志记录,确保在出现错误时有合适的反馈。 通过《AJAX In Action...
例如,JSON因为其简洁和易读性,现在已成为Ajax应用中的主流数据格式。 ### 4. 响应数据处理 在`onreadystatechange`事件中,我们通常会检查`readyState`是否为4,表示请求已完成,`status`是否为200,表示请求...
现在,JSON格式逐渐成为数据交换的主流格式,它基于纯文本,易于阅读,而且被原生JavaScript支持。JSON格式的数据主要通过两种描述符来定义,即大括号{}用来描述对象,方括号[]用来描述数组。它们之间的分隔符是逗号...
早期的Ajax应用常使用XML来传输数据,但JSON(JavaScript Object Notation)因其简洁、易于解析和更高效的性能,逐渐成为主流。JSON是JavaScript原生格式,可以无缝与JavaScript对象互换,简化了数据处理。 **3. ...