ajax请求-PHP跨域解决-jsonp核心本质

正常我们都是用a标签来存放资源，href里就是存放给用户需要下载的资源，比如：
< a href= "../file/ajax.rar">下载</a>
这样用户也是能下载的，但并不是什么东西都能点击下载的，比如我在a标签方js文件、text文件等
<a href= "../file/ajax.js">下载</a>
点击时候并不是下载，而是打开
通常我们用a标签存资源的时候最好把文件压缩一下，利用服务器快速解压，大大的节省很多时间
所以我们可以利用JavaScript设置一下，如：
<input type="button" id="btn" value="点击下载">

btn.onclick =function (){
  let link =document.createElement( "a");
      link.download ="ajax";
      link.href = "../file/ajax.js";
      link.click();
}

//get用的是最多的，这里就用get
let xhr = new XMLHttpRequest();
//在H5的官方文档推荐的是使用onload事件去监听，我们这里就使用推荐的，其他的没什么太大的区别
     xhr.onload =function (){
//判断一定要写，用来监听它的状态码
      if(xhr.readyState ==4 && xhr.status ==200){
            console.log(xhr.response)
        }
      }
     xhr.open( "get", "../file/ajax.js");
     xhr.send();
//当请求json格式的数据时候，默认返回的是字符串数据，我们可以
JSON.parse(xhr.response)   来转为对象

有时候后台会返回XML格式

let xhr = new XMLHttpRequest();
//在H5的官方文档推荐的是使用onload事件去监听，我们这里就使用推荐的，其他的没什么太大的区别
     xhr.onload =function (){
//判断一定要写，用来监听它的状态码
      if(xhr.readyState ==4 && xhr.status ==200){
            console.log(xhr.responseXML)
        }
      }
     xhr.open( "get", "../file/ajax.XML");
     xhr.send();

你可以发现，它返回的是一个document，这时我们就可以利用DOM来操作它了

let dom =xhr.responseXML;
//假设我要获取ajax.XML的title
let title = dom.querySelectorAll("title");
let str ="";
title.forEach(function(item,index){
  str += item.childNodes[0].nodeValue + "<br/>";
  box.innerHTML =str
})

我们来模仿一个请求后台PHP

<?php
$arr =array('蓝馨',18);
//这里要注意，前后端交互不能发送对象这些东西，只能发送字符串，所以要编码一下；
echo json_encode($arr)

而我们前端接受到的是编码过的字符，上面$arr返回的是Unicode编码，我们可以用

JSON.parse(xhr.response)

来转换

但是，如果在真实服务器上，会出现 TIM截图20180617115143.png

什么意思呢？就是不能进行跨域的访问，因为后端没有开通权限,所以我们回到php那文件添加

//*代表任何人都能访问
header(string: "Access-Control-Allow-Origin : *")

这样就能请求到数据了，这就是后端能解决跨域的问题，后端不给访问我们前端是解决不了。

jsonp的本质就是给你返回一个函数的调用

function myData(data){
  console.log(data)
}
function Jsonp(){
  let s = document.creatElement("script");
  s.src ="ajax.php?callback = myData";
  document.body.appendChild(s)
}

<?php
header(string: "Access-Control-Allow-Origin : *");
$jsonp = $_GET['callback'];
$arr =array('蓝馨',18);
echo $jsonp."(".json_encode($arr).")";

大家都知道，H5的一些超前的原生API有很多的兼容性问题，用原生写相对来说较复杂，这时我们可以利用一些第三方的插件库：如jQuery
http://apps.bdimg.com/libs/jquer/2.1.4/jquery.min.js