AJAX = 异步 JavaScript 和 XML，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

axios

npm安装后引入axios.js

在线引用：

1	<script src="./node_modules/axios/dist/axios.min.js"></script>

基本使用

//axios get请求 获取数据
axios({
        url: 'http://ajax-api.itheima.net/api/area',
        method:'get',
        params:{
            pname: '四川省',
            cname:'成都市'
        }
    }).then(result =>{
    	// 请求成功时处理响应
        console.log(result.data.data);
        document.querySelector('#example').innerHTML = result.data.data.join('<br>')
    }).catch(err => 
    {
    // 请求失败时处理错误
        console.log(err)
    })

//axios post请求 提交数据
axios({
        method: 'post',
        url: 'http://ajax-api.itheima.net/api/login',
        data : {
            "username": "admin",
            "password": "123456"
        }
    }).then(result=>{
        console.log(result);
    }).catch(err=>{
        console.log(err);
    })

url：请求url网址，通常由协议+域名+资源路径组成
method：请求方式，默认为get获取数据（可省略），不区分大小写
- get:获取数据
- post：数据提交
- put：修改所有数据
- delete：删除数据
- patch：修改部分数据
params：url查询参数，语法为(http://xxx.com/xxx/xxx?参数名1=值1&参数名2=值2)。

示例中实际地址为：ajax-api.itheima.net/api/area/?pname=四川省&cname=成都市

注意参数为小写。

浏览器运行效果：

标头报文

请求报文

在浏览器的控制台-网络-标头中可查看浏览器向服务器发送的请求报文：

POST /api/login HTTP/1.1（包含请求方式地址和协议）

Host: ajax-api.itheima. net

Content-Type: application/json（内容格式）

控制台-网络-负载中可查看发送数据

报文发送数据

当出现数据之类错误时，可检查请求报文是否有误，从而判断问题来源

响应报文

在浏览器的控制台-网络-标头中可查看服务器向浏览器发送的响应报文：

响应标头

HTTP/1.1 200 OK (响应行（状态行）：协议，http响应状态码(1xx–信息 2xx–成功 3xx–重定向消息 4xx–客户端错误 5xx–服务端错误)，状态信息)

表单提交

form-serialize插件

form-serialize插件可用于快速收集表单元素的值

npm下载：

1	npm install form-serialize

函数：

1	serialize(form,{hash: true, empty: true})

参数一：form：选择获取数据的表单
- 表单元素通过name属性设置对象的属性名，最好与接口文档的参数名保持一致
参数二：配置对象
- hash：获取数据结构
  - true:JS对象，为一般使用
  - false：查询字符串
- empty：是否获取空值

FormData

FormData() 可用于存储表单元素。

创建一个空的FormData对象

1	var fd = new FormData(); // 当前为空

append()

FormData.append()会添加一个新值到formdata内一个已存在的键中，若不存在则会添加此键。

1 2	formData.append(name, value); formData.append(name, value, filename);

name:数据的表单名称

value：表单的值

传给服务器的文件名

FormData.get(key)可读取数据

通过FormData上传文件

document.querySelector(".upload").addEventListener('change',data=>{
        console.log(data.target.files[0])
        //使用formdata装载文件
        const fd = FormData()
        fd.append('img',data.target.files[0])
        //axios提交到服务器
        axios({
            url:'xxx',
            method:'post',
            data:fd
        }).then(result=>{
            console.log(result)
            //可根据result提取去文件地址等数据并加以应用
            const imgURL = result.data.data.url
            document.querySelector('#imgUpload').src = imgURL
        }).catch(err=>{
            console.log(err)
        })
    })

FormData其他实例方法请参照FormData - Web API 接口参考 | MDN (mozilla.org)

XMLHttpRequest

XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。

XMLHttpRequest 是 AJAX 的基础。axios内部采用XMLHttpRequest与服务器交互。在交互数据较少时，单独使用XHR比axios更简洁。

基本使用

数据获取：

//创建xhr对象
const xhr = new XMLHttpRequest()
//配置请求方法和url地址
xhr.open("get", "http://ajax-api.itheima.net/api/province");
//添加监听事件
xhr.addEventListener('loadend',()=>{
    //接收数据为JSON，需要转换
    const data = JSON.parse(xhr.response)
    console.log(data.data)
})
//发起请求
xhr.send()

数据提交:

//创建xhr对象
const xhr = new XMLHttpRequest()
//配置请求方法和url地址
xhr.open("post", "http://ajax-api.itheima.net/api/data");
//添加监听事件
xhr.addEventListener('loadend',()=>{
    console.log(xhr.response)
})
//设置请求头，提示服务器数据类型（此处为JSON字符串）
xhr.setRequestHeader('Content-Type','application/json')
//数据处理
const user = {username:'amy',password:'123456'}
//装换成JSON形式
const userData = JSON.stringify(user)
//发起请求
xhr.send(userData)

发送请求：使用 XMLHttpRequest 的 open() 和 send() 方法。
- open(method,url,async)
  
  async：true（异步）或 false（同步）
- send(string)
查询参数：自行补全在url地址内部，例如https://ajax-api.itheima.net/api/area/?pname=四川省&cname=成都市
数据转换：xhr不会自动转换数据格式，需手动转换

事件

abort/onabort: 当 request 被停止时触发，例如当程序调用 XMLHttpRequest.abort()时。

error/onerror:当 request 遭遇错误时触发。

load/onload:XMLHttpRequest请求成功完成时触发。

loadstart/onloadstart:接收到响应数据时触发。loadend/onloadend:当请求结束时触发，无论请求成功(load)或失败(abort/error)。

progress/onprogress:当请求接收到更多数据时，周期性地触发。

timeout/ontimeout:在预设时间内没有接收到响应时触发。

readyState

XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态。一个 XHR 代理总是处于下列状态中的一个：

UNSENT:XMLHttpRequest 代理已被创建，但尚未调用 open() 方法。
OPENED:open() 方法已经被触发。在这个状态中，可以通过 setRequestHeader()方法来设置请求的头部，可以调用 send()方法来发起请求。
HEADERS_RECEIVED:send() 方法已经被调用，并且响应头已经被接收。
LOADING:响应体部分正在被接收。如果 responseType 属性是“text”或空字符串,responseText 将会在载入的过程中拥有部分响应数据。
DONE:操作请求已完成。数据传输已经彻底完成或失败。

XMLHttpRequest.onreadystatechange

只要 readyState 属性发生变化，就会调用回调函数

xhr.onreadystatechange = function () {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

response

XHR的response属性返回响应的正文。返回的类型为 ArrayBuffer、Blob、JavaScript Object或字符串中的一个。这取决于请求的 responseType属性。

responseText：

**responseText **在一个请求被发送后，从服务器端返回文本。

1	var resultText = XHR.responseText;

responseType：

responseType 是一个枚举字符串值，用于指定响应中包含的数据类型，允许更改。如果将 responseType 的值设置为空字符串，则会使用 text 作为默认值。

1 2	var type = XHR.responseType;//读取 XHR.responseType = type;//修改

responseURL:

只读属性 XMLHttpRequest.responseURL 返回响应的序列化 URL，如果 URL 为空则返回空字符串。如果 URL 有锚点，则位于 URL # 后面的内容会被删除。如果 URL 有重定向，responseURL 的值会是经过多次重定向后的最终 URL。

1	console.log(xhr.responseURL)

responseXML:

只读属性responseXML 返回一个包含请求检索的 HTML 或 XML 的Document，如果请求未成功,则为 null。默认是当作“text / xml”来解析。responseXML对于任何其他类型的数据以及URLs 为 null。

status

只读属性 XMLHttpRequest.status 返回了 XMLHttpRequest 响应中的数字状态码。

在请求完成前，status 的值为 0，如果 XMLHttpRequest 出错，浏览器返回的 status 也为 0。200代表成功。如果服务器响应中没有明确指定 status 码，XMLHttpRequest.status 将会默认为 200。

var xhr = new XMLHttpRequest();
console.log("UNSENT", xhr.status);//status为0

xhr.open("GET", "/server", true);
console.log("OPENED", xhr.status);//status为0

xhr.onprogress = function () {
  console.log("LOADING", xhr.status);//status为200
};

xhr.onload = function () {
  console.log("DONE", xhr.status);//status为200
};

xhr.send();

statusText:

只读属性 XMLHttpRequest.statusText 返回了XMLHttpRequest 请求中由服务器返回的文本信息，这则信息中也包含了响应的数字状态码。

这个属性包含了返回状态对应的文本信息，例如”OK”或是”Not Found”。如果请求的状态readyState的值为”UNSENT”或者”OPENED”，则这个属性的值将会是一个空字符串。如果服务器未明确指定一个状态文本信息，则statusText的值将会被自动赋值为”OK”。

var xhr = new XMLHttpRequest();
console.log("0 UNSENT", xhr.statusText);//为空

xhr.open("GET", "/server", true);
console.log("1 OPENED", xhr.statusText);//为空

xhr.onprogress = function () {
  console.log("3 LOADING", xhr.statusText);//为 OK
};

xhr.onload = function () {
  console.log("4 DONE", xhr.statusText);//为 OK
};
xhr.send();