Ajax的理解

一.网页中如何请求数据

数据，也是服务器对外提供的一种资源。只要是资源，必然要通过请求–处理–响应的方式进行获取。

如果要在网页中请求服务器上的数据资源，则需要用到XMLHttpRequest对象。
XMLHttpRequest(简称xhr）是浏览器提供的js成员，通过它，可以请求服务器上的数据资源。

最简单的用法 var xhrObi = new XMLHttpRequest(）

二.资源的请求方式

客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为get和 post请求。
* get请求通常用于获取服务端资源（向服务器要资源)

例如:根据URL地址，从服务器获取HTML文件、css文件、js文件、图片文件、数据资源等

* post请求通常用于向服务器提交数据(往服务器发送资源)

例如:登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作

三.Ajax

1.什么是ajax

Ajax的全称是Asynchronous Javascript And XML(异步JavaScript和XML)。
通俗的理解:在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就是Ajax。
Ajax能让我们轻松实现网页与服务器之间的数据交互

2.ajax典型应用场景

用户名检测:注册用户时，通过ajax的形式，动态检测用户名是否被占用

四.xhr

XMLHttpRequest(简称xhr)是浏览器提供的Javascript对象，通过它，可以请求服务器上的数据资源。之前所学的的Ajax，就是基于xhr对象封装出来的。

1.xhr1的旧版特点

①只支持文本数据的传输，无法用来读取和上传文件

②传送和接收数据时，没有进度信息，只能提示有没有完成

2.xhr2新特性

① 可以设置HTTP请求的时限

有时，Ajax操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久。新版本的XMLHttpRequest对象，增加了timeout属性，可以设置HTTP请求的时限:

xhr.timeout=3000

上面的语句，将最长等待时间设为3000毫秒。过了这个时限，就自动停止HTTP请求。与之配套的还有一个timeout事件，用来指定回调函数:

xhr.ontimeout=function(event) {

 alert('请求超时！')
 
}

例子：

<script>

var xhr = new XMLHttpRequest()

//设置超时时间

xhr.timeout=3000

//设置超时以后的处理函数

xhr.ontimeout=function(){

  console.log('请求超时了！')
}

xhr.open('请求方式','请求地址')

xhr.send()

xhr.onreadystatechange = function () {

if(xhr.readyState === 4&&xhr.status === 200) {

  console.log(xhr.responseText)
  }
}
</script>

②可以使用FormData对象管理表单数据

Ajax操作往往用来提交表单数据。为了方便表单处理，HTML5新增了一个FormData对象，可以模拟表单操作;

//1.新建FormDate对象

let fd = new FormDate ()

//2.为FormDate添加表单项

fd.append('uname',''zs)

fd.append('upwd','123456')

//3.创建XHR对象

let xhr = new XMLHttpRequest()

//4.指定请求类型与URL地址

xhr.open('请求类型','请求地址')

//5.直接提交FormDate对象，这与提交网页表单的效果完全不一样

xhr.send(fd)

例子：

FormData对象也可以用来获取网页表单的值，示例代码如下:

③可以上传文件

新版XMLHttpRequest 对象，不仅可以发送文本信息，还可以上传文件。

1.定义UI结构

//1.文件选择框

<input type="file" id="file1" />

//2.上传按钮

<button id="btnUpload">上传文件</button>

//3.显示上传到服务器的图片

<img src="" alt="" id="img" width="800" />

2.验证是否选择了文件

//1.获取上传文件的按钮

let btnUpload = doucument.querySelector('#btnUpload')

//2.为按钮添加click事件监听

btnUpload.addEventListener('click',function () {

  //3.获取到选择的文件列表
 let files = document.querySelector('#file1').files

if (files.length<=0) {
  return alert('请选择要上传的文件')

}
//后续业务逻辑

}）

3.向FormDate中追加文件

//1.创建FormData 对象

let fd = new FormData ()

//2.向FormData中追加文件

fd.append('avatar',files[0])

4.使用xhr发起上传文件的请求

//1.创建xhr对象

let xhr = new XMLHttpRequest ()

//2.调用open函数， 指定请求类型与Url地址，请求类型必须为post

xhr.open('post','请求地址')

//3.发起请求
xhr.send(fd)

5.监听onreadystatechange事件

④可以获得数据传输的进度信息

新版本的XMLHttpRequest对象中，可以通过监听xhr.upload.onprogress事件，来获取到文件的上传进度。语法格式如下: