同源策略 ajax,AJAX-同源策略 跨域访问

## 同源策略

概述： 同源策略是浏览器的一种安全策略，视为同源是指域名，协议，端口完全相同。只有同源的地址才可以通过AJAX方式请求。同源或者不同源说的是两个地址的关系，不同源地址之间请求我们称之为跨域请求。

即是不同源地址之间，不能发送 AJAX 请求。

JSONP

1，JSONP的基本思想是，网页通过添加一个元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

2，JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的JSON数据

类似：

hehe({q:"123",p:false,s:["12306","12306铁路客户服务中心","12306火车票网上订票官网","12333","12315","12345","12329","12366电子税务局","12366","12333社保查询网"]});

###2,寻找一个有效的方法 实现跨域请求

请求方url：http://www.lisi.com/ajax-02/day02/xinlang.html

响应方url：http://www.zhangsan.com/02_ajax/server/test.php

跨域方法如下：

var script =document.createElement('script');

script.src = "http://www.zhangsan.com/02_ajax/server/test.php";

document.body.appendChild(script);

console.log(script);

function foo(data) {

console.log(data);

}

服务端返回: foo('var a = 123')

//控制台輸出：var a = 123;

script: 使用script标签 和 jsonp (利用js代码执行特性)实现跨域。

###3，跨域封裝。

// "https://suggest.taobao.com/sug?q="+keywordValue+"&callback=hehe";

obj = {

url:"https://suggest.taobao.com/sug",

data:{q:"123",pwd:"3456"},

success:function(data) {}

}

function myAjax(obj) {

var defaults = {

type:"get",

url:"#",

data:{},

success:function(data) {},

jsonp:"callback",

jsonpCallBackName: "hehe"

};

for (var key in obj) {

defaults[key] = obj[key];

//如何赋值的？如果defaults 中没有 obj中有key。 一样赋值

}

var params = "";

for (var attr in defaults.data) {

params += attr + "=" + defaults.data[attr] + "&";

}

if(params) {

params = params.substring(0,params.length-1);

defaults.url += "?" + params;

}

defaults.url += "&"+defaults.jsonp+"="+defaults.jsonpCallBackName;

console.log(defaults.url);

var script = document.createElement("script");

script.src = defaults.url;

window[defaults.jsonpCallBackName] = function(data) {

defaults.success(data);

}

var head = document.querySelector("head");

head.appendChild(script);

}

調用：

百度提示词---跨域百度数据服务器

window.onload = function() {

var btn = document.querySelector("#btn");

btn.onclick = function() {

var keywordValue =document.querySelector("#keyword").value;

console.log(keywordValue);

myAjax({

url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",

data:{wd:keywordValue},

//声明所需要的函数，真正执行的函数是响应体返回的

success:function(data) {

var liTag = "";

console.log(data);

for(var i = 0; i

var tempSug = data.s[i];

liTag += "

" + tempSug + "";

}

var ulTag = document.querySelector("ul");

ulTag.innerHTML = liTag;

},

jsonp:"cb",

jsonpCallBackName:"haha"

});

};

};

注：學習筆記

JavaScript JSON AJAX 同源策略 跨域请求

网页和Ajax和跨域的关系 1 Ajax使网页可以动态地.异步地的与服务器进行数据交互,可以让网页局部地与服务器进行数据交互 2 Ajax强调的是异步,但是会碰到跨域的问题. 3 而有很多技术可以解决 ...

(转)jquery ajax使用及跨域访问解决办法