XMLHttpRequest VS. JSONP

最新推荐文章于 2023-08-06 14:47:23 发布
VIP文章 最新推荐文章于 2023-08-06 14:47:23 发布
阅读量3.3k 收藏 3
点赞数 1
分类专栏： JavaScript 文章标签： JSONP XMLHttpRequest 跨域安全问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tounaobun/article/details/8619397
版权

    当我们利用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
    评论
专栏目录
前端面试题--XMLHTTPRequest和JSONP的应用场景，以及其分别如何检测请求错误的
Y_secret的博客
07-07 1202
XMLHttpRequest用于浏览器端与服务器端异步请求数据从面实现对页面的无刷新修改，支持GET/POST请求，一般用于非跨域的场景。如果需要使用XMLHttpRequest跨域请求数据，需要通过CORS头支持。 JSONP用于跨域请求数据的场景，只支持GET请求。 XMLHttpRequest异常判断一般通过该对象的readystate和http状态码status来判断，JSONP的异常判断一般是onerror事件和超时timer来判断。 （答案源自牛客网面试试题） XMLHttpRequest.
XMLHttpRequest 2级 &&进度事件&&JSONP
YogaLin_qwq的博客
07-25 332
XMLHttpRequest 2级 FormData ​ FormData 为序列化表单以及创建与表单格式相同的数据（用于通过 XHR传输）提供了便利 创建FormData对象 ​ 1.append()方法:接收两个参数 => 键和值，分别对应表单字段的名字和字段中包含的值。可以像如下所示这样添加任意多个键值对 var data = new FormData(); data.append("name", "Nicholas"); ​ 2.通过向 FormData 构造函数中传入表单元素 var
jQuery使用JSONP时的错误处理
weixin_30258027的博客
12-02 218
概述 什么是域，简单来说就是协议+域名或地址+端口，3者只要有任何一个不同就表示不在同一个域。跨域，就是在一个域中访问另一个域的数据。 如果只是加载另一个域的内容，而不需要访问其中的数据的话，跨域是很简单的，比如使用iframe。但如果需要从另一个域加载并使用这些数据的话，就会比较麻烦。为了安全性，浏览器对这种情况有着严格的限制，需要在客户端和服务端同时做一些设置才能实现跨域请求。 JSONP...
Ajax03-XMLHttpRequest技术,JSON对象,封装自己的ajax,同源策略&跨域解决,防抖&节流
weixin_40630195的博客
01-15 1128
Ajax03-XMLHttpRequest技术,JSON对象,封装自己的ajax,同源策略&跨域解决,防抖&节流
XMLHttpRequest的同域请求和跨域请求以及jsonp
ali1995的博客
12-14 2万+
XMLHttpRequest的同域请求和跨域请求以及jsonpXMLHttpRequest的同域请求和跨域请求以及jsonp 使用XMLHttpRequest xhr同域请求get post xhr跨域请求 jsonp使用XMLHttpRequest先创建一个xhr对象，下面代码是js高级程序设计里面给出的兼容性代码function createXHR() { if(typeof X
1.XMLHttpRequest 的基本用法和防抖和节流的使用
shjd_J的博客
06-21 586
本章节讲解: XMLHttpRequest的概念、XMLHttpRequest的使用、GET请求携带参数、POST请求携带参数、数据交换格式JSON、ajax封装XMLHttpRequest是浏览器内置的一个构造函数。所以使用的时候需要 new ​ 作用：基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。 ​ axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR） 封装的！主要的
深入讲解xhr（XMLHttpRequest）/jsonp请求之abort
10-19
主要给大家深入的介绍了关于xhr（XMLHttpRequest）/jsonp请求之abort的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
JSONP之我见
10-24
本文主要向大家介绍了个人对于jsonp的理解，jsonp的概念，跨域问题，以及jsonp与XMLHttpRequest的区别，由于本人也是javascript的初学者，难免会有些不当之处，还请指正，谢谢。
深入分析jsonp协议原理
10-23
JSONP的最基本的原理是：动态添加一个[removed]标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与ajax XmlHttpRequest协议无关了。
使用XMLHttpRequest实现文件异步下载
最新发布
weixin_42032770的博客
08-06 1705
我们在jquery中常用的ajax其实就是对XMLHttpRequest进行了封装。ajax的底层就是XMLHttpRequest。jquery的出现主要就是为了更快捷的操作DOM，以及解决一些浏览器兼容性问题。jquery$.ajax通过对XHR（XMLHttpRequest简称XHR）封装，做了兼容性的处理，简化了使用，增加了对JSONP的支持。JSONP类型可以支持跨域，因为jsonp不受同源策略的影响。所谓同源策略，”源“指的是：协议名（http/https）、域名/Ip地址、端口号。
XMLhttpRequest 请求 XML,JSON ,POJO 数据
02-22 405
http://takeme.iteye.com/blog/1691725 在使用XMlhttpRequest对象发送请求和响应之前，必须首先使用javaScript对象创建一个XMLHttpRquest对象。  Js代码   var xmlhttp；   function getXMLHttpRequest(){     if(window.ActiveXObje
什么是JSONP及其实现原理
My_Soul_的博客
05-20 2586
一、为什么会有JSONP 解决跨域问题；因为XMLHttpRequest有同源策略，而在实际开发中又常有跨域的需求，早期开发者为解决跨域问题，设计出了JSONP这个东西 二、JSONP长什么样 类似JSON，一种JSON的变体，样式就像是包在函数的参数里 函数名({“data”:”数据”})，一般情况下这个函数都是个回调函数即 callback({“data”:”数据”}) 三、JSONP的实现原理 利用 <script>标签可以跨域get引入js脚本；通过<script><i
Ajax看这一篇就足够了：ajax,XMLHttpRequest,xml,json,FormData,跨域
subsistent的博客
12-11 602
Ajax看这一篇就足够了：ajax,XMLHttpRequest,xml,json,FormData,跨域
简述XMLHttpRequest、JSONP的适用场景，并针对两种请求形式简述如何检测请求错误...
SevenLee的个人博客
09-14 278
XMLHttpRequest用于浏览器端与服务器端异步请求数据从面实现对页面的无刷新修改，支持GET/POST请求，一般用于非跨域的场景。如果需要使用XMLHttpRequest跨域请求数据，需要通过CORS头支持。 JSONP用于跨域请求数据的场景，只支持GET请求。 XMLHttpRequest异常判断一般通过该对象的readystate和http状态码status来判断，JSONP的异常...
Jsonp解决ajax跨域问题
热门推荐
Saytime
05-30 4万+
一、介绍 最近跨域问题比较多，而且自己刚好也看到这一块，就总结了一下，关于JSONP的东西百度的话东西确实很多，很多人都是复制别人的，如此下去，其实找的资料就那么几份，关键是我还看不懂，可能是能力问题吧，自己经过很多尝试，所以总结了一下，终究还是弄懂了皮毛。注意一点是，这里是用Jsonp解决ajax的跨域问题，具体的实现其实不是ajax。 1、同源策略浏览器有一个很重要的概念——同源策略(Sam
jsonp跨域问题【主要解决的是返回状态码是200，但是js脚本仍然是执行error模块问题】
Thinking
01-05 2万+
我jsonp的坑在这里： 最终发现后台传回来的数据是这样的  参照此文章跨域请求之jQuery的ajax jsonp的使用解惑 http://www.cnblogs.com/know/archive/2011/10/09/2204005.html解决问题， 原因是返回的数据中不能有" "，正确返回的数据是这样的，如下图所示： 概述： 1、首先要了解什么是域？ 2、为什
小渣渣的json和jsonp和ajax的实质和区别
weixin_30314813的博客
01-17 268
json和jsonp和ajax的实质和区别ajax的两个问题 　　1.ajax以何种格式来交换数据 　　2.跨域的需求如何解决 　　　　数据跨域用自定义字符串或者用XML来描述 　　　　跨域可以用服务器代理来解决jsonp来跨域 　　json是一种数据交换格式 “暗号” 描述信息格式 　　jsonp是非官方跨域数据交互协议 “接头方式” 信息传递双方约定的方法 　　json是基于文本的...
ajax和jsonp
佳小凡的博客
07-31 1488
今天群里有小伙伴说：只会做页面不会接接口。聊了会，感觉还是写写ajax和jsonp吧。 先来说说ajax和jsonp是啥，然后再看看他们的实例。 官方点讲，ajax是用来创建快速动态页面的技术，也可以说是一种方法。它通过XMLHttpRequest对象来进行服务器与后台数据的交换并且两者间只需要少量的数据交换，就可以实现网页的异步更新。就是在网页不重新加载的情况下，局部更新内容。 但是aja...
ajax中jsonp跨域，回调成功但是进入error方法中
qq_35221138的博客
11-01 5795
首先你要确定什么是跨域 https://blog.csdn.net/u014727260/article/details/72793459 附上前端代码 var data = { "username":"123", "password":"456" } $.ajax({ url: "http://localhost:9...
JSONP 是 XMLHttpRequest 中的一种
03-25
跨域请求方式，而不是一种语言模型。它的作用是在当前页面中通过添加标签的形式，请求外部服务器中的数据并且可以直接在当前页面中使用返回的数据。这种方式相对于普通的 AJAX 请求可以实现跨域请求，但是由于安全性...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值