澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

详解ajax跨域问题解决方案

1、简介

  这篇小说将会用最直白的艺术介绍RPC,以至落到实处RPC顾客端的Ajax跨域调用的事例。

  RPC(Remote Procedure Call Protocol)--远程进度调用合同,它是意气风发种通过互连网从远程计算机程序上倡议服务,而无需精晓底层互连网能力的议和。RPC和睦要是某个传输合同的存在,如TCP或UDP,为通讯程序之间教导新闻数据。在OSI网络通讯模型中,RPC超过了传输层和应用层。RPC使得开辟包罗网络分布式多程序在内的应用程序特别便于。

  RPC采纳顾客机/服务器形式。央浼程序正是叁个客商机,而服务提供程序正是叁个服务器。首先,客户机调用经过发送八个有过程参数的调用消息到服务进程,然后等待答复音信。在劳务器端,进度保持睡觉状态直到调用音信的到达结束。当三个调用音信达到,服务器得到进度参数,总括结果,发送答复音讯,然后等待下贰个调用新闻,最终,顾客端调用经过采纳答复音讯,拿到进度结果,然后调用施行后续拓宽。

  以上来自度娘!看完上面清楚怎么样是RPC么,在心头能将RPC整个服务进度构造出来么?当然不能够呀,对于大家这种小白来讲最棒是用最直接的言语实行描述。

  从字面上我们是大约通晓到是从二个服务器中调用另三个服务器中的方法,使用它提供的作用。在本人最先阶接触RPC的时候,是在此本书中《PHP精髓:编写高效PHP代码》【(美)Lorna Mitchell,(美)Davey 沙夫ik,(美)马特hew Turland著;彭冲,胡琳译】。是的,笔者所从事的言语就是社会风气上最佳的语言--PHP,222333哈哈。

  在这里本书中所介绍的RPC的兑现格局是经过HTTP合同举办的。可是当本身在探索有关质地的时候,已看其它语言的事例,咋不相像的呢,难道PHP正是特殊的?RPC便是远程调用,经常的话是不关语言层面包车型地铁哟!

  的确,RPC=Remote Produce Call 是后生可畏种技艺的概念名词它能够通过分歧的主意落成。http是rpc实现的后生可畏种方法,RPC还足以经过Socket本身达成生机勃勃套契约来贯彻。当然啦,差别的落实形式有两样的风味,长短连接、数据的传输格局、灵活性等等。

  RPC的着力并不在于选择什么契约。RPC的目标是令你在本地调用远程的艺术,而对您来讲这一个调用是晶莹的,你并不知道那个调用的不二诀假设布局哪个地方。通过RPC能解耦服务,那才是应用RPC的实在指标。

