Ajax(三)

XMLHttpRequest基本使用

1. 简称xhr，是浏览器提供的js对象，用来请求服务器上的数据资源，只不过直接用这个对象发起Ajax请求比较麻烦，所以jQuery封装的那几个Ajax函数就是基于xhr对象封装的，方便使用。

2. 使用xhr发起GET请求

创建xhr对象、调用xhr.open()函数、调用xhr.send()、监听xhr.onreadystatechange事件

// 1.创建xhr对象
var xhr = new XMLHttpRequest()
// 2.调用open函数，指定请求方式和url地址，有参数就拼接带上(叫查询字符串，键值对形式并用&分隔)
xhr.open('GET','地址')
// 3.调用send函数，发起Ajax请求
xhr.send()
// 4.监听onreadystatechange事件
xhr.onreadystatechange=function(){
    // 监听xhr对象的请求状态readyState、与服务器响应的状态status
    if(xhr.readyState===4 && xhr.status===200){
        //成功了打印服务器响应回来的数据
        console.log(xhr.responseText)
    }
}

3. 了解什么是URL编码和解码（浏览器自动执行，程序员无需关注）

编码：将非英文用英文去表示，因为url里只允许出现英文字符。

编码函数：encodeURL()、解码函数decodeURL()

4. 使用xhr发起POST请求

创建xhr对象、调用xhr.open()函数、设置Content-Type属性(固定写法)、调用xhr.send()同时指定要发送的数据、监听xhr.onreadystatechange事件

// 1.创建xhr对象
var xhr = new XMLHttpRequest()
// 2.调用open函数，指定请求方式和url地址，有参数就拼接带上(叫查询字符串，键值对形式并用&分隔)
xhr.open('GET','地址')
// 3.设置Content-Type属性(固定写法)
xhr.setRequesterHeader('Content-Type','application/x-www-form-urlencoded')
// 3.调用send函数同时将数据以查询字符串方式提交给服务器
xhr.send('name=好好&age=12')
// 4.监听onreadystatechange事件
xhr.onreadystatechange=function(){
    if(xhr.readyState===4 && xhr.status===200){
        console.log(xhr.responseText)
    }
}

数据交换格式

就是服务器和客户端直接数据传输和交换的格式，如XML和JSON(常用)

• XML 标记语言，被设计来传输和存储数据，是数据的载体

格式臃肿，体积大，传输效率低，在js里解析比较麻烦

• HTML 标记语言，被设计来描述网页上内容的，是网页内容的载体

• JSON 就是Js对象和数组的字符表示法，是轻量级的文本数据交换格式，比XML更小更快更易解析

• 作用是在计算机和网络之间存储和传输数据

• 本质是用字符串表示js对象数据或数组数据

• 两种结构 ‘{ }’ ‘ [ ] ’

1.对象结构{key:value,key:value……}，key必须用英文双引号包裹，value的数据类型可以是数字/字符串/布尔值/null/数组/对象。

2.数组结构[……]，数组中类型可以是数字/字符串/布尔值/null/数组/对象。

• JSON语法注意事项

属性名、字符串类型值必须双引号包裹，不允许使用单引号表示字符串，不能写注释，最外层必须是数组或对象格式，不能用undefined或函数作为JSON的值

• JSON和JS对象互转

JSON字符串转换成JS对象：JSON.parse( 字符串 ) 反序列化

JS对象转换成JSON字符串：JSON.stringfy( 对象) 序列化

封装自己的Ajax函数 参考链接

XMLHttpRequest Level2新特性

可以设置HTTP请求时限、可以使用FormData对象管理表单数据、可以上传文件、可以获得数据传输的进度信息

axios

1. 什么是axios？

Axios是只专注于网络数据请求的库，相比于原生xhr对象简单易用，相比于jQuery更加轻量化

2. axios发起GET请求、POST请求

axios.get('url',{参数}).then(成功的回调函数)
axios.post('url',{参数}).then(成功的回调函数)

3. 直接使用axios发起请求

axios({
    methods:'请求类型'，
    url:'请求地址'，
    data：{ post数据}，params:{get参数}
}).then(回调函数)