2021-05-15

Ajax介绍

Ajax是什么?

1、Ajax :Asynchronous JavaScript and XML   (异步的Javascript和Xml)

2、Ajax不是一种新的语言，而是一种使用现有标准的新方法或技术，其作用是用来发送http请求

3、使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。

4、Ajax可以发送到php、xml、json、txt...

为什么要有Ajax呢？

1、 假设用户在注册某个网站，填写好相应信息时并且校验好数据后点击注册，这时会发送htrp请求，向后端请求数据，检查用户名等是否已注册过，如果用引发重载页面的发送http请求，则此时输入框的数据全部步刷新，如果时一次性注册成功还好，就怕查询到后台数据用户名已被注册，用户又要重新开始填写注册数据，如果注册的是相亲类网站，要填的信息将会更多，所有这样体验感是非常差的

2、可以优化浏览器和服务器之间的传输，减少不必要的数据往返，减少带宽占用

3、通过异步模式，提升了用户体验

Ajax代码语法

1、创建ajax对象

2、监听ajax的状态

3、设置请求信息get请求

4、发送ajax请求

ajax的实现大致分为以上四个步骤，以上是不传数据的情况

当需要传输数据的时候，get请求是将请求参数写在url地址的后面，如下图：

post请求方式在不传输数据的时候，将open方法里的get改为post 方法就好，需要传数据的时候要多设置一行代码，携带参数的方式也有些不一样，请求数据是设置在send方法里

ajax的异步

1、 ajax请求是异步代码

2、open方法有第三个参数，参数类型是bool值，是可选项 - 代表是否异步，默认是true异步的，当设置为false时同步时，浏览器会抛出一个警告

设置为false非异步的时候运行结果如下

ajax的封装

1、因为我们每用ajax发送一次http请求都要重新创建ajax对象，监听状态，设置请求，发送。每一次都要重复，麻烦，而且代码冗余，所以我们可以考虑封装ajax方法，封装好了之后直接调用

2、我们知道，在使用ajax时很多的参数都是不能定死的、比如请求方式，请求地址，参数，async是否异步参数等，要传入的参数比较多，所以我们可以用对象的形式传参，函数内部需要对参数的处理判断

我们要判断参数是否传入，传入的类型是否合法，以及请求数据成功时的处理，失败时的处理，

以上就是ajax的封装了

在调用ajax函数时传入对应的函数就好  如下：