注册 登陆

    2018-05-08 22:17:33ajax总结

    您现在的位置是: 首页 >  php >  ajax总结


    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框架,ecshop,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:"jsonpCallback1",

            success : function(data){

                var obj = eval(data);

                //处理接收到的数据

            },

            //end

            error:function(e){

                alert("error");

            }

        });                

    </script>

    知识更新很快,学习很重要。当回过头,感觉这些很简单的时候,说明自己在进步,在成长...


关键字词: ajax总结

0

上一篇: 暂无

下一篇: 消息队列介绍及应用场景demo

Name::

Email:


留言内容: