从 AJAX 到 JSONP的基础学习

目录索引：

一、AJAX的概念

二、POST && GET

三、原生实现AJAX简单示例

3.1 实现代码

3.2 重点说明

四、框架隐藏域

4.1 基本概念

4.2 后台写入脚本

4.3 JS主动判断Iframe的改变

4.4 表单提交数据实战

五、JQ 的 AJAX

5.1 load()

5.2 $.get()

5.3 $.post()

5.4 $.getScript()

5.5 $.getJson()

5.6 $.ajax()

a. 常用的属性说明

b. 常用的事件说明

c. 全局事件说明

d. $.ajaxSetup()

5.7 AJAX的再次封装

5.8 序列化表单

六、JSONP的概念

6.1 JSONP的概念

6.2 自己封装的JSONP

6.3 JQ的JSONP使用。

一、

AJAX的概念

AJAX(Asynchronous JavaScript And XML) 中文翻译即“异步的Java

想读更多 ->

通过jsonp实现js跨域请求php脚本的解决方案

公司需要新开发一个项目，这个项目和其他产品有关联。现在需要从其他产品的页面通过加载js文件来实现数据交换。简单的说就是：有两个产品，分别是A和B，A产品提供JS文件接口给B产品，B产品只需把JS接口文件引入到自己的页面即可显示A产品的数据。

ajax使用json请求的话，如果是相同域名下是可以的。但是跨域的话就不能访问了。这时需要使用jsonp来解决问题。如果以下教程帮到了您，请点击关注哦！

A产品是新项目，负责编写JS接口文件，域名是localhost.testlink.com；

B产品引入JS接口文件，域名是localhost.xyh.com。

1、在A产品里编写JS接口文件代码。

这段代码的作用是通过id来获取B产品引入js时的src属性字符串，从而获取参数。

想读更多 ->

Nodejs使用Socket.IO类库WebSocket通信

Socket.io是一个简单的小类库，类库中实现了类似Node.js中的net模块所实现的功能，这些功能包括WebSocket通信，XHR轮询，JSONP轮询等，源码时代H5前端学科老师来聊一聊怎么使用这个类库，实现通信功能。

Socket.io类库可以接收所有与服务器端相连的客户端发送的消息，也可以相客户端发送消息，实现客户端和服务器端的即时通信。这个类库在服务器端和客户端之间提供了一个共享的接口，在客户端和服务器端连接建立以后，在处理通信消息时，我们开发者可以在客户端使用服务器端JS代码。

那么，我们怎么使用Socket.IO呢?

1.下载Socket.IO类库

npm install socket

2.在我们需要使用的模块中，引入

var socket = require( ‘ socket.io ’ )

3. 创建一个Socket.IO服务器，它依赖于一个已经创建好的HTTP服务器，在HTTP 服

想读更多 ->

Javascript - 由浅入深学习ajax跨域JSONP

什么是跨域？说直白点就是获取别人网站上的内容。但这么说貌似又有点混淆，因为通常我们用ajax+php就可以获取别人网站的内容，来看下面这个例子。

来看看跨域的例子，jquery+ajax是不能跨域请求的，因为受到浏览器的同源策略的限制，会报错。

错误：

但是script标签的src是具有跨域能力的，还有img的src属性一样，都能够获取从别人网站的内容。在没说道JSONP之前，我们可以用静态的script标签加上src去获取：

想读更多 ->

jsonp原理与具体细节介绍

这中间前端需要做什么？

后端又需要做些什么来支持？

超时�场景又该如何处理？

整个生命周期会有多个钩子可以被触发，而我们可以监听哪些钩子来得知请求的状况?

客户端利用script标签可以跨域请求资源的性质，向网页中动态插入script标签，来向服务端请求数据。