RPC(远程进程调用)是哪些

  • 轻易易行的说,RPC就是从豆蔻梢头台机器(客商端卡塔 尔(阿拉伯语:قطر‎上通过参数字传送递的艺术调用另生龙活虎台机械(服务器卡塔 尔(英语:State of Qatar)上的一个函数或方法(能够统称为劳动卡塔尔国并收获重返的结果。
  • RPC 会掩盖底层的通信细节(没有必要一贯管理Socket通信或Http通讯卡塔 尔(英语:State of Qatar)
  • RPC 是三个倡议响应模型。顾客端发起号召,服务器再次来到响应(相通于Http的行事办法卡塔 尔(阿拉伯语:قطر‎
  • RPC 在利用格局上像调用本地函数(或艺术卡塔尔相近去调用长途的函数(或形式卡塔尔

  即能够调用远程规定好的接口就可称为RPC!在本身上生机勃勃篇文章中所讲的Web service(SOAP卡塔 尔(阿拉伯语:قطر‎也是RPC的黄金年代种实现情势。

  Thrift ,那是自身多年来求学的一个RPC框架,它很强盛,数据是经过二进制格式实行传输,相对XML 和 JSON 体量更加小,对于高并发、大数据量和多语言的条件更有优势。当然啦,这里不讲这几个RPC框架,毕竟刚接触,对于Thrift那下边包车型客车学识只怕生手等级。能懂一丝丝但是间距将它写成博客随笔依然差超远的。

  接下去自己将接纳HTTP情势来兑现叁个RPC,并且在客商端中能够在Ajax下开展跨域访谈。

读书目录

后天来记录一下关于ajax跨域的片段标题。以备不时之需。

一、PHP

2、PRC实例

  景况介绍:www.test88.com作为劳务主机、www.test99.com作为顾客端主机

  五个好的api能够协理分裂的格式输出、许多RPC接纳post格局提交数据!接下去大家将动用json格式输出、POST提交数据

  • 1、简介
  • 2、PRC实例
  •   2.1、先创设具体服务职能的逻辑程序
  •   2.2、服务端提供对应的入口
  •   2.3、建构跨域代理脚本
  •   2.4、Ajax访问
  •   2.5、最早测量试验
  • 3、总结

跨域

认识PHP

  • PHP是风华正茂种创造动态交互作用性站点的劳动器端脚本语言
    PHP开源、免费、应用普及 【举例】:脸书、WordPress
  • PHP能够生产动态页面内容
  • PHP能够创建、展开、读取、写入、删除以致关闭服务器上的文书
  • PHP能够吸收表单数据
  • PHP能够发送并收复cookies
  • PHP能够增添、删除、改进数据库中的数据
  • 能够范围顾客访谈网址中的有些页面
    ……
    PHP兼容WEB服务器【例如】:Apache 、IIS
    PHP辅助数据库【例如】:MySQL、Oracle、SQL Server

  2.1、先创建具体服务效用的逻辑程序

  WebServer.class.php【www.test88.com】

 1 <?php
 2 class WebServer
 3 {
 4     public static function test($name,$age,$action)
 5     {
 6         return $name.',今年年龄'.$age.',最喜欢做的事情是'.$action;
 7     }
 8     public static function look()
 9     {
10         return $_POST;
11     }
12     public static function nono()
13     {
14         return '啥鸡毛都没有';
15     }
16 }
17 ?>

 

回到最上端

同源攻略约束

运行PHP

  • XAMMP,http://www.apachefriends.org/download.html
  • 在Dreamweaver中配备web服务器用于地方测量检验

  2.2、服务端提供对应的入口

  WebServer.php【www.test88.com】

  再次来到数据应用json格式!一个最基本的RPC服务黄金时代度建成!

 1 <?php
 2 require './WebServer.class.php';
 3 if(isset($_POST['method']))
 4 {
 5     $post=$_POST;
 6     switch ($_POST['method']) {
 7         case 'test':
 8             $respond=WebServer::test($post['name'],$post['age'],$post['action']);
 9             break;
10         case 'look':
11             $respond=WebServer::look();
12             break;
13         default:
14             $respond=WebServer::nono();
15             break;
16     }
17 }
18 else
19 {
20     $respond='木有!';
21 }
22 header('content-type:application/json');
23 echo json_encode($respond);
24 #echo $respond;
25 ?>

 

1、简介

  那篇文章将会用最直接的办法介绍RPC,以致落到实处RPC客商端的Ajax跨域调用的例子。

  RPC(Remote Procedure Call Protocol)--远程进程调用左券,它是大器晚成种通过网络从远程Computer程序上倡议服务,而没有必要理解底层网络技巧的协商。RPC合同纵然有个别传输公约的留存,如TCP或UDP,为通讯程序之间指引消息数据。在OSI互连网通讯模型中,RPC超越了传输层和应用层。RPC使得开采富含网络布满式多程序在内的应用程序越发便于。

  RPC接收顾客机/服务器形式。央求程序正是三个客商机,而服务提供程序就是三个服务器。首先,顾客机调用经过发送多少个有进程参数的调用音信到劳动进程,然后等待答复音信。在劳务器端,进度保持睡觉情形直到调用音信的达到截至。当多个调用音讯到达,服务器获得进度参数,总括结果,发送答复新闻,然后等待下贰个调用音信,最终,客商端调用经过选择答复音信,获得进度结果,然后调用实行后续开展。

  以上来自度娘!看完下面清楚什么是RPC么,在内心能将RPC整个服务进程构造出来么?当然不可能呀,对于大家这种小白来讲最棒是用最直接的语言进行描述。

  从字面上大家是大约通晓到是从三个服务器中调用另八个服务器中的方法,使用它提供的功力。在笔者最伊始接触RPC的时候,是在此本书中《PHP精华:编写高效PHP代码》Lorna Mitchell,Davey Shafik,马特hew Turland著;彭冲,胡琳译】。是的,作者所从事的语言就是世界上最佳的言语--PHP,222333哈哈。

  在此本书中所介绍的RPC的兑现方式是透过HTTP左券进行的。可是当我在追寻有关材料的时候,已看其余语言的事例,咋不等同的呢,难道PHP正是新鲜的?RPC就是远程调用,通常的话是不关语言层面包车型客车哎!

  的确,RPC=Remote Produce Call 是风流倜傥种技能的定义名词它能够通过分化的艺术得以完结。http是rpc达成的风流浪漫种办法,RPC还足以经过Socket本人实现意气风发套协议来实现。当然啦,分歧的落到实处况势有差异的特征,长短连接、数据的传输方式、灵活性等等。

  RPC的中坚并不在于选取什么协议。RPC的目标是令你在当地调用远程的方法,而对你的话这么些调用是透明的,你并不知道那几个调用的办法是布局何地。通过RPC能解耦服务,那才是选择RPC的确实指标。

RPC是什么

  • 简单易行的说,RPC正是从风度翩翩台机械上经过参数字传送递的不二等秘书诀调用另豆蔻梢头台机器上的一个函数或措施并赢得再次回到的结果。
  • RPC 会掩饰底层的通讯细节(无需直接处理Socket通信或Http通信卡塔 尔(阿拉伯语:قطر‎
  • RPC 是一个伸手响应模型。客户端发起倡议,服务器再次回到响应(相通于Http的做事格局卡塔 尔(阿拉伯语:قطر‎
  • RPC 在利用情势上像调用本地函数相像去调用长途的函数

  即能够调用远程规定好的接口就可称之为RPC!在本身上风度翩翩篇文章中所讲的Web service也是RPC的意气风发种达成方式。

  Thrift ,那是自身近期读书的叁个RPC框架,它很苍劲,数据是经过二进制格式实行传输,相对XML 和 JSON 体量越来越小,对于高并发、大数据量和多语言的条件更有优势。当然啦,这里不讲这几个RPC框架,毕竟刚接触,对于Thrift那上面包车型地铁学问照旧生手等级。能懂一丝丝可是间隔将它写成博客随笔仍旧差超级远的。

  接下去本人将应用HTTP形式来完成二个RPC,并且在客户端中可以预知在Ajax下展开跨域访谈。

回到最上端

同源攻略阻止从一个域上加载的本子获取或操作另二个域上的文书档案属性。也便是说,受到伏乞的 UTucsonL 的域必须与近些日子 Web 页面包车型的士域相像。那表示浏览器隔断来自差异源的原委,防止备它们中间的操作。

PHP测验页面

  • PHP脚本以<?PHP开头,以?>结尾
  • PHP文件的私下认可文件增加名是.php
  • PHP语句以分行结尾(;卡塔 尔(阿拉伯语:قطر‎

  2.3、建构跨域代理脚本

  跨域恳求解决:为避免同源攻略,可使用服务器端代理即写个代理脚本放入自身的域中,使用ajax来访问代理脚本,脚本远程访谈api接纳数据,再将数据再次回到给急需之处(好处:可是在代理的时候将选择回来的数目实行对应的数据类型结构管理,再回来必要的地方卡塔尔国

  Agency.class.php【www.test99.com】

 1 <?php
 2 class Agency
 3 {
 4     #允许访问的api域名、返回的数据类型
 5     public $allowHost=array('test88.com'=>array('mimetype'=>'aplication/json'));
 6     public $host='';
 7 
 8     public function __construct()
 9     {
10         $this->host=parse_url("http:/".$_SERVER['PATH_INFO'],PHP_URL_HOST); #提取域名参数
11     }
12 
13     /**
14     * @desc 设置允许去访问的主机域名
15     *
16     * @param $host   string 域名
17     * @param $array  array  数组,放回的数据类型
18     */    
19     public function setAllowHost($host, $array=array('mimetype'=>'aplication/json'))
20     {
21         $this->allowHost[$host]=$array;
22     }
23 
24     /**
25     * @desc 判断域名
26     *
27     * @param $host string 域名
28     */
29     private function decide($host)
30     {
31         if(!isset($this->allowHost[$host])) #判断host是否允许代理访问
32         {
33             header("Status:403 Forbidden");
34             exit;
35         }
36         return true;
37     }
38 
39     public function requestPost()
40     {
41         $host=$this->host;
42         $this->decide($host);   #判断
43         $host='www.'.$host;  //拼接host
44         $uri=strrchr($_SERVER['PATH_INFO'],'/'); #提取具体URI
45         $port=80;
46         $link=fsockopen($host,$port);
47         //请求行
48         #$request_data="POST /WebServer.php HTTP/1.1rn";
49         $request_data="POST $uri HTTP/1.1rn";
50         //请求头
51         #$request_data.="Host: www.test88.comrn";
52         $request_data.="Host: $hostrn";
53         $request_data.="User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64; rv:10.0) Gecko/20100101 Firefox/10.0rn";
54         $request_data.="Connection: keep-alivern";
55         #post数据
56         #$post_data=array('name'=>$_POST['name'],'ff'=>'bbb');
57         $post_content=http_build_query($_POST);
58         $len=strlen($post_content);
59         $request_data.="Content-Length: ".$len."rn";
60         $request_data.="Content-Type: application/x-www-form-urlencodedrn";
61         
62         $request_data.="rn"; //空行表示头结束
63         
64         //请求主体
65         $request_data.=$post_content;
66         
67         //发送数据
68         fwrite($link,$request_data);
69         
70         //接收数据
71         $inheader=1;
72         while(!feof($link))
73         {
74             #echo fgets($link,1024);
75             //除去请求头,只显示返回数据
76             $data=fgets($link,1024);
77             if($inheader && ($data=="n" || $data=="rn"))
78             {
79                 $inheader=0;
80             }
81             if($inheader==0)
82             {
83                 var_dump(json_decode($data));
84                 echo ($data);  #用于测试
85             }
86         }
87         //关闭请求
88         fclose($link);
89     }
90 
91 
92 }

 

  实例化脚本:agency.php【www.test99.com】

1 <?php
2 include "./Agency.class.php";
3 $a=new Agency();
4 $a->requestPost();
5 ?>

2、PRC实例

  情形介绍:www.test88.com作为劳务主机、www.test99.com作为顾客端主机

  三个好的api能够支撑不一样的格式输出、多数RPC采用post方式提交数据!接下去大家将运用json格式输出、POST提交数据

回去最上部

斩尽杀绝办法

二、JSON基本概念

  • JSON:JavaScript对象表示法(JavaScript Object Notation卡塔 尔(阿拉伯语:قطر‎
  • JSON:是积攒和置换文本音信的语法,相同XML。它选择键值对的秘诀来协会,易于大家阅读和编写制定,同不经常候也轻便机器拆解解析和转换
  • JSON是单身于言语的,也便是说不管怎么语言,都能够拆解解析json,只需求遵照json的平整来就能够。

  2.4、Ajax访问

  构建相应的html文件

  button.html【www.test99.com】

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>button</title>
 6 </head>
 7 <body>
 8 <button id='b1'>按钮1</button>
 9 </body>
10 <script type="text/javascript">
11 var b1=document.getElementById('b1');
12 b1.onclick=function()
13 {
14     var xhr=new XMLHttpRequest();
15     xhr.onreadystatechange=function()
16     {
17         if(xhr.readyState==4)
18         {
19             //document.body.innerHTML =xhr.responseText;
20             alert(xhr.responseText)
21         }
22     }
23     //代理文件 (需要访问的api的域名 api具体的某个接口)
24     xhr.open('post','./agency.php/test88.com/WebServer.php');   
25         xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
26         //api接口参数使用info来传递
27         var info='method=look&name=小明&age=20&action=打架';   //相应参数
28         xhr.send(info);
29 }
30 </script>
31 </html>

  2.1、先创造具体服务成效的逻辑程序

  WebServer.class.php【www.test88.com】

图片 1

 1 <?php 2 class WebServer 3 { 4     public static function test($name,$age,$action) 5     { 6         return $name.',今年年龄'.$age.',最喜欢做的事情是'.$action; 7     } 8     public static function look() 9     {10         return $_POST;11     }12     public static function nono()13     {14         return '啥鸡毛都没有';15     }16 }17 ?>

图片 2回去顶上部分

平时来讲来说,比较通用的犹如下三种办法,风流倜傥种是从服务器端动手,另大器晚成种则是从客商端的角度出发。二者有利有弊,具体要运用哪类方式还供给实际的分析。

JSON与XML比较

  • json的尺寸和xml格式比起来极短小
  • json读写的快慢越来越快
  • json能够行使JavaScript内建的点子直接开展分析,调换到JavaScript对象,特别常有利

  2.5、开端测验

  访问www.test99.com/button.html

  并点击开关1

  图片 3

  图片 4  

  改过访问方法method=test,继续会见

图片 5

功勋卓著告成!

  2.2、服务端提供对应的进口

  WebServer.php【www.test88.com】

  重回数据应用json格式!一个最大旨的RPC服务业已建成!

图片 6

 1 <?php 2 require './WebServer.class.php'; 3 if(isset($_POST['method'])) 4 { 5     $post=$_POST; 6     switch ($_POST['method']) { 7         case 'test': 8             $respond=WebServer::test($post['name'],$post['age'],$post['action']); 9             break;10         case 'look':11             $respond=WebServer::look();12             break;13         default:14             $respond=WebServer::nono();15             break;16     }17 }18 else19 {20     $respond='木有!';21 }22 header('content-type:application/json');23 echo json_encode($respond);24 #echo $respond;25 ?>

图片 7回去最上部

  1. 服务器设置响应头
  2. 服务器代理
  3. 客商端应用脚本回调机制。

JSON语法规则

  • JSON数据的书写格式是:名称/值对。
    名称/值对构成人中学的名称写在前方(在双引号中卡塔尔国,值对写在背后(相像在双引号中卡塔尔国,中间用冒号隔离:比方"name":"杨立瑜"。

  • json的值能够是上边那些连串:
    数字(整数或浮点数卡塔 尔(阿拉伯语:قطر‎,比如123,1.23
    字符串(在双引号中卡塔 尔(英语:State of Qatar)
    逻辑值(true或false)
    数组(在方括号中卡塔尔国
    对象(在花括号中卡塔 尔(英语:State of Qatar)
    null

{
  "staff":[
     {"name":"洪七","age":70},
     {"name":"郭靖","age":35},
     {"name":"黄蓉","age":30}
 ]
}

3、总结

  同理可得,小编所写的那些事例是可怜特别轻松的,仅仅只是用来参照他事他说加以调查哈。当然啦,质量上必然是鸡肋。在本人本身做轻松测验的时候,Ajax刷新再次回到数据都充足缓慢。对于小白的大家来说,结合二个简易实用的例证来学学精通一门才干恐怕不错的!希望大家对RPC的学习不要止步于此哈,毕竟本人那篇博客是入门级的,越来越多相关的RPC知识还等着大家去发掘呢!

 

(以上是友好的某些见识,若有欠缺大概失实的位置请各位提出卡塔尔国

 作者:那一叶随风   

 最早的作品地址:http://www.cnblogs.com/phpstudy2015-6/p/6850658.html 

 注脚:本博客小说为原创,只表示本人在办事学习中某不经常常间内总计的意见或结论。转发时请在篇章页面显明地点给出最先的文章链接

 

  2.3、创建跨域代理脚本

  跨域央求清除:为避免同源计谋,可接纳劳务器端代理即写个代理脚本归入自个儿的域中,使用ajax来访谈代理脚本,脚本远程访谈api选用数据,再将数据再次来到给急需的地点(好处:可是在代理的时候将收受回来的数码开展对应的数据类型结构管理,再重返需求的地点卡塔 尔(英语:State of Qatar)

  Agency.class.php【www.test99.com】

图片 8

 1 <?php 2 class Agency 3 { 4     #允许访问的api域名、返回的数据类型 5     public $allowHost=array('test88.com'=>array('mimetype'=>'aplication/json')); 6     public $host=''; 7  8     public function __construct() 9     {10         $this->host=parse_url("http:/".$_SERVER['PATH_INFO'],PHP_URL_HOST); #提取域名参数11     }12 13     /**14     * @desc 设置允许去访问的主机域名15     *16     * @param $host   string 域名17     * @param $array  array  数组,放回的数据类型18     */    19     public function setAllowHost($host, $array=array('mimetype'=>'aplication/json'))20     {21         $this->allowHost[$host]=$array;22     }23 24     /**25     * @desc 判断域名26     *27     * @param $host string 域名28     */29     private function decide($host)30     {31         if(!isset($this->allowHost[$host])) #判断host是否允许代理访问32         {33             header("Status:403 Forbidden");34             exit;35         }36         return true;37     }38 39     public function requestPost()40     {41         $host=$this->host;42         $this->decide($host);   #判断43         $host='www.'.$host;  //拼接host44         $uri=strrchr($_SERVER['PATH_INFO'],'/'); #提取具体URI45         $port=80;46         $link=fsockopen($host,$port);47         //请求行48         #$request_data="POST /WebServer.php HTTP/1.1rn";49         $request_data="POST $uri HTTP/1.1rn";50         //请求头51         #$request_data.="Host: www.test88.comrn";52         $request_data.="Host: $hostrn";53         $request_data.="User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64; rv:10.0) Gecko/20100101 Firefox/10.0rn";54         $request_data.="Connection: keep-alivern";55         #post数据56         #$post_data=array('name'=>$_POST['name'],'ff'=>'bbb');57         $post_content=http_build_query($_POST);58         $len=strlen($post_content);59         $request_data.="Content-Length: ".$len."rn";60         $request_data.="Content-Type: application/x-www-form-urlencodedrn";61         62         $request_data.="rn"; //空行表示头结束63         64         //请求主体65         $request_data.=$post_content;66         67         //发送数据68         fwrite($link,$request_data);69         70         //接收数据71         $inheader=1;72         while(!feof($link))73         {74             #echo fgets($link,1024);75             //除去请求头,只显示返回数据76             $data=fgets($link,1024);77             if($inheader && ($data=="n" || $data=="rn"))78             {79                 $inheader=0;80             }81             if($inheader==0)82             {83                 var_dump(json_decode($data));84                 echo ($data);  #用于测试85             }86         }87         //关闭请求88         fclose($link);89     }90 91 92 }

图片 9

  实例化脚本:agency.php【www.test99.com】

图片 10

1 <?php2 include "./Agency.class.php";3 $a=new Agency();4 $a->requestPost();5 ?>

图片 11回去最上端

方式一

JSON校验工具

http://jsonlint.com/

  2.4、Ajax访问

  创立相应的html文件

  button.html【www.test99.com】

图片 12

 1 <!DOCTYPE html> 2 <html> 3 <head> 4     <meta charset="utf-8"> 5     <title>button</title> 6 </head> 7 <body> 8 <button id='b1'>按钮1</button> 9 </body>10 <script type="text/javascript">11 var b1=document.getElementById('b1');12 b1.onclick=function()13 {14     var xhr=new XMLHttpRequest();15     xhr.onreadystatechange=function()16     {17         if(xhr.readyState==4)18         {19             //document.body.innerHTML =xhr.responseText;20             alert(xhr.responseText)21         }22     }23     //代理文件 (需要访问的api的域名 api具体的某个接口)24     xhr.open('post','./agency.php/test88.com/WebServer.php');   25         xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');26         //api接口参数使用info来传递27         var info='method=look&name=小明&age=20&action=打架';   //相应参数28         xhr.send;29 }30 </script>31 </html>

图片 13回去顶上部分

Access-Control-Allow-Origin 关键字独有在劳动器端进行安装才
会生效。也正是说纵然再客商端选择

用jQuery实现Ajax

  2.5、以前测验

  访问www.test99.com/button.html

  并点击按键1

  图片 14

  图片 15  

  校正访谈方法method=test,继续拜望

图片 16

劳苦功高告成!

回到最上部

xmlhttprequest.setHeaderREquest('xx','xx');

- jQuery.ajax([settings])

  • type:类型,"POST"或"GET",默认为"GET"
  • url:发送央求的地址
  • data:是三个目的,连同央求发送到服务器的数码
  • dataType:预期服务器重回的数据类型。即使不点名,jQuery将活动根据HTTP包MIME新闻来智能判别,日常大家采纳json格式,能够安装为"json"
  • success:是二个主意,央浼成功后的回调函数。传入重临后的数据,以致带有成功代码的字符串
  • error:是叁个办法,乞求战败时调用此函数。传入XMLHttpRequest对象

【补充】不用下载,援用在线的JQ库。
<script src=";

3、总结

  一言以蔽之,作者所写的那个例子是特别特轻便的,仅仅只是用来参谋哈。当然啦,质量上自然是鸡肋。在自家要好做轻松测量试验的时候,Ajax刷新再次来到数据都非常缓慢。对于小白的我们的话,结合叁个简便实用的例子来读书领会一门本领仍旧不错的!希望我们对RPC的读书不要止步于此哈,毕竟笔者这篇博客是入门级的,更加多相关的RPC知识还等着大家去开采呢!

(以上是投机的意气风发对思想,若有欠缺可能不当的地点请各位提议卡塔 尔(阿拉伯语:قطر‎

转发原版的书文地址:

宣称:本博客文章为原创,只象征本身在办事学习中某临时间内总括的眼光或结论。转发时请在随笔页面明显地方给出原版的书文链接

也不会有哪些效果与利益。

三、跨域

  • 八个域名地址的组成:

图片 17

  • 当左券、子域名、主域名、端口号中随心所欲二个不周边时,都当成不一样域
  • 分裂域之间相互须求能源,就真是“跨域”
    【比如】:http://www.abc.com/index.html请求 http://www.efg.com/service.php
  • JavaScript出于安全地点的设想,不允许跨域调用别的页面包车型地铁对象。什么是跨域呢,轻松地精晓正是因为JavaScript同源计策的界定,a.com域名下的js非常的小概操作b.com或是c.a.com域名下的对象。

  • JavaScript出于安全地点的考虑,不容许跨域调用其余页面包车型大巴靶子。
    www.abc.com/index.html调用www.abc.com/service.php(非跨域)
    www.abc.com/index.html调用www.efg.com/service.php(跨域)
    www.abc.com/index.html调用bbs.abc.com/service.php(跨域)
    www.abc.com/index.html调用www.abc.com:81/service.php详解ajax跨域问题解决方案。(跨域)
    www.abc.com/index.html调用https://www.abc.com/service.php(跨域)

正常ajax请求

拍卖跨域方法大器晚成——代理

  • 由此在同域名的web服务器端成立二个代理:
  • 东京(Tokyo卡塔尔服务器(域名:www.beijing.com)
    北京服务器(域名:www.shanghai.com)

-举例在京城的web服务器的后台
(www.beijing.com/proxy-shanghaiservice.php卡塔 尔(阿拉伯语:قطر‎来调用新加坡服务器
(www.shanghai.com/service.php)的劳务,然后再把响应结果重返给前端,那样前端调用新加坡同域名的劳动就和调用新加坡的服务成效相符了。

下边来模拟一下ajax非跨域须求的案例实现。

拍卖快递格局二——JSONP

  • JSONP可用于缓和主流浏览器的跨域数据访谈的难题。
![](https://upload-images.jianshu.io/upload_images/3131637-fe7a3bb5c75a5ca1.png)

test1.html

拍卖跨域办法三——XH奥迪Q52

  • HTML5提供的XMLHttpRequest Level2已经贯彻了跨域访问以至别的的风流浪漫对新作用
  • IE10以下的本子都不扶持
  • 在服务器端做一些微小改动就能够:
    header('Access-Control-Allow-Origin:*');
    header('Access-Control-Allow-Methods:POST,GET');

end.
本笔记收拾自慕课网

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>ajax 测试</title>
</head>
<body>

<input type="button" value="Test" onclick="crossDomainRequest()">
<div id="content"></div>
<script>
 var xhr = new XMLHttpRequest();
 var url = 'http://localhost/learn/ajax/test1.php';

 function crossDomainRequest() {
  document.getElementById('content').innerHTML = "<font color='red'>loading...</font>";
  // 延迟执行
  setTimeout(function () {
   if (xhr) {
    xhr.open('GEt', url, true);
    xhr.onreadystatechange = handle_response;
    xhr.send(null);
   } else {
    document.getElementById('content').innerText = "不能创建XMLHttpRequest对象";
   }
  }, 3000);
 }

 function handle_response() {
  var container = document.getElementById('content');
  if (xhr.readyState == 4) {
   if (xhr.status == 200 || xhr.status == 304) {
    container.innerHTML = xhr.responseText;
   } else {
    container.innerText = '不能跨域请求';
   }
  }
 }
</script>

</body>
</html>

同级目录下的test1.PHP内容如下:

<?php

echo "It Works.";

?>

图片 18

跨域要求

刚才是HTML文件和php文件都在Apache的容器下,所以并未现身跨域的状态,未来把HTML文件放到桌面上,那样重复恳请PHP数据的话,就构建了如此三个“跨域央浼”了。

瞩目看浏览器的地址栏音讯

重复开展访问,发掘会现身上边包车型大巴错误音信。

图片 19

本着这种状态,相比习感到常的三个操作正是设置Access-Control-Allow-Origin。

格式: Access-Control-Allow-Origin: domain.com/xx/yy.*

假如明白客户端的域名依然诉求的固定路线,则最为是不应用通配符的主意,来进一层保障安全性。如若不鲜明,那正是用*通配符好了。

后端开拓语言为PHP的时候能够再文件开首处那样设置:

header("Access-Control-Allow-Origin: *");

假设是ASPX页面包车型地铁话,要那样设置(Java与之临近卡塔 尔(阿拉伯语:قطر‎:

Response.AddHeader("Access-Control-Allow-Origin", "*");

此刻,再度来访谈一下刚刚的不二等秘书籍。

图片 20

服务器代理形式

这种办法应该算是相比较常用的,何况被大范围接纳的一个艺术了。说代理有一点太过火书面化了,其实便是传话儿的。来举个小例子:

小明喜欢三班三个叫小红的孩童,可是腼腆去要人家的QQ,Wechat号。然后就托和协调班的女子–小兰。来帮自个儿去要。所以小兰就也就是二个代理。协理小明得到原来不能够一向获得的小红的联系格局。

下边来举个例证表明那几个难题。

一直的跨域央浼

改过一下方才的ULacrosseL就可以,让ajax间接去乞请其余网址的数码。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>ajax 测试</title>
</head>
<body>

<input type="button" value="Test" onclick="crossDomainRequest()">
<div id="content"></div>
<script>
 var xhr = new XMLHttpRequest();
// var url = 'http://localhost/learn/ajax/test1.php';
  var url = 'http://api.qingyunke.com/api.php?key=free&appid=0&msg=哒哒';
 function crossDomainRequest() {
  document.getElementById('content').innerHTML = "<font color='red'>loading...</font>";
  // 延迟执行
  setTimeout(function () {
   if (xhr) {
    xhr.open('GEt', url, true);
    xhr.onreadystatechange = handle_response;
    xhr.send(null);
   } else {
    document.getElementById('content').innerText = "不能创建XMLHttpRequest对象";
   }
  }, 3000);
 }

 function handle_response() {
  var container = document.getElementById('content');
  if (xhr.readyState == 4) {
   if (xhr.status == 200 || xhr.status == 304) {
    container.innerHTML = xhr.responseText;
   } else {
    container.innerText = '不能跨域请求';
   }
  }
 }
</script>

</body>
</html>

结果如下:

图片 21

启用代理情势

刚刚的HTML页面,我们还是用本人的接口:

url = 'http://localhost/learn/ajax/test1.php';

切实如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>ajax 测试</title>
</head>
<body>

<input type="button" value="Test" onclick="crossDomainRequest()">
<div id="content"></div>
<script>
 var xhr = new XMLHttpRequest();
 var url = 'http://localhost/learn/ajax/test1.php';
//  var url = 'http://api.qingyunke.com/api.php?key=free&appid=0&msg=哒哒';
 function crossDomainRequest() {
  document.getElementById('content').innerHTML = "<font color='red'>loading...</font>";
  // 延迟执行
  setTimeout(function () {
   if (xhr) {
    xhr.open('GEt', url, true);
    xhr.onreadystatechange = handle_response;
    xhr.send(null);
   } else {
    document.getElementById('content').innerText = "不能创建XMLHttpRequest对象";
   }
  }, 3000);
 }

 function handle_response() {
  var container = document.getElementById('content');
  if (xhr.readyState == 4) {
   if (xhr.status == 200 || xhr.status == 304) {
    container.innerHTML = xhr.responseText;
   } else {
    container.innerText = '不能跨域请求';
   }
  }
 }
</script>

</body>
</html>

接下来对应的test1.php应该帮忙大家达成数据央求那个进程,把“小红的联系格局”要收获,并赶回给“小明”。

<?php

$url = 'http://api.qingyunke.com/api.php?key=free&appid=0&msg=hello world.';
$result = file_get_contents($url);
echo $result;

?>

下边看下代码实行的结果。

图片 22

jsonp方式

JSONP(JSON with Padding卡塔尔灵感其实来自在HTML页面中script标签内容的加载,对于script的src属性对应的内容,浏览器总是会对其开展加载。于是:

克服该限量更不错方法是在 Web 页面中插入动态脚本成分,该页面源指向任何域中的服务 U大切诺基L 何况在自己脚本中获取数据。脚本加载时它开头进行。该方法是卓有功效的,因为同源计策不阻碍动态脚本插入,而且将脚本看作是从提供 Web 页面的域上加载的。但假设该脚本尝试从另二个域上加载文书档案,就不会中标。

福寿康宁的思路就是:

在劳动器端组装出顾客端预置好的json数据,通过回调的点子传回给客户端。

原生达成

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>ajax 测试</title>
 <script src="http://www.bonzeragro.com/uploads/allimg/191110/1036033W2-22.jpg" type="text/javascript"></script>
</head>
<body>
<input type="text" name="talk" id="talk">
<input type="button" value="Test" id="btn">
<div id="content"></div>
<script type="text/javascript">

function jsonpcallback(result) {
 for(var i in result) {
  alert(i ":" result[i]);
 }
 }
 var JSONP = document.createElement("script");
 JSONP.type='text/javascript';
 JSONP.src='http://localhost/learn/ajax/test1.php?callback=jsonpcallback';
 document.getElementsByTagName('head')[0].appendChild(JSONP);


</script>

</body>
</html>

服务器端test1.php内容如下:

<?php

$arr = [1,2,3,4,5,6];
$result = json_encode($arr);
echo "jsonpcallback(".$result.")";

?>

需求专心的是终极组装的重返值内容。

来看下最后的代码试行效果。

图片 23

JQuery方式完成

动用原生的JavaScript须求管理的思想政治工作照旧蛮多的,下边为了简化操作,决定接纳jQuery来代替一下。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>ajax 测试</title>
 <script src="http://www.bonzeragro.com/uploads/allimg/191110/1036033W2-22.jpg" type="text/javascript"></script>
</head>
<body>
<input type="text" name="talk" id="talk">
<input type="button" value="Test" id="btn">
<div id="content"></div>

<script type="text/javascript">

 function later_action(msg) {
  var element = $("<div><font color='green'>" msg "</font><br /></div>");
  $("#content").append(element);
 }

 $("#btn").click(function(){
  // alert($("#talk").val());
  $.ajax({
  url: 'http://localhost/learn/ajax/test1.php',
  method: 'post',
  dataType: 'jsonp',
  data: {"talk": $("#talk").val()},
  jsonp: 'callback',
  success: function(callback){
   console.log(callback.content);
   later_action(callback.content);
  },
  error: function(err){
   console.log(JSON.stringify(err));

  },
 });
 });
</script>

</body>
</html>

相应的,test1.php为了合作客商端闲扯的须求,也略微做了点改换。

<?php
$requestparam = isset($_GET['callback'])?$_GET['callback']:'callback';

// 青云志聊天机器人接口: http://api.qingyunke.com/api.php?key=free&appid=0&msg=hello
// 接收来自客户端的请求内容
$talk = $_REQUEST['talk'];
$result = file_get_contents("http://api.qingyunke.com/api.php?key=free&appid=0&msg=$talk");

// 拼接一些字符串
echo $requestparam . "($result)";

?>

最后来查阅一下跨域的效率啊。

图片 24

总结

于今甘休,关于轻便的ajax跨域难题,就终于化解的基本上了。对作者个人来讲,对于那三种艺术有一小点谈得来的眼光。

  1. 服务器设置Access-Control-Allow-Origin的主意相符信花销高的小型应用或许个体选拔。
  2. 代办形式则比较相符大型应用的处理。但是供给叁个联合的行业内部,这样管理和保卫安全起来都会比较便于。
  3. JSONP方式感到依旧比较鸡肋的(有希望是笔者经验还不足,没意识到那一个方法的独特之处吧(⊙﹏⊙)b卡塔 尔(英语:State of Qatar)。本人玩玩知道有与上述同类个东西好了。维护起来其实是长项麻烦。

参照链接:

Ajax跨域央求: //www.jb51.net/article/72703.htm

服务器端跨域设置: //www.jb51.net/article/104442.htm

Ajax高档笔记: //www.jb51.net/article/116878.htm

以上就是本文的全部内容,希望对我们的读书抱有利于,也盼望我们多多照管脚本之家。

您可能感兴趣的稿子:

  • 详细解释自定义ajax协助跨域组件封装
  • vue-cli开垦时,关于ajax跨域的消除方法(推荐)
  • ajax跨域获取网址json数据的实例
  • 原生JS完结ajax与ajax的跨域央求实例
  • 浅谈jquery中ajax跨域提交的时候会有2次央浼的主题素材
  • 原生JS落成Ajax跨域央浼flask响应内容
  • Springmvc ajax跨域须要管理办法实例安详严整
  • 原生js的ajax和缓和跨域的jsonp(实例解说)
  • 听大人说CO兰德陆风X8S达成WebApi Ajax 跨域哀求消除情势
  • Ajax怎么着开展跨域央浼?Ajax跨域央浼的原理
  • AJAX跨域伏乞数据的各类办法(实例讲授)
  • ajax前台后台跨域哀告管理方式

本文由澳门新浦京娱乐场网站发布于www.146.net,转载请注明出处:详解ajax跨域问题解决方案