php跨域发送请求原理以及同步异步问题

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

• <script async type="text/javascript" src="http://lisi.com/data.php?flag=1"></script>
  <script type="text/javascript">
  // script标签默认请求是同步的，也就是第一个标签没有得到服务器响应内容时，后续的的标签只能等待
  // 如果希望标签的请求变成异步的，可以给标签添加一个async属性
  console.log(abc);
  </script>

• <script type="text/javascript">

/*

动态创建script标签，这种方式默认就是异步的

*/

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

script.src = 'http://lisi.com/data1.php?callback=abc';

var head = document.getElementsByTagName('head')[0];

head.appendChild(script);

// 这个函数由谁调用？后台返回的内容（js代码-函数调用）来调用

// 回调函数（不是自己调用，而是“别人”调用）

function abc(param){

console.log(param.username);

}

</script>

//跨域对应的文件夹

<?php
$flag=$_GET['callback'];
echo $flag.'({"username":"xiaobai","age":"18"})';//返回的内容是【函数调用】
?>

• ajax方法既支持json也支持jsonp
  */
  function ajax(obj){
  // 默认值
  var defaults = {
  type : 'get',
  jsonp : 'callback',
  url : '#',
  data : {}
  }
  // 覆盖默认参数
  for(var key in obj){
  defaults[key] = obj[key];
  }

  if(defaults.dataType == 'jsonp'){
  // 跨域处理
  _ajax4Jsonp(defaults);
  }else{
  // ajax处理
  _ajax4Json(defaults);
  }
  }

  function _ajax4Json(obj){
  // 1、创建xhr对象
  var xhr = null;
  if(window.XMLHttpRequest){
  xhr = new XMLHttpRequest();
  }else{
  xhr = new ActiveXObject('Microsoft.XMLHTTP');
  }
  // 处理参数
  var param = '';
  // 处理对象形式的参数
  // 把{username:'lisi',age:12,gender:'male'}
  // 转成username=lisi&age=12&gender=male
  for(var key in obj.data){
  // 拼接一个参数
  param += key + '=' + encodeURIComponent(obj.data[key]) + '&'
  }
  if(param){
  // 去掉最后一个字符
  param = param.substring(0,param.length - 1);
  }
  if(obj.type == 'get'){
  // 对于get请求要把参数拼接到url中
  obj.url += '?' + param;
  }
  // 2、配置发送参数
  xhr.open(obj.type,obj.url);
  // 3、执行发送动作
  var data = null;
  if(obj.type == 'post'){
  data = param;
  // 设置请求头
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  }
  xhr.send(data);
  // 4、处理响应（指定回调函数）
  xhr.onreadystatechange = function(){
  if(xhr.status == 200 && xhr.readyState == 4){
  // 获取服务器响应数据
  var result = xhr.responseText;
  if(obj.dataType == 'json'){
  // 如果要求是json格式，那么就把json字符串转成对象
  result = JSON.parse(result);
  }
  // 调用回调函数
  obj.success(result);
  }
  }
  }

  function _ajax4Jsonp(obj){
  // 业务参数转换
  // 把{"username":"lisi","age":"12"}格式的数据转成username=lisi&age=12
  var param = '';
  for(var key in obj.data){
  param += key + '=' + obj.data[key] + '&';
  }
  // if(param){
  // param = param.substring(0,param.length - 1);
  // }

  // 生成默认的回调函数的名称
  var cbName = 'jQuery' + ('v1.11.1' + Math.random()).replace(/\D+/g,'') + '_' + (new Date().getTime());
  if(obj.jsonpCallback){
  // 如果调用方法的时候传递了回调函数的名称就把默认的覆盖掉
  cbName = obj.jsonpCallback;
  }

  // 回调函数
  window[cbName] = function(data){
  obj.success(data);
  }
  // 后台返回的内容是函数调用
  // jQuery12312312312312321_43213123123(23123);

  // 创建script标签,然后追加到head标签中
  var script = document.createElement('script');
  script.src = obj.url + '?' + param + obj.jsonp + '=' + cbName;
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(script);
  }