ajax总结

2018-06-24 01:39:24来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

  在平时的开发项目中,难免接触前端的知识,需要写接口,有时候用到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>

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:css命名规范

下一篇:html input验证只能输入数字,不能输入其他