前端复习－02-ajax原生以及jq和跨域方面的应用。

ajax这块我以前一直都是用现成的jq封装好的东西，而且并没有深入浅出的研究过，也没有使用过原生形式的实现。包括了解jsonp和跨域的相关概念但是依然没有实现过，其中有一个重要的原因我认为是我当时并不了解后端的一些操作模式，也并没有掌握任何一门后端的脚本语言，导致没有办法灵活的测试。不过现在完全不存在这个完题了。。我已经深入浅出的掌握了python。。。也有一个 现成的django环境 可以好好测试一下。

从原生部分谈起：

var searchButton = document.getElementById('search');
    searchButton.addEventListener('click',function(){
        //发送AJAX请求并且处理
        var request;
        url = 'service.php'
        request = new XMLHttpRequest()
        request.open('get',url);
        request.send();

    },false);

这是针对现代浏览器的一个粗处理。看上去也非常清晰，就是获取一个网页上现成的domNode 然后对该domNode触发一个点击事件，从而使用一个ajax的操作。

 

这里插入一个 javascript操作json的 一点知识，帮助自己也好好复习一下。因为它们真是无处不在。。太常用了，如果正要使用却忘记了。。那不是很尴尬。。

因为自己玩太长时间python的关系 js的很多api都忘记了。

JSON.parse()

用于将一个json字符串解析成json对象。

 

 

JSON.stringify()

用于将一个json对象解析成字符串。

 

接下来是使用最最最最常用的第三方js库 jquery库来实现ajax

首先来介绍一下jq里面最底层方法jquery.ajax([settings])

type:类型，“post”或"get"，默认为"get方法"

url:发送请求的地址

data:是一个对象，连同情趣发送到服务器的数据

dataType:预期服务器返回的数据类型，如果不指定，jquery将自动根据http包mime信息来判断，一般我们采用json格式，可以设置为“json”。

success:是一个方法，请求成功后的回调函数。传入返回之后的数据，以及包含成功码的字符串

error:是一个方法，请求失败时调用这个函数。传入XMLHttpRequest对象。

 

然后下面是一个 使用jq里面最底层的.ajax()方法的例子。这个方法应该是比较灵活的了

    $(document).ready(function(){
        $("#search").click(function(){
            $.ajax({
                type:'GET',
                url:"service.php",
                dataType:"json",
                success:function(data){
                    
                },
                error:function(){
                    alert('我失败了');
                }
            });
        });
    });

因为我以前原生js没有学习好的原因，所以我当时一直无法理解这个方法里面也就是调用.ajax()这个方法的时候 里面使用 面向对象的编程的方式 以key-value的形式 ','隔开的形式来写  随着现在更深入的学习js之后 终于理解了 是有这种书写方式的。 所以说 使用第三方库虽然会让操作和使用变得方便，也会使得初学者陷入虽然会实现使用，却不知道为什么可以这么写的困局之中。。

 

再贴一个使用post方法带参数传递的例子

    $(document).ready(function(){
        $("#search").click(function(){
            $.ajax({
                type:'POST',
                url:"service.php",
                dataType:"json",
                data:{xxx:'hehe',yyy:'heiheihei'},
                success:function(data){
                    
                },
                error:function(){
                    alert('我失败了');
                }
            });
        });
    });        

这样就可以了。。 跨域我另外开一个文章来写。。自己写后端来实现一下 几种跨域的方法。