几种ajax请求----原生js、jQuery、Vue

一、原生JS方式

js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的，要使用js原 生的Ajax完成异步操作，有如下几个步骤：

1. 创建Ajax引擎对象

2. 为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）

3. 绑定提交地址

4. 发送请求

5. 接受响应数据

    //1.创建核心对象
    var xmlhttp=new XMLHttpRequest();
    //2. 建立连接
    /*
        参数：
            1. 请求方式：GET、POST
                * get方式，请求参数在URL后边拼接。send方法为空参
                * post方式，请求参数在send方法中定义
            2. 请求的URL：
            3. 同步或异步请求：true（异步）或 false（同步）

     */
    xmlhttp.open("GET","ajaxServlet?username=tom",true);

    //3.发送请求
    xmlhttp.send();

    //4.接受并处理来自服务器的响应结果
    //获取方式 ：xmlhttp.responseText
    //什么时候获取？当服务器响应成功后再获取

    //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
    xmlhttp.onreadystatechange=function(){
        //判断readyState就绪状态是否为4，判断status响应状态码是否为200
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            //获取服务器的响应结果
            var responseText = xmlhttp.responseText;
            alert(responseText);
        }
    }

readyState：存有服务器响应的状态信息
0: 请求未初始化（代理被创建，但尚未调用 open() 方法）
1: 服务器连接已建立（open方法已经被调用）
2: 请求已接收（send方法已经被调用，并且头部和状态已经可获得）
3: 请求处理中（下载中，responseText 属性已经包含部分数据）
4: 请求已完成，且响应已就绪（下载操作已完成）

二、JQuery

1.Ajax基本结构

$.ajax({          
       	 url:"发送请求（提交或读取数据）的地址", 
         dataType:"预期服务器返回数据的类型",  
         type:"请求方式", 
         async:"true/false",
         data:{发送到/读取后台（服务器）的数据},
         success:function(data){请求成功时执行},      
         error:function(){请求失败时执行}
});

1. url 默认为当前页地址
2. dataType 可用类型：
   （如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递）

• xml：返回XML文档，可用JQuery处理。
• html：返回纯文本HTML信息。
• script：返回纯文本JavaScript代码。
• json：返回json数据。
• jsonp：(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
• text：返回纯文本字符串。
  说明：对于json和jsonp的区别，本小白暂时没有深入了解，目前只知道jsonp可以跨域读取数据，有待进一步学习~

3. type 可用类型主要为post和get两种（默认为get）

• get：从指定的资源请求数据（从服务器读取数据）
• post：向指定的资源提交要被处理的数据（向服务器提交数据）

4. async 异步方式，默认为true，即异步方式。当设置为false时，为同步方式。

• 异步方式：ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发ajax里的success方法，这时候执行的是两个线程。
• 同步方式：在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
  说明：这里的同步和异步有待深入理解，以下实例均使用默认的异步方式

5. data 请求的数据，{ }中可以填入多项数据。如果不填（一般为get请求），则读取对应地址的全部数据，此时可以在console中通过console.log(res)显示数据情况。
6. success 和 error 两个函数 一般需要设置，方便确定请求是否成功，以及请求成功后的提示或是对数据的处理和显示。

2.栗子

        $.ajax({
            url:"ajaxServlet1111" , // 请求路径
            type:"POST" , //请求方式
            //data: "username=jack&age=23",//请求参数
            data:{"username":"jack","age":23},
            success:function (data) {
                alert(data);
            },//响应成功后的回调函数
            error:function () {
                alert("出错啦...")
            },//表示如果请求响应出现错误，会执行的回调函数
        })

三、Vue

1. get方法

//写法一
            axios.get('接口地址', {
                params: {
                    id: 12,//请求参数
                },
            }).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'get',//请求方法
                params: {
                    id: 12,//请求参数
                },
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })

2.post请求

form-data表单提交（图片上传，文件上传）
applicition/json

1. applicition/json请求方式代码如下：

//写法一
            let data={
                id:12
            }
            axios.post('接口地址', {data}).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'post',//请求方法
                data: data,
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })

2. formData请求方式代码如下：

//写法一
            let data = {
                id:12
            }
            let formData = new formData()
            for(let key in data){
                fromData.append(key,data[key])
            }
            axios.post('接口地址', {fromData}).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'post',//请求方法
                data: fromData,
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })