首页 > 其他分享> > 大前端基础~Ajax常用库及XML2.0新特性

大前端基础~Ajax常用库及XML2.0新特性

2021-03-15 12:04:21 作者：互联网

内容输出：拉钩教育

Ajax常用库

jQuery中有一套专门针对Ajax的封装，功能十分完善。

学习网站：https://www.w3school.com.cn/jquery/index.asp

1、$.ajax( )

参数是配置对象，对象属性如下：

常用选项参数介绍：

参数名	说明
url	请求方法，默认为 `get`
dataType	服务端响应数据类型
contentType	请求体内容类型，默认 `application/x-www-form-urlencoded`
data	需要传递到服务端的数据，如果 GET 则通过 URL 传递，如果 POST 则通过请求体传递
timeout	请求超时时间
beforeSend	请求发起之前触发
success	请求成功之后触发（响应状态码 200）
error	请求失败触发
complete	请求完成触发（不管成功与否）

    //$.ajax() 参数是配置对象
    $.ajax({
        method: "get",
        url: 'http://localhost:3000/posts',
        dataType: 'json',
        beforeSend: function(){
            console.log("before")
        },
        success: function(data){
            console.log(data)
        },
        error:function(){
            console.log("error")
        },
        complete: function(){
            console.log("complete")
        }
    })

2、$.get( )

GET 请求快捷方法

$.get(url, data, callback)

$.get("http://localhost:3000/posts", null, function(data){
    console.log(data);
})

3、$.post( )

POST 请求快捷方法

$.post(url, data, callback)

let body = {
    "id": 5,
    "title": "json1",
    "author": "qiuqiu"
    };
    $.post('http://localhost:3000/posts', body, function(data){
    console.log(data);
})

4、$.ajaxSetup( )

发送多个ajax请求，但是有公共的属性设置，此时可以使用ajaxSetup设置默认配置，配置以后，接下来的ajax请求不需要重复写配置选项，例子：

  $.ajaxSetup({
        method: 'post',
        contentType: "application/x-www-form-urlencoded",
        beforeSend: function(){
            console.log("before")
        },
        complete: function(){
            console.log("complete")
        }
    });
    let body = {
        "id": 6,
        "title": "json1",
        "author": "qiuqiu"
    };
     $.ajax({
        //请求方式是post，在ajaxSetup中已经设置
        url: 'http://localhost:3000/posts',
        data: body,
        success: function(data){
            console.log(data);
        }
     })

Axios

1、初体验

Axios是目前应用最为广泛的AJAX封装库，官网：http://axios-js.com/，易用、简洁且高效的http库

引入：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

体验：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    //get方法
    axios.get("http://localhost:3000/posts?id=1").then(function(response){
        console.log(response);
    // console.log(response.data);我们需要的数据 
    }).catch(function(error){
        console.log(error)
    });
</script>

结果如图所示：

在这里插入图片描述

2、Axios API

可以通过向 axios() 传递相关配置来创建请求
axios(config) config为对象格式的配置选项
axios(url, config) config 可选

示例：

axios({
    url: 'http://localhost:3000/posts?id=1',
    method: 'get'
 }).then(function(response){
    console.log(response.data)
 });

3、常用配置项

配置项	说明
url	用于请求的服务器 URL，必需
method	创建请求时使用的方法，默认get
baseURL	传递相对 URL 前缀，将自动加在 url 前面
headers	即将被发送的自定义请求头
params	即将与请求一起发送的 URL
data	作为请求主体被发送的数据
timeout	指定请求超时的毫秒数(0 表示无超时时间)，单位：ms
responseType	表示服务器响应的数据类型，默认 “json“

3.1 get方法示例

axios({
    baseURL: 'http://localhost:3000',
    url: '/posts',
    method: 'get',
    params: {
    id: 1
    }
}).then(function(response){
    console.log(response.data)
});

3.2 post方法示例

   axios({
        baseURL: 'http://localhost:3000',
        url: '/posts',
        method: 'post',
        headers: {
            "Content-type": 'application/json'
        },
        data: {
            "id": 4,
            "title": "json1",
            "author": "qiuqiu"
        }
    }).then(function(response){
        // axios.html:42 {id: 3, title: "json1", author: "qiuqiu"}
        console.log(response.data)
    });

3.3 全局默认配置

axios.defaults.XX = XX

 axios.defaults.baseURL = 'http://localhost:3000';
    axios({
        url: 'posts',
        method: 'get',
        params: {
            id: 1
        }
    }).then(function(response){
        console.log(response.data)
    });

3.4 拦截器

在请求或响应被 then 或 catch 处理前拦截它们。axios.interceptors.XXX

	axios.interceptors.request.use(function(config){
        config.params = {
            id: 1
        };
        config.baseURL = 'http://localhost:3000';
        return config;
    });

    axios.interceptors.response.use(function(response){
        return response.data; //不需要每次都使用.data,可以进行全局配置
    });

    axios('/posts').then(function(data){
        console.log(data)
    });
    axios('/comments').then(function(data){
        console.log(data)
    });

4、快速请求方法

4.1 get方式

参数可以直接拼接到链接后

axios.get('http://localhost:3000/comments?id=1')
.then(function(response){
	console.log(response.data);
});

也可以以params的方式进行添加参数添加

  axios.get('http://localhost:3000/comments', {
        params:{
            id: 1
        }
    })
    .then(function(response){
        console.log(response.data);
    });

4.2 post方式

    axios.post('http://localhost:3000/posts', {
        "id": 4,
        "title": "json1",
        "author": "qiuqiu"
    })
    .then(function(response){
        // {id: 4, title: "json1", author: "qiuqiu"}
        console.log(response.data);
    });

XmlHttpRequest 2.0新增属性

HTML5 中对 XMLHttpRequest 类型全面升级，更易用，更强大

1、load

状态等于4的时候触发，此时已经获取到数据，只在请求完成时触发

   let xhr = new XMLHttpRequest();
    xhr.open("POST", "http://localhost:3000/posts");
    xhr.setRequestHeader("Content-type", 'application/json');
    let body = {
        "id": 5,
        "title": "json1",
        "author": "qiuqiu"
    };
    xhr.send(JSON.stringify(body));
    // xhr.onreadystatechange = function(){
    //     if(this.readyState == 4){
    //         console.log(this.responseText)
    //     }
    // }
    xhr.onload = function(){
        // 4
        console.log(this.readyState);
    }

2、onprogress

只在请求进行中触发

 xhr.onprogress = function(){
     // 3
     console.log(this.readyState);
 }

3、response和responseType

以对象的形式表述响应体，其类型取决于 responseType 的值。可以尝试设置 responseType 的值，以便通过特定的类型请求数据。

responseType 要在调用 open() 初始化请求之后，在调用 send() 发送请求到服务器之前设置方可生效。

let xhr = new XMLHttpRequest();
    xhr.open("GET", "http://localhost:3000/posts");
    xhr.responseType = 'json';
    xhr.send(null)
    xhr.onload = function(){
        console.log(this.response);
};

参考学习链接：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/responseType

标签：function,axios,console,log,XML2.0,库及,Ajax,data,response
来源： https://blog.csdn.net/qiuqiu1628480502/article/details/114825600