zoukankan      html  css  js  c++  java
  • 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);
      }

    努力到无能为力,拼搏到感动自己。
  • 相关阅读:
    【bzoj1176】[Balkan2007]Mokia
    【bzoj1503】[NOI2004]郁闷的出纳员
    C#设置和获取系统环境变量
    结伙创业指南及翻脸法则
    Unity3D_(游戏)卡牌03_选关界面
    Unity3D_(游戏)卡牌02_主菜单界面
    Unity3D_(游戏)卡牌01_启动屏界面
    Unity3D_(游戏)跳一跳超简单制作过程
    如何将项目托管到Github上
    Android_(游戏)打飞机06:后续
  • 原文地址:https://www.cnblogs.com/woniubushinide/p/6794769.html
Copyright © 2011-2022 走看看