同源策略是一种安全机制。它能为我们降低我们本地文件的风险。首先是同源的概念。在互联网上，我们打开网页肯定来不同的服务器，我们可以正常加载这些页面。但是，我们不能修改，或者是访问不同的服务器的页面。（在不跨域的技术下）。只有符合同源的才能相互访问，符合同源的条件是有三个要素的：
1：安全协议需要相同，就是http/https
2:域名相同:
3:端口号相同。
只有是这三个要素相同时，我们称为同源。不然，就是不是同源，就需要启动同源策略。什么是同源策略呢？
1:本地的Cookie、localStorage，IndexDB的存储的文件不能访问。Cookie,localStorage indexDB 的存储文件。indexDB
2：DOM的操作是无法进行的。DOM的操作肯定需要访问本地磁盘文件。同源策略就是保护本地的磁盘文件，防止信息泄露。当然也是无法进行的。
3：AJAX的访问是不能进行发送请求。ajax的访问也是无法进行的，ajax请求也是来访问另一个服务器的文件。也是访问不到的。所以，同源策略是为保护信息文件的。所以，三种情况.1:cooKie localStorage indexDB。2:ajax访问是不能访问的。 3：DOM操作是无法操作的。但是，我们可以通过浏览器来访问不同的页面。但是，不能操作其中的文件。这是同源策略的含义。
这给我们带来些安全机制，但是我们也需要进行跨域请求。发送AJAX请求，来进行页面的操作，所以，我们可以通过一些技巧来进行跨域，来打破同源策略。这就是 JSONP技术。
我们技术员在开发的时候，我们发现有个属性 src 可以跨域请求的任意文件。我们知道<script></script>有src的属性，正好我们可以利用script 的src属性进行操作。所以，我们的jsonp的技术就是利用script标签的src的属性。所以，我们的第一步就是创建script标签。
var scriptTag = document.createElement("script");
// 添加相关的属性
scriptTag.tyle="text/javascript";
scriptTag.src = "具体的接口路径+?callback=回调函数名"
// 在接口路径的位置上加上参数，用callback的属性=回调函数名的话，这一步是个关键。我们的jsonp的技术关键点就是用src的属性去跨域来去访问接口，后台会把数据（一般格式是json文件）打包成函数的执行代码来返回。其中数据的位置是放在函数的参数里。我们就可以利用这一点来进行操作。我们就创建一个函数。函数名就是整个函数存放的空间地址，也就是整个函数体，然后我们把函数名放到接口后的参数，来调用执行。然后 函数的形式参数就是数据的存放的地方。我们就可以在函数内部执行来接受参数就可以接受到了后台的传过来的数据了。是json文件，我们可以再通过解析数据，来进行拼接到页面中。我们还要把script标签拼接到文档流中。等页面加载完后再加载。
window.onload = function () {
document.head.appendChild(scriptTag);
}
function doem（data）{ // callback =doem。
console.log(data);
}
主要是回调函数的作用机制。我们要理解其中的工作原理。回调函数的运作原理就是把函数本身当做发送方法的参数，当然写在接口后的，用问号？来拼接。然后等后台来发送执行函数代码时，open方法或者是callback方法就可以来触发这个函数名的函数了。我们在回调函数用参数来接受了后台发送的数据。
我们在封装ajax时，我们也需要用到回调函数的运行原理。因为在ajax请求中，请求是异步请求方式，是在服务器响应时，页面也在继续执行。所以我们也要及时拿到数据，就利用回调函数。创建一个函数，函数名当成参数，在封装ajax中，我们再加个函数名作为参数，来触发调用函数，我们来看看这个封装ajax方法。
// 自己封装ajax。
// 我们考虑参数列表。method，url,data,callback.
function ajax(method,urls,data,callback) {
//创建请求对象
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() :new ActiveXObject("Microsoft.XMLHTTP");
//判断请求方式
method = method.toUpperCase(); // 转化为大小写。
if(method == "GET") {
xhr.open("GET",urls+"?"+data,true);
xhr.send(null);
}else if (method =="POST") {
xhr.open("POST",urls,true)
xhr.send(data)
}else{
alert("请输入合法的请求方式")
}
//添加事件监听
xhr.onreadystatechange = function () {
if(xhr.readyState ==4 && xhr.status ==200){
// 判断服务器回传的数据类型。
if(!xhr.responseXML){
callback(xhr.responseText)
}else{
callback(xhr.responseXML)
}
}
}
}
所以，我们来总结一下，jsonp技术的本质。
1：就是利用src的属性，可以无限制的加载服务器接口的内容特性，也就是说，有get的请求。所以，我们在含有src的属性标签（script）可以实现跨域。它请求服务器的接口位置加载到src的路径中，并凭借一个callback=回调函数名来作为接口位置的参数。所以，我们要记得，在用jsonp技术方法和src属性时，我们要记得，要用callback=回调函数名的形式，然后，我们创建回调函数，传参，在函数内部来解析参数就可以了，我们就可以拿到服务器给我们的数据了。
2：而在服务器端，收到了该请求，会取出函数名，并拼接成函数执行的代码形式，然后把前端的所需要的数据打包在回调函数的参数里，一块返回给前端。
3：而前端收到服务器回调的执行代码后，开始触发回调函数，让浏览器来解析运作。我们就可以在回调函数的参数中进行解析数据，再拼接到页面中。在拼接到页面中，我们用的是DOM节点来操作，创建的标签，赋值，再添加到页面中。就可以在页面中显示出来了。当然，我们还有其他方法来进行解析服务器给我们发的数据的，特别是复杂的数据，我们可以用封装好的模板来解析，我们将在下一章来进行理解模板。
网友评论