XMLHttpRequest VS. JSONP

最新推荐文章于 2024-07-19 10:11:24 发布
最新推荐文章于 2024-07-19 10:11:24 发布
阅读量3.4k 收藏 3
点赞数 1
分类专栏： JavaScript 文章标签： JSONP XMLHttpRequest 跨域安全问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tounaobun/article/details/8619397
版权
本文探讨了XMLHttpRequest在跨域请求时遇到的安全问题，导致无法从外部服务器获取数据。为解决此问题，文章介绍了JSONP（JSON with Padding）的工作原理，通过在外部服务器的响应中嵌入回调函数来实现数据的传递。虽然JSONP提供了跨域数据获取的途径，但存在安全风险。相比之下，XMLHttpRequest更为安全，但受限于同源策略。
摘要由CSDN通过智能技术生成

    当我们利用XMLHttpRequest对象从本地服务器获取数据时是可以的。

    假设我们使用的数据格式为JSON(JavaScript Object Notation)，并且我们在本地服务器上部署了一个样本数据data.json:

{
"completed_in":0.044,
"max_id":306750251744784385,
"max_id_str":"306750251744784385",
"page":1,
"query":"hfhtml5",
"refresh_url":"?since_id=306750251744784385&q=hfhtml5",
"results":[],
"results_per_page":15,
"since_id":0,
"since_id_str":"0"
}

好了，有了数据，我们试着编写一个简单的页面文件来获取该数据：（该页面文件和data.json位于同一目录下） 

