php中ajax跨域请求---小记

简介: php中ajax跨域请求---小记   前端时间,遇到的一个问题,情况大约是这样: 原来的写法: 前端js文件中: $.ajax({   type:'get',   url:'http://wan.

php中ajax跨域请求---小记

 

前端时间,遇到的一个问题,情况大约是这样:

原来的写法:

前端js文件中:

$.ajax({

  type:'get',

  url:'http://wan.xxx.com/xxx.js',

  success:function(data){

  .........  

  }

})

很简单的一个ajax请求;后面在做迁移的时候,由于系统目录的安排,js文件放到了,img.xxx.com域名下,这样就设计到了跨域问题,于是就改成了这样:

$.ajax({

  type:'get',

  url:'http://img.xxx.com/xxx.js',

  dataType:'jsonp',

  success:function(data){

  .........  

  }

})

用jsonp的形式,跨域请求,这本来没有什么,很简单的,可这样请求后,就是得不到数据,不知道大家能不能看出问题所在?

跨域请求嘛,就是 dataType用jsonp的格式就对了,可就是不行。。。

后面想了一会,依然无解,后经过同学的帮助,才知道是这个问题:

跨域请求,需要有一个callback的回调函数,可是上边请求的url中,虽然是请求的另一个域中的文件,可并没有回调函数(请求的是另个域中的js文件,并没有回调函数);

所以,解决方法也就是,通过后台程序,写个回调函数即可,而要求必须要请求那个js文件得到json数据,

所以需要后台的方法代理一下请求,从而实现要求,就是做一个后台的代理

所以修改方法如下:

js文件中:

$.ajax({

  type:'get',

  url:'http://test.com/1.php', //请求的后台代理文件

  data:'url=http://img.xxx.com/xxx.js', //传递请求的js地址

  dataType:'jsonp',

  success:function(data){

  ........

  }

})

 

后台代理文件中:

1.php

url=_REQUEST[url];

$ch=curl_init();

curl_setopt(ch,CURLOPTURL,url);

curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);

curl_setopt($ch,CURLOPT_TIMEOUT_MS,200);

data=curlexec(ch); //$data即为请求传递过来的url得到的json数据

curl_close($ch);

echo _REQUEST['callback'].."('{data}');";

 

这样就可以实现功能,只不过多了一步后台代理的步骤;

顺便记一下:

ajax中的跨域的几个参数:

jsonp           String

在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

jsonpCallback      String

为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候,指定这个回调函数名。

 

自己的简单记录。。。

 

 

目录
相关文章
|
18天前
|
XML 前端开发 JavaScript
|
13天前
|
XML 前端开发 JavaScript
34 PHP与Ajax
路老师在知乎上分享了关于PHP语言的知识,帮助大家入门并深入了解PHP。本文重点介绍了Ajax技术,包括其概念、开发模式、优点及常用技术,如JavaScript和XMLHttpRequest对象。Ajax通过异步请求改善了用户体验,减轻了服务器负担,实现了页面无刷新更新。
25 1
|
1月前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
59 22
|
1月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
38 18
|
1月前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
66 4
|
1月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
94 1
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
56 10
React技术栈-react使用的Ajax请求库实战案例
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
33 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
2月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
2月前
|
XML 前端开发 JavaScript
php中Ajax的简单使用,登录表单调用Ajax判断是否正确登录利用layer.msg进行提示
本文介绍了在PHP中如何使用Ajax进行登录表单的数据提交,并利用jQuery的$.post()方法与后端通信,以及使用layer.msg进行前端提示。
php中Ajax的简单使用,登录表单调用Ajax判断是否正确登录利用layer.msg进行提示