发送Ajax的几种方式

一、什么是Ajax

       Ajax，英文全称为 Asynchronous JavaScript + XML ，翻译过来就是异步JavaScript和XM

        通过Ajax可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。

        AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

       

二、XML

1. XML 可扩展标记语言。

2. XML 被设计用来传输和存储数据。

3. XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，

全都是自定义标签，用来表示一些数据。

4.现在已经被JSON取代。

 

三、AJAX 的优缺点

1 AJAX 的优点

        1) 可以无需刷新页面而与服务器端进行通信。

        2) 允许你根据用户事件来更新部分页面内容。

2 AJAX 的缺点

        1) 没有浏览历史，不能回退

        2) 存在跨域问题

        3) SEO 不友好

四、发送Ajax的几种方式

1.xhr（XMLHttpRequest）

        window对象上有XMLHttpRequest()方法

         // 1.创建XHR对象实例
        const XHR = new XMLHttpRequest();
        // 2.设置请求方式，请求地址
        XHR.open(method,url);
        // 3.发送请求,get 请求不传 body 参数，只有 post 请求使用
        XHR.send(body);
        // 4.接收服务器响应
        XHR.onload = function () {
            const res = JSON.parse(XHR.responseText);//解析为字符串
            console.log(res);
        }

2.jQuery

        是对xhr的封装

//get 请求 
$.get(url, [data], [callback], [type])
// post 请求 
$.post(url, [data], [callback], [type])

3.axios

        是对xhr的封装，使用的最多。

//发送get请求
axios.get(url,{params}})
  .then(res=>console.log(res))
  .catch(err=>console.log(err));
//发送post请求
axios.post('url,{data})
  .then(res=>console.log(res))
  .catch(err=>console.log(err));

4.fetch

        window对象上有fetch()方法

fetch(url, {method})
    .then(function(res) {
        console.log(res)
    }).catch(function(err) {
        console.log(err)
});

fetch的优点：解决回调地狱；使用起简洁

fetch的缺点：API 偏底层，需要封装；默认不带Cookie，需要手动添加；浏览器支持情况不是很友好