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

落日映苍穹つ 2023-09-30 15:22 15阅读 0赞

#### 目录 ####

*  一、原生JS方式
 *  二、JQuery
 *   *  1.Ajax基本结构
     *  2.栗子
 *  三、Vue
 *   *  1. get方法
     *  2.post请求

## 一、原生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可以跨域读取数据，有待进一步学习~

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

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

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

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

1.  data 请求的数据，\{ \}中可以填入多项数据。如果不填（一般为get请求），则读取对应地址的全部数据，此时可以在console中通过console.log(res)显示数据情况。
2.  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 => {
        
                    //执行成功后代码处理
                })

1.  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 => {
        
                    //执行成功后代码处理
                })