Ajax全接触(五) 处理跨域方式
来源:互联网 发布:淘宝策划书模板 编辑:程序博客网 时间:2024/06/07 06:26
那么什么是跨域呢?
处理跨域方式-代理
我们在前端代码中将ajax访问后台url
改成http://127.0.0.1:80/dengtu/serverjsonp.php
$(document).ready(function() { $("#search").click(function() { $.ajax({ type: "GET", url: "http://127.0.0.1:80/dengtu/serverjsonp.php?number=" + $("#keyword").val(), dataType: "json", success: function(data) { if (data.success) { $("#searchResult").html(data.msg); } else { $("#searchResult").html("出现错误:" + data.msg); } }, error: function(jqXHR) { alert("发生错误:" + jqXHR.status); }, }); }); $("#save").click(function() { $.ajax({ type: "POST", url: "http://127.0.0.1:80/dengtu/serverjsonp.php", data: { name: $("#staffName").val(), number: $("#staffNumber").val(), sex: $("#staffSex").val(), job: $("#staffJob").val() }, dataType: "json", success: function(data) { if (data.success) { $("#createResult").html(data.msg); } else { $("#createResult").html("出现错误:" + data.msg); } }, error: function(jqXHR) { alert("发生错误:" + jqXHR.status); }, }); });});
http://127.0.0.1:80/dengtu
指向的也是http://localhost/dengtu
但是他们不是一个域名,
这样我们能访问到吗?
答案是不能,返回错误告诉你没有权限访问。
这就要用到跨域了
那么什么是跨域呢?
JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象,什么是跨域呢,简单的理解就是因为JavaScript同源策略的限制,a.com域名下的js无法操作b.com或c.a.com域名下的对象。
子域名不相同都会认为是跨域
通过代理跨域
举个例子在上海服务器上,有一个服务
www.shanghai.com/service.php
在北京服务器上也有个服务
www.beijing.com/proxy.php
北京这个服务其实是从后端去访问上海的这个服务www.shanghai.com/service.php
然后把服务的响应值获取过来,返回给前端,
也就是北京的服务在后台做了个代理,这样前端只需要访问北京的代理的服务也就相当于访问了上海的服务。
处理跨域方式–JSONP
JSONP不支持post方式
在jquery的ajax中使用git方式访问跨域,
前端
需要改变
dataType: "jsonp",
接着再增加一个属性
jsonp:"callback",``jsonp:"任意值",
后端
在git请求处理中,获取到
callback
,$jsonp=$_GET["callback"];
改变返回值,
echo $jsonp.'({"success":false,"msg":"参数错误"})';
前端代码
$(document).ready(function() { $("#search").click(function() { $.ajax({ type: "GET", url: "http://127.0.0.1:80/dengtu/serverjsonp.php?number=" + $("#keyword").val(), dataType: "jsonp", jsonp:"callback", success: function(data) { if (data.success) { $("#searchResult").html(data.msg); } else { $("#searchResult").html("出现错误:" + data.msg); } }, error: function(jqXHR) { alert("发生错误:" + jqXHR.status); }, }); });
后端代码
//通过员工编号搜索员工function search(){ $jsonp=$_GET["callback"]; //检查是否有员工编号的参数 //isset检测变量是否设置;empty判断值为否为空 //超全局变量 $_GET 和 $_POST 用于收集表单数据 if (!isset($_GET["number"]) || empty($_GET["number"])) { echo $jsonp.'({"success":false,"msg":"参数错误"})'; return; } //函数之外声明的变量拥有 Global 作用域,只能在函数以外进行访问。 //global 关键词用于访问函数内的全局变量 global $staff; //获取number参数 $number = $_GET["number"]; $result = $jsonp.'({"success":false,"msg":"没有找到员工。"})'; //遍历$staff多维数组,查找key值为number的员工是否存在,如果存在,则修改返回结果 foreach ($staff as $value) { if ($value["number"] == $number) { $result = $jsonp.'({"success":true,"msg":"找到员工:员工编号:' . $value["number"] . ',员工姓名:' . $value["name"] . ',员工性别:' . $value["sex"] . ',员工职位:' . $value["job"] . '"})'; break; } } echo $result;}
这样就能通过jsonp来获取跨域信息。
callback和jsonp的作用和原理
1先定义一个”callback123”字段用来映射jquery生成的jQueryxxxxx_xxxxx函数名(这个函数在服务器处理完毕并返回数据时再由jquery调用);
然后jsonp协议直接请求
http://127.0.0.1:8080/ajaxdemo/service.php?number=111;
(个人感觉jsonp协议不受同源策略限制)接着服务器端定义变量$jsonp获取请求中名为”callback123”的值,也就是获取到回调函数名”jQueryxxxxx_xxxxx”;
再接着服务器处理完毕后将数据放到回调函数中,也就是视频中老师以jQueryxxxxx_xxxxx(jsondata)这种$jsonp拼接(jsondata)的形式返回给前端;
最后前端接收到”jQueryxxxxx_xxxxx(jsondata)”,jquery调用这个jQueryxxxxx_xxxxx函数,将jsondata传入到success中的function中,这样就实现了跨域。
处理跨域方式–XHR2
XMR2方法不支持ie10以下版本。
使用XMR2方法
在服务端改写脚本
header('Access-Control-Allow-Origin:*'); //值设置为*。*意思是所有域都可以访问,当然可以设置特定的域名header('Access-Control-Allow-Methods:POST,GET'); //允许post/githeader('Access-Control-Allow-Credentials:true'); header("Content-Type: application/json;charset=utf-8");
这样就能做到跨域
- Ajax全接触(五) 处理跨域方式
- Ajax全接触
- Ajax全接触
- ajax全接触--imooc
- Ajax全接触
- AJax的全接触
- ajax全接触
- Ajax全接触
- Ajax全接触(笔记)
- AJAX全接触
- AJax全接触
- AJAX全接触
- Ajax全接触
- Ajax全接触(2)
- Ajax全接触
- Ajax全接触 && JSON
- Ajax处理跨域方式
- Ajax全接触(一)基础理论
- 详解HTML5中rel属性的prefetch预加载功能使用
- C++Primer Chapter15
- Android车牌识别,从图片识别到扫描识别
- Oracle中的exists、not exists和in用法
- 感谢所有的幸运与不幸 --- 致我的2016
- Ajax全接触(五) 处理跨域方式
- SqlServer获取存储过程的返回值
- 《从零开始学Swift》学习笔记(Day48)——类型检查与转换
- quick cocos2d-x 关于table的拷贝问题
- 关于hamcrest的问题解决
- dataframe 存入MySQL,Python 'timestamp' cannot be converted to a MySQL type
- MySQL事务隔离级别详解
- 关于Android6.0蓝牙Ble搜索的demo和一点心得
- Failed to stop iptables.service: Unit iptables.service not loaded.