服务端会解析请求的url,至少拿到一个回调函数(比如callback=myCallba

想读更多 ->

JSON.stringify()-JSON 使用-JSONP 教程文档大全学习知识点

JSON.stringify()

JSON 通常用于与服务端交换数据。

在向服务器发送数据时一般是字符串。

我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

语法

参数说明：

value:

必需， 一个有效的 JSON 字符串。

replacer:

可选。用于转换结果的函数或数组。

如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。

如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数

想读更多 ->

JS跨域请求之JSONP

在项目开发中遇到跨域的问题，一般都是通过JSONP来解决的。但是JSONP到底是个什么东西呢，实现的原理又是什么呢。在项目的空闲时间可以好好的来研究一下了。

JSONP的产生

1.众所周知，Ajax请求资源受同域的限制，不管是静态资源，动态页面，web服务都不行

2.同时我们发现web页面上调用JS文件时则不受跨域的影响（不仅如此，我们还发现凡是拥有‘src’这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>等）

3.可想而知，当前阶段如果想通过web端（ActiveX控件、服务器代理、HTML5的websocket等方式不算）跨域访问数据就只有一种可能，那就是服务端把数据装进JS格式的文件里，供客户端调用和处理

4.数据的传输，我们知道一种叫JSON的纯字符数据格式可以简洁的描述复杂的数据结构，而且还被JS原生支持，在客户端可以很容易的处理这种格式的数据

5.这样解决方案的一目了然了，web端通过和调用脚本一模一样的方式，来调用跨域服务器上动态生成的JS文件。服务器之所以要动态生成JS文件，目的在于获取客户端的回调函数名并把客户端需要的数据通过JSON（也可以是纯字符串）的格式传进去

6.在客户端对JS文件调用成功后，也就获

想读更多 ->

SpringBoot 实现前后端分离的跨域访问（CORS）

序言：跨域资源共享向来都是热门的需求，使用CORS可以帮助我们快速实现跨域访问，只需在服务端进行授权即可，无需在前端添加额外设置，比传统的JSONP跨域更安全和便捷。

#一、基本介绍

简单来说，CORS是一种访问机制，英文全称是Cross-Origin Resource Sharing，即我们常说的跨域资源共享，通过在服务器端设置响应头，把发起跨域的原始域名添加到Access-Control-Allow-Origin 即可。

#1. CORS工作原理

CORS实现跨域访问并不是一蹴而就的，需要借助浏览器的支持，从原理题图我们可以清楚看到，简单的请求（通常指GET/POST/HEAD方式，并没有去增加额外的请求头信息）直接创建了跨域请求的XHR对象，而复杂的请求则要求先发送一个"预检"请求，待服务器批准后才能真正发起跨域访问请求。

根据官方文档W3C规范-CORS 的描述，目前CORS使用了如下头部信息：

注：请求头信息

想读更多 ->

web前端企业案例原生js封装jsonp实现百度在线翻译系统

需要完整代码和视频请评论后加前端群470593776领取

知识点：jsonp原理分析与封装, js动态监测用户输入状态 ,

语言切换模块，百度翻译API调用 , js编程思想, 业务逻辑解析。

由于课程的时间有限，所以对于布局的处理较为简单，刚入门的伙伴都可以完成布局，但是

核心的原生javascript代码，对于大部分人来说，都是一个难题，特别是对于插件的熟悉和调

用，这需要有较深的原生js功底，但是做出这么一个小项目，对于自己的提升还是很大的，不

建议照猫画虎似的学习，而是深入理解其中的逻辑关系！

以下附上源码，需要更多企业常用学习案例，项目实战请加前端免费资料群：470593776

群里有很多学习者，大家一起交流进步！

想读更多 ->

JSONP安全攻防技术

关于JSONP

JSONP全称是JSON with Padding，是基于JSON格式的为解决跨域请求资源而产生的解决方案。它的基本原理是利用HTML的元素标签，远程调用JSON文件来实现数据传递。如果想在a.com域下获取b.com下的JSON数据（getUsers.JSON）：

那么可以首先通过JSONP的“Padding”这个getUsers.JSON输出为：

对于实际应用过程中callback的名称，后台实现是动态输出的。上面例子用PHP实现如下：

然后在a.com使用＜script＞进行远程调用，在jQuery中可以直接这样调用：

然而，安全问题一直伴随着业务发展，JSONP同样带来各种安全问题。本文就将梳理JSONP实现过程中的安全攻防。

JSON劫持

JSON劫持又称“JSON Hijacking”，2008年国外安全研究人员开始提到由JSONP带来的风险。这个问题属于CSRF（Cross-site request forgery跨站请求伪造）攻击范畴

想读更多 ->