• ajax 总结


    在平时的开发项目中,难免接触前端的知识,需要写接口,有时候用到js中的ajax跨越请求,总结了ajax的写法。

    开始之前,需要准备两个文件,ajax.php;ajax.html

    1、ajax的基本步骤(ajax.php)

    //1、创建对象
    var ajax=new XMLHttpRequest();
    //alert(typeof ajax);
    //2、建立连接
    ajax.open('get','ajax.php?id=5',true);
    //3、发送请求
    ajax.send();
    //4、准备事件处理结果
    ajax.onreadystatechange=function()
    {
         if(ajax.readyState==4&&ajax.status==200){
           //请求:request
           //响应:response
           var res=ajax.responseText;
           //alert(res);
           document.write(res);
    }
    }

    ajax,有同步异步的区别?异步:把小弟派出去了,什么时候回来,什么时候处理它,主程序继续执行,不会等待。同步:(比较少用)会在send这一步等待,主程序不会继续执行。method:请求的类型;GET或POST

    2、ajax封装为函数(ajax.php)

    <script>
    function get(url,func)
    {
      var ajax=new XMLHttpRequest();
       ajax.open=('get',url,true);
     ajax.send();
     ajax.onreadystatechange=function()
    {
          if(ajax.readyState==4&&ajax.status==200){
              var res=ajax.responseText;
                  func(res);
    }
    }
    }//回调+匿名
    get('1.php',function(res){
          alert(res);
    })
    get('ajax.php',function(res){
       console.log(res);
    })
    /*
    get('1.php',chuli);
    function chuli(res)
    {
      alert(res);
    }
    get ('ajax.php',chuli2);
    function chuli2(res){
          console.log(res);
    }
    */
    </script>

    这样封装好,就方便我们使用了,tp框架,echshop,ecstore,都有自己的封装的ajax

    3、jq中的ajax请求(ajax.php)

    $.ajax({
                 url:'ajax.php?id=5',
                 dataType:'json',//指定返回数据的类型:xml,html,script,json,text,_default
                  type:'get',//设置请求的类型:get(默认)post
                  //data:'name=123&&age=18',//传输的数据(有两种格式)
                   data:{age:8} ,//传输的数据
                   async:true,//同步异步:true默认异步       false同步
                   success:function(res){
                        //alert(typeof res);
                        //alert(res.id);
                        alert(123);
                   },
                      error:function(a){
                             alert('出错鸟~~~');
                        }
                    });

    4、ajax跨域问题(ajax.php)

         协议、域名、端口这三个有任何一个不同,就跨域了。ajax本身不是可以跨域的,通过产生一个script标签来实现跨域。因为script标签的src属性是没有跨域的限制的。其实设置了dataType:'jsonp'后,$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议

    JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问

    实现ajax的跨域请求,有几种方法,这儿写一种通过‘jsonp’,实现跨域的方法

    <script type="text/javascript">
         var url="http://localhost/other.php?act=get_article';
          $ajax({
                    type:"get",
                    url:url,
                    jsonp:"callbackparam",
                    jsonpCallback:"jsongCallback1”,
                    success:function(data){
                        var obj=eval(data);
                         //处理接收到的数据
                       },
                     //end
                        error:function(e){
                                alert("error");
                            }
                         });
                    </script>
  • 相关阅读:
    机器学习-分类算法-决策树,随机森林10
    机器学习-分类算法-模型选择与调优09
    机器学习-分类算法-精确率和召回率08
    机器学习-分类算法-朴素贝叶斯算法07
    机器学习-分类算法-K-近邻算法06
    java读取自定义配置文件并引用
    kafka发布消息报错LEADER_NOT_AVAILABLE
    Kettle位置参数(Argument)、命名参数(Parameter)、变量(Variable)
    kettle里的两个参数和一个变量
    如何在命令行下运行kettle的作业(job)和转换(transform)
  • 原文地址:https://www.cnblogs.com/zzp0320/p/7227267.html
Copyright © 2020-2023  润新知