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>

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