ajax和axios的区别、Iframe的作用、css3新特性有哪些、事件绑定和普通事件有什么区别、展开运算符的用法

41 阅读1分钟

1.ajax和axios的区别

1.区别:

1.axios是一个基于Promise的HTTP库,而ajax是对原生XHR的封装;

2.ajax技术实现了局部数据的刷新,而axios实现了对ajax的封装。

2. 目前所学写法上的区别:

Ajax

概念: ajax (全称: Asynchronous JavaScript And XML) 是异步的JavaScript和xml等多种技术的组合,用于快速创建动态页面,实现无刷新更新数据。它的核心对象是XMLHttpRequest(XHR),对原生的XHR进行封装。

通俗理解:在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式,就是Ajax

原生写法:

1.使用xhr发起get请求

步骤:

  1. 创建xhr对象
  2. 调用xhr.open()函数
  3. 调用xhr.send()函数
  4. 监听xhr.onreadystatechage事件
 // 1.创建 XHR 对象
 const xhr = new XMLHttpRequest()
 // 2.调用open函数
 xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks')
 // 3.调用send函数
 xhr.send()
 // 4.监听 onreadystatechange
 xhr.onreadystatechange = function(){
     if(xhr.readyState === 4 && xhr.status === 200){
         //获取服务器端响应给我们的数据
           console.log(xhr.responseText)
    }
 }
2.使用xhr发起post请求
// 1.创建 xhr 对象
const xhr = new XMLHttpRequest()

// 2.调用xhr.open()
xhr.open('post', 'http://www.liulongbin.top:3006/api/addbook')

// !3.设置Content-Type属性(固定写法)
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

// 4.调用send方法
xhr.send('bookname=猪猪侠&author=66号技师&publisher=楼下舞指仙境')

// 5.监听事件
xhr.onreadystatechange = function () {
// xhr对象的status如果为200,那就代表着当前请求接口成功; readyState如果为4,代表着当前请求的阶段是完成通信
if (xhr.readyState === 4 & xhr.status === 200) {
        console.log(xhr.responseText)
    }
}