原生js，jquery ajax请求以及jsonp的调用

ajax
    是用来处理前后端交互的技术，可以改善用户体验，其本质是
    XMLHttpRequest，异步访问服务器并发送请求数据，服务器返回响应的数据，以页面无刷新的效果改变页面中的局部内容
    同步：任务一个一个的执行，只有前面的任务执行完才会执行下一个任务，如果前面的任务是耗时操作，则需要一直等待
    异步：多条任务并发执行，也就是一个任务的开启，不需要等待其他任务执行结束，效率较高

    ajax的语言载体是JavaScript，最大的特点是页面不刷新

1、获取ajax对象
        主流浏览器获取方式:火狐、谷歌、safari、opera、IE7以上
        var xhr = new XMLHttpRequest();
        IE7以下
        var xhr = new ActiveXObject("microsoft.XMLHttp");

2、发起请求
        创建请求：xhr.open(请求方式get/post,请求地址);
        发送请求：xhr.send(post请求数据/get设置null);

3、接收数据
        ajax可以接收字符串、html标签、css样式、xml、json
        通过监听onreadystatechange事件。来接收ajax状态的变化（readyState属性）
        readyState:
        -0:表示未初始化，对象已经建立，但是没调用onen方法
        -1：对象已建立，但是未调用send方法
        -2：发送数据，已调用send方法，但当前状态及http头未知
        -3：已接收部分数据，但是数据不全
        -4：数据接收完毕

4、常用属性和方法
        属性：
        -responseText：将响应的数据作为字符串返回，只读
        -responseXML:将响应的数据格式化为xml格式并返回，只读
        -status：当前请求的http状态码
        方法：
        -open
        -send
        -setRequestHeader：设置请求头

 

get请求

url以字符串形式传递数据，对中文、&、=需要特殊处理，可以使用encodeURIComponent()方法进行编码，编码后的内容在服务端不需要解码，可以正常接收,get多个参数之间用&连接，参数名和参数值用=连接

            var xhr = null;
            //获取ajax对象
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else{
                xhr = new ActiveXObject("Microsoft.XMLHttp");
            }
            xhr.onreadystatechange = function(){
                console.log(xhr.readyState);
                switch (xhr.readyState){
                    case 0:
                    console.log("尚未初始化");
                    break;
                    case 1:
                    console.log("尚未建立连接");
                    break;
                    case 2:
                    console.log("正在发送数据");
                    break;
                    case 3:
                    console.log("正在接受数据");
                    break;
                    case 4:
                    console.log("数据接收完成");
                    //处理接到的数据,这下面是重点
                    var text = xhr.responseText;
                    break;
                }
            }
            //创建请求
            xhr.open('get','http://localhost/PHP/ajax01.php?sel=4');
            xhr.send(null);    

post请求

　-给服务器传参数，需要将参数写在send方法中：参数1=值1&参数2=值2...
    -需要调用setRequestHeader()方法，把传送的参数封装成xml格式（模仿form表单提交数据：application/x-www-form-urlencoded）;
    -传递的中文、特殊符号都需要编码

 

            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if (xhr.readyState == 4) {
                    console.log("登陆成功:"+xhr.responseText);
                }
            }
            //等到输入的用户名和密码，
            var uname = "uname="+ encodeURIComponent(document.getElementById("uname").value);
            var pwd = "pwd="+encodeURIComponent(document.getElementById("pwd").value);
            xhr.open("post","http://localhos/PHP/ajax01.php");
            //设置头信息，需要在open方法之后设置
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            //设置参数
            var str = uname+"&"+pwd;
            xhr.send(str);

 

 

 

get/post的区别:

    -请求数据量，get最多2k，post没有限制
    -安全方面，post更安全
    -传递数据的形式：get是url和参数一起发送，post是参数单独发送

 

 

jquery ajax请求

//AJAX
        $.ajax({
            url:"data.txt",
            type:'get',
            dataType:'json',
            data:null,
            async:true,
            timeout:1000,//设定超时时间  一般都是3000毫秒
            cache:false,//设定GET请求的时候不走 缓存数据，原理其实就是在URL末尾加随机数，默认是true
            success:function(data){
                console.log(data)
            },
        })
        //JSONP
        //JSONP都是GET和异步请求的，不存在其他的请求方式和同步请求，而且jquery默认会给JSONP的请求清楚缓存
        $.ajax({
            url:"http://matchweb.sports.qq.com/kbs/calendar?columnId=100000",
            type:'get',
            dataType:'jsonp',
            jsonpCallback:"fn",//自定义传递给服务器的函数名，而不是使用jquery自动生成的
            jsonp:'cb',//把传递函数名的那个形参callBack变为cb
            success:function(data){
                console.log(data)
            },
        })

 

转载于:https://www.cnblogs.com/whybxy/p/7281096.html