var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function(){
 console.log(ajax.readyState);
 console.log(ajax.status);
 if(ajax.readyState==4 && ajax.status==200){
  console.log(ajax.responseText);
  console.log(ajax.responseXML);//返回不是XML，显示null
  console.log(JSON.parse(ajax.responseText));
  console.log(eval("("+ajax.responseText+")"));
  }
}
ajax.open("GET","h51701.json",true);
ajax.send(null);

header("Access-Control-Allow-Origin:*");//表示允许哪些域名请求这个PHP文件，*表示所有域名都允许

<scriptsrc="/UploadFiles/2021-04-02/json.php">

②由于src在加载数据成功后，后直接将加载内容放入到script标签中
所以，后台直接返回JSON字符串将不能在script标签中解析
因此，后台应该返回给前台一个回到函数名，并将JSON字符串作为参数传入
后台PHP文件中返回：


echo"callBack({$str})";


③前台接收到返回的回到函数，将直接在script标签中调用。因此需要声明这样一个回调函数，作为请求成功的回调。




function callBack(data){
  alert("请求成功");
  console.log(data);
 }


3、JQuery的ajax实现JSONP
① 在ajax请求时，设置dataType为"json"
② 后套返回时，依然需要返回回调函数。但是，ajax在发送请求时会默认使用get请求将回到函数名发给后台，后台可以使用$_GET['callback']取出回调函数名：


echo"{$_GET['callback']}({$str})";


③后台返回以后，ajax依然可以用success作为成功的回调函数：


success:function(data){}


当然后台也可以随便返回一个回调函数名。


echo"callBack({$str})";


前台只要请求成功，就会自动调用这个函数。类似于第2条的②③步
以上这篇原生JS实现ajax与ajax的跨域请求实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。