<!doctype html>
<html lang="en">
<head>
	<title>Using Canvas</title>
	<meta charset="utf-8" />
	<script>
		
		function createList(attribute) {
			var element = document.createElement("li");
			element.innerHTML = attribute;
			var list = document.getElementById("list");
			list.appendChild(element);
		}
		var request = new XMLHttpRequest();
		request.open("GET", "data.json");
		request.onload = function() {
			if(request.status == 200) {
				
				var text = request.responseText;
				var object = JSON.parse(text);
				createList("completed_in:" + object.completed_in);
				createList("max_id:" + object.max_id);
				createList(&#
最低0.47元/天 解锁文章
czjuttsw
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入讲解xhr（XMLHttpRequest）/jsonp请求之abort
10-19
主要给大家深入的介绍了关于xhr（XMLHttpRequest）/jsonp请求之abort的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
jQuery使用JSONP时的错误处理
weixin_30258027的博客
12-02 229
概述 什么是域，简单来说就是协议+域名或地址+端口，3者只要有任何一个不同就表示不在同一个域。跨域，就是在一个域中访问另一个域的数据。 如果只是加载另一个域的内容，而不需要访问其中的数据的话，跨域是很简单的，比如使用iframe。但如果需要从另一个域加载并使用这些数据的话，就会比较麻烦。为了安全性，浏览器对这种情况有着严格的限制，需要在客户端和服务端同时做一些设置才能实现跨域请求。 JSONP...
Ajax03-XMLHttpRequest技术,JSON对象,封装自己的ajax,同源策略&跨域解决,防抖&节流
weixin_40630195的博客
01-15 1187
Ajax03-XMLHttpRequest技术,JSON对象,封装自己的ajax,同源策略&跨域解决,防抖&节流
浏览器是如何渲染页面的？（看这一篇就够了！！！！）
最新发布
2303_77986104的博客
07-19 978
只有真正了解到浏览器渲染网页的每个步骤机制，才能在开发的过程中对每个步骤进行优化。
js【详解】ajax （含XMLHttpRequest、 同源策略、跨域、JSONP）
朝阳39的博客
03-13 1206
借助 script 标签 向目标服务器加载到 jsonp.js 文件，执行 callback 函数，因本地已定义了 callback 函数，便会触发本地 js 代码的执行，获取到 jsonp.js 文件中的数据，从而实现了跨域。服务器设置 http header，即服务器端将指定网址设置为白名单，允许它以指定的方法进行跨域访问。JSONP 实现跨域的过程：借助 script 标签没有同源策略限制的特点，向跨域的目标服务器加载到需要的数据。所有的跨域，都必须经过 server 端允许和配合。
前端面试题--XMLHTTPRequest和JSONP的应用场景，以及其分别如何检测请求错误的
Y_secret的博客
07-07 1227
XMLHttpRequest用于浏览器端与服务器端异步请求数据从面实现对页面的无刷新修改，支持GET/POST请求，一般用于非跨域的场景。如果需要使用XMLHttpRequest跨域请求数据，需要通过CORS头支持。 JSONP用于跨域请求数据的场景，只支持GET请求。 XMLHttpRequest异常判断一般通过该对象的readystate和http状态码status来判断，JSONP的异常判断一般是onerror事件和超时timer来判断。 （答案源自牛客网面试试题） XMLHttpRequest.
XMLHttpRequest的同域请求和跨域请求以及jsonp
热门推荐
ali1995的博客
12-14 2万+
XMLHttpRequest的同域请求和跨域请求以及jsonpXMLHttpRequest的同域请求和跨域请求以及jsonp 使用XMLHttpRequest xhr同域请求get post xhr跨域请求 jsonp使用XMLHttpRequest先创建一个xhr对象，下面代码是js高级程序设计里面给出的兼容性代码function createXHR() { if(typeof X
jsonp跨域
08-03
但JSONP巧妙地避开了这个限制，因为它不是通过XMLHttpRequest对象发送请求，而是通过`<script>`标签的`src`属性，请求的响应被封装在一个JavaScript函数调用中，然后由浏览器自动执行。 JSONP的工作原理如下： 1. ...
jsonp.pdf文件
11-19
### JSONP在方案中心项目中的应用 #### 一、背景介绍与问题提出 随着Web技术的发展，AJAX（Asynchronous JavaScript and XML）作为一种提高Web应用交互性和用户体验的技术被广泛采用。然而，AJAX的核心组件...
JSONP之我见
10-24
本文主要向大家介绍了个人对于jsonp的理解，jsonp的概念，跨域问题，以及jsonp与XMLHttpRequest的区别，由于本人也是javascript的初学者，难免会有些不当之处，还请指正，谢谢。
1.XMLHttpRequest 的基本用法和防抖和节流的使用
shjd_J的博客
06-21 662
本章节讲解: XMLHttpRequest的概念、XMLHttpRequest的使用、GET请求携带参数、POST请求携带参数、数据交换格式JSON、ajax封装XMLHttpRequest是浏览器内置的一个构造函数。所以使用的时候需要 new ​ 作用：基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。 ​ axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR） 封装的！主要的
详解如何在Vue项目中发送jsonp请求
10-16
主要介绍了详解如何在Vue项目中发送jsonp请求，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
简述XMLHttpRequest、JSONP的适用场景，并针对两种请求形式简述如何检测请求错误...
SevenLee的个人博客
09-14 301
XMLHttpRequest用于浏览器端与服务器端异步请求数据从面实现对页面的无刷新修改，支持GET/POST请求，一般用于非跨域的场景。如果需要使用XMLHttpRequest跨域请求数据，需要通过CORS头支持。 JSONP用于跨域请求数据的场景，只支持GET请求。 XMLHttpRequest异常判断一般通过该对象的readystate和http状态码status来判断，JSONP的异常...
使用XMLHttpRequest实现文件异步下载
weixin_42032770的博客
08-06 1996
我们在jquery中常用的ajax其实就是对XMLHttpRequest进行了封装。ajax的底层就是XMLHttpRequest。jquery的出现主要就是为了更快捷的操作DOM，以及解决一些浏览器兼容性问题。jquery$.ajax通过对XHR（XMLHttpRequest简称XHR）封装，做了兼容性的处理，简化了使用，增加了对JSONP的支持。JSONP类型可以支持跨域，因为jsonp不受同源策略的影响。所谓同源策略，”源“指的是：协议名（http/https）、域名/Ip地址、端口号。
XMLhttpRequest 请求 XML,JSON ,POJO 数据
02-22 416
http://takeme.iteye.com/blog/1691725 在使用XMlhttpRequest对象发送请求和响应之前，必须首先使用javaScript对象创建一个XMLHttpRquest对象。  Js代码   var xmlhttp；   function getXMLHttpRequest(){     if(window.ActiveXObje
JavaScript - XMLHttpRequest 应用示例（传输二进制数据、JSON 字符串，监测进度）
kikajack的博客
02-09 9512
XMLHttpRequest - Living Standard 一直更新的官方标准 MDN XMLHttpRequest 使用 描述 XMLHttpRequest-2 新功能的博客文章 1. 异步模式或同步模式 XMLHttpRequest 对象的 open() 方法的第三个参数 async 设为 false 时，该 XMLHttpRequest 请求以同步模式进行。同步模式用户体验差，...
XMLHttpRequest 2级 &&进度事件&&JSONP
YogaLin_qwq的博客
07-25 349
XMLHttpRequest 2级 FormData ​ FormData 为序列化表单以及创建与表单格式相同的数据（用于通过 XHR传输）提供了便利 创建FormData对象 ​ 1.append()方法:接收两个参数 => 键和值，分别对应表单字段的名字和字段中包含的值。可以像如下所示这样添加任意多个键值对 var data = new FormData(); data.append("name", "Nicholas"); ​ 2.通过向 FormData 构造函数中传入表单元素 var
什么是JSONP及其实现原理
My_Soul_的博客
05-20 2644
一、为什么会有JSONP 解决跨域问题；因为XMLHttpRequest有同源策略，而在实际开发中又常有跨域的需求，早期开发者为解决跨域问题，设计出了JSONP这个东西 二、JSONP长什么样 类似JSON，一种JSON的变体，样式就像是包在函数的参数里 函数名({“data”:”数据”})，一般情况下这个函数都是个回调函数即 callback({“data”:”数据”}) 三、JSONP的实现原理 利用 <script>标签可以跨域get引入js脚本；通过<script><i
jsonp和XMLHttpRequest用法异同，jsp+js+servlet+mysql
编程的取经之路
04-10 707
XMLHttpRequest版： index.html: <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServer
JSONP 是 XMLHttpRequest 中的一种
03-25
跨域请求方式，而不是一种语言模型。它的作用是在当前页面中通过添加<script>标签的形式，请求外部服务器中的数据并且可以直接在当前页面中使用返回的数据。这种方式相对于普通的 AJAX 请求可以实现跨域请求，但是由于安全性较差，所以在现代的前端开发中已被较少使用，而被 CORS（跨域资源共享）所取代。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值