Heim > Web-Frontend > js-Tutorial > 使用JavaScript 实现各种跨域的方法_基础知识

使用JavaScript 实现各种跨域的方法_基础知识

WBOY
Freigeben: 2016-05-16 17:34:07
Original
1075 Leute haben es durchsucht

一、一些概念

①传统Ajax:交互的数据格式——自定义字符串或XML描述;

    跨域——通过服务器端代理解决。

②如今最优方案:使用JSON格式来传输数据,使用JSONP来跨域。

③JSON:一种数据交换格式。基于纯文本、被原生JS支持。

      格式:两种数据类型描述符:大括号{ }、方括号[ ]。分隔符逗号、映射符冒号、定义符双引好。

④JSONP:一种跨域数据交互协议,非官方。

  1、Web页面调用js文件,可跨域。扩展:但凡有src属性的标签都具有跨域能力。

  2、跨域服务器 动态生成数据 并存入js文件(通常json后缀),供客户端 调用。

  3、为了便于客户端使用数据,形成一个非正式传输协议,称为JSONP。该协议重点是允许用户传递一个callback参数给服务器,然后服务器返回数据时 将此callback参数作为函数名包裹住JSON数据,使得客户端可以随意定制自己的函数来自动处理返回数据。


二、JSONP实现

实例1——客户端单方面接收:

①客户端——在客户端设置创建一个函数对象,名称可为callFunc,用于接收服务器的js数据和对其进行处理。
  js数据中的核心是:调用callFunc函数的同时附带着参数,此参数即data对象的值。

复制代码 代码如下:




②服务器端——直接调用客户端js中的函数,并传入数据。
复制代码 代码如下:

callFunc({"result":"value1"});

实例2——客户端向服务器传送 指定函数名,服务器端接收该函数名 并调用对应函数 将数据以参数形式传入。
复制代码 代码如下:



总结:实现的代码并不复杂,但在实现Ajax跨域、frameset/iframe跨域等却是效率颇高的。
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage