我们直接使用XMLHttpRequset请求外部接口 会发现

报这个错误

其实浏览器成功发送请求并拿回了数据  只是浏览器的同源策略 禁止了获取  在xhr2 服务器端支持跨域 需要在响应头增加

Access-Control-Allow-Origin: * //*代表任何域。也可以指定地址

Access-Control-Allow-Methods: POST,GET //支持的方法

同源策略

同源策略主要针对XMLHttpRequset   保证请求url 必须跟当前站点的协议 域名 端口 一致

XHR2 CORS(跨域资源共享)实现跨域请求

XHRWidtCredentils 跨域请求是否包含cookie  票据等凭证(不常使用见)
 可以通过这个属性判断是否支持跨域:
 if(new XHRHttpRequset().XHRWidtCredentils==undefied)return false;
服务器端响应接口需要加上这2个响应头头

Access-Control-Allow-Origin: * //*代表任何域。也可以指定地址

Access-Control-Allow-Methods: POST,GET //支持的方法

    window.onload = function () {
var xhr = new XMLHttpRequest();
if (xhr.withCredentials === undefined) return false; xhr.open("get", "http://www.baidu.com");
xhr.onreadystatechange = function () {
if (xhr.readyState !== 4) return;//忽略未完成的调用
if (xhr.status === 200) {
console.log(xhr.responseText);
}
}
xhr.send(null);
}

JsonP实现跨域请求

服务器端支持:返回数据格式必须是calback({json数据})  callback必须是请求客户端存在的回调函数
浏览器端:
通过创建script标签请求外部资源 没有同源策略限制
支持跨域请求的服务端  响应数据为callback({json数据})    当作为js解析 则正好调用了我们的回调函数
 
例子:
客户端
 

    function GetJsonp(url, callback) {

        var responseCallback = callback.name + GetJsonp.index++;//为每次调用生成一个唯一的回调名字
var scriptDom = document.createElement("script");//创建一个script标签
//生成一个随机的 服务器端回调函数
GetJsonp[responseCallback] = function (data) {
try {
//最终回调我们自己的处理函数
callback(data);
} finally {
//每次请求完成后函数
document.removeChild(scriptDom);//删除标签
delete GetJsonp[responseCallback];//删除生成的函数
}
} if (url.indexof("?") === -1) {
//如果url没有包含参数 则添加服务器端生成回调的函数
url += "?callback=" + "GetJsonp[" + responseCallback + "]";
} else {
//仅仅是追加参数
url += "&callback=" + "GetJsonp[" + responseCallback + "]";
}
//设置script标签的请求地址
scriptDom.src = url;
//将他追加到文档
document.appendChild(scriptDom);
}

服务器端

 根据学号查询学生信息的支持跨域接口 http://www.studentl.com/?studentid=""&callback=""
  服务端最终 查询数据 响应客户端 这样的内容requset.queryString["callback"]+"({json数据})“

最新文章

  1. Delphi 中同类型方法的说明
  2. android SDK 更新问题解决
  3. python Tornado(招聘的一个比较经常问到的知识)
  4. 【STL】重载运算符
  5. PEM (Privacy Enhanced Mail) Encoding
  6. 在Java中导出word、excel格式文件时JSP页面头的设置
  7. NGUI的UIProgressBar使用裁剪方式而不是压缩方式的方法
  8. bzoj2067: [Poi2004]SZN
  9. [转]IBInspectable / IBDesignable
  10. PAT (Advanced Level) 1076. Forwards on Weibo (30)
  11. 前端技术API手册(2) -- CSS API 的实现
  12. JavaScript(第十三天)【内置对象】
  13. 【ABP框架系列学习】介绍篇(1)
  14. schtasks计划任务
  15. java 多线程中的锁的类别及使用
  16. 校正PHP服务器时间不准的问题
  17. 网络对抗技术 2017-2018-2 20152515 Exp1 PC平台逆向破解(5)M
  18. topshelf 开发windows 服务资料
  19. Python内部机制。
  20. POJ1149_PIGS

热门文章

  1. GJM : Unity3D HIAR -【 快速入门 】 五、导出 Android 工程、应用
  2. 全国SHP地图数据赠送
  3. Android 底部弹出Dialog(横向满屏)
  4. Atitit.android播放smb 网络邻居视频文件解决方案
  5. SegmentControl 那些令人烦恼的事儿
  6. AEAI CRM_v1.5.2升级说明,开源客户关系管理系统
  7. BigCouch资料整理
  8. redis数据结构存储Linked List设计细节(redis的设计与实现笔记)
  9. Hadoop技巧(02):时间同步
  10. RabbitMq 集群搭建