关于浏览器向服务器发起异步请求的方式,目前暂时我只接触了三种:jQuery中的Ajax, vue中的vue-resource, 和axios. 目前看来使用最多的还是Ajax, vue官方也宣布vue-resource更新到2.0就不更新了,推荐使用axios进行数据请求. 下面就做个3种请求方式的知识梳理吧 .

一. 使用Ajax请求数据

1.  原理: 使用Ajax实现异步请求的原理, 是通过XMLHttpRequest对象, 使用JavaScript向服务器提出请求并处理响应，而不阻塞用户. XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。

2.  关于XMLHttpRequest对象

使用XMLHttpRequest发送请求,包括以下两个方法:

open(method, url, async);

send(string);

其中,method指定请求的方式,是get/post或者其他, url是请求的服务器地址, async指定是否异步,默认为true, 异步请求.

当请求方式是get时,参数是拼接在url中的, 因此send中的string可以不填写. 当请求方式为post的时,就可以使用send传递数据.

例如:

var request = new XMLHttpRequest();

request.open("GET", "get.php",true);
request.send();

request.open("POST","post.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=Mary&sex=女");

其中: setRequestHeader方法用来设置请求头信息, 一定要写在open和send方法中间,否则会抛出异常;

另外, 想获取服务器回复的响应信息, XMLHttpRequest对象提供了以下一些属性和方法:

responseText:  获得字符串形式的响应数据
responseXML:  获得XML形式的响应数据
status和statusText:  以数字和文本形式返回HTTP状态码
getAllResponseHeader():  获取所有的响应报头
getResponseHeader():  查询响应中的某个字段的值

3. 如何使用Ajax

①, 在原生JS下使用Ajax:(假设有一个server.php服务器文件已经写好)

GET方法:

document.getElementById("search").onclick = function () {
    var request = new XMLHttpRequest();
    request.open("GET", "server.php?number=" + document.getElementById("keyword").value);
    request.send();
    request.onreadystatechange = function () {
        if (request.readyState === 4) {
            if (request.status === 200) {
                var data = JSON.parse(request.responseText);
                if(data.success){
                    document.getElementById("searchResult").innerHTML = data.msg;
                }else{
                    document.getElementById("searchResult").innerHTML = "出现错误:"+data.msg;
                }
            } else {
                alert("发生错误:" + request.status);
            }
        }
    }
};

POST方法:

document.getElementById("save").onclick = function () {
    var request = new XMLHttpRequest();
    request.open("POST", "server.php");
    var data = "name=" + document.getElementById("staffName").value
        + "&number=" + document.getElementById("staffNumber").value
        + "&sex=" + document.getElementById("staffSex").value
        + "&job=" + document.getElementById("staffJob").value;
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    request.send(data);
    request.onreadystatechange = function () {
        if (request.readyState === 4) {
            if (request.status === 200) {
                var data = JSON.parse(request.responseText);
                if(data.success){
                    document.getElementById("createResult").innerHTML = data.msg;
                }else{
                    document.getElementById("createResult").innerHTML = "出现错误:"+data.msg;
                }
            } else {
                alert("发生错误:" + request.status);
            }
        }
    }
}

② 在Jquery中使用Ajax:(默认html中已经引入jquery.js)

GET方法:

 $("#search").click(function(){
        $.ajax({
            type:"GET",
            url:"http://127.0.0.1/server.php?number=" + $("#keyword").val(),
            dataType:"jsonp",
            jsonp:"callback",
            success:function(data){
                if(data.success){
                    $("#searchResult").html(data.msg);
                }else{
                    $("#searchResult").html("出现错误:"+data.msg);
                }
            },
            error:function(jqXHR){
                alert("发生错误:" + jqXHR.status);
            }
        });
    });

POST方法:

$("#save").click(function(){
        $.ajax({
            type:"POST",
            url:"http://127.0.0.1/server.php",
            dataType:"json",
            data:{
                name:$("#staffName").val(),
                number:$("#staffNumber").val(),
                sex:$("#staffSex").val(),
                job:$("#staffJob").val(),
            },
            success:function(data){
                if(data.success){
                    $("#createResult").html(data.msg);
                }else{
                    $("#createResult").html("出现错误:"+data.msg);
                }
            },
            error:function(jqXHR){
                alert("发生错误:" + jqXHR.status);
            }
        });
    });
});

③: 在vue中使用Ajax:(一般在vue中使用ajax获取数据的情况极少,但是使用也并不冲突)

1) 首先, 在vue中注入jquery.js依赖

2) 然后, 在 webpack.config.js 中添加插件:

// 增加一个plugins
  plugins: [
      new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery"
      })
   ],

3) 在全局main.js中引入

import $ from 'jquery'

4) 在事件中调用ajax方法:

this.$nextTick(()=>{
                var that=this;
                $.ajax({
                    type:"get",
                    url:"http://127.0.0.1:8080/index.php/Post/get_collect_post",
                    data:{user_id:1},
                    success:function(data){
                        that.ret=data.ret;
                        that.data=data.data;
                    }
                })
            })

以上就是总结的关于Ajax在几种js语言环境下的使用方法, 关于跨域问题另写文章详细分析;