了解ajax请求

首先，什么是ajax呢？

        是 js 这个语言里面的一个方法(能力)以及是 js 和 php 交互的手段。

  ajax： a: async

              j: javascript

              a: and

              x: xml

一、发送 ajax 请求的步骤

        1. 创建一个 ajax 对象（注意兼容问题）

         new XMLHttpRequest => 标准浏览器使用

         new ActiveXObject => IE 低版本使用

          实例化一个构造函数

        2. 配置以下本次请求的信息

          ajax对象.open(请求方式, 请求地址, 是否异步)

          请求方式：GET 还是 POST 还是 PUT 还是 DELETE ?

          是否异步可以不写, 默认是异步的

        3. 把这个请求发送出去

          ajax对象.send() 方法

        4. 接受后端的响应（注意兼容问题）

          ajax对象.onload = function () {}  =>标准浏览器

          ajax对象.onreadystatechange() {}  =>IE 低版本

注意点：如果请求方式为同步的话，需要将代码的三四调换一下顺序，因为现在这个请求没有执行完毕之前, 不会向后执行代码，本次请求结束了, 就是这个代码执行完毕了本次请求结束之前, 都不会执行后面的代码，也就是还没有绑定事件，等到请求结束了, 也没有事件去触发，也就是等到结束以后, 才绑定了一个结束的事件，再也不会出现请求结束的行为了。所以尽量不使用同步的情况。

二、ajax 的状态码

1.怎么获取 ajax 状态码

 ajax对象.readyState

2.有哪些状态码？

        0: 表示你创建一个 ajax 对象成功了

        1: 表示配置请求信息成功了(也就是执行完 open)

        2: 表示响应体已经回到了浏览器, 但是还不能使用(因为此时还是一个响应报文)

        3: 浏览器正在解析响应报文(把响应报文里面的响应体分离出来)

        4: 浏览器分离响应体成功, 已经可以正常使用了(本次请求结束了)

3.ajax常见的status状态码

200-299都表示服务器成功处理了请求的状态代码，说明网页可以正常访问

200（成功） 服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。

201（已创建）  请求成功且服务器已创建了新的资源。

202（已接受）  服务器已接受了请求，但尚未对其进行处理。

203（非授权信息）  服务器已成功处理了请求，但返回了可能来自另一来源的信息。

300-399表示的意思是：要完成请求，您需要进一步进行操作。通常，这些状态代码是永远重定向的。

300（多种选择） 服务器根据请求可执行多种操作。服务器可根据请求者来选择一项操作，或提供操作列表供其选择。

301（永久移动）  请求的网页已被永久移动到新位置。服务器返回此响应时，会自动将请求者转到新位置。您应使用此代码通知搜索引擎蜘蛛网页或网站已被永久移动到新位置。

303（查看其他位置） 当请求者应对不同的位置进行单独的 GET 请求以检索响应时，服务器会返回此代码。对于除 HEAD 请求之外的所有请求，服务器会自动转到其他位置。

305（使用代理） 请求者只能使用代理访问请求的网页。如果服务器返回此响应，那么，服务器还会指明请求者应当使用的代理。

400-499表示请求可能出错，会妨碍服务器的处理。

400（错误请求） 服务器不理解请求的语法。

403（禁止） 服务器拒绝请求。

404（未找到） 服务器找不到请求的网页。

406（不接受） 无法使用请求的内容特性响应请求的网页。

408（请求超时） 服务器等候请求时发生超时。

409（冲突） 服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。服务器在响应与前一个请求相冲突的 PUT 请求时可能会返回此代码，以及两个请求的差异列表。

500-599表示的意思是：服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。

500（服务器内部错误） 服务器遇到错误，无法完成请求。

501（尚未实施） 服务器不具备完成请求的功能。例如，当服务器无法识别请求方法时，服务器可能会返回此代码。

502（错误网关） 服务器作为网关或代理，从上游服务器收到了无效的响应。

503（服务不可用） 目前无法使用服务器（由于超载或进行停机维护）。通常，这只是一种暂时的状态。

三、带有参数的GET或POST方式的ajax请求

1   带有参数的get方式

 1. 先是正常步骤书写

 2. 携带参数

       在地址后面直接拼接参数

       参数的格式

           一个参数是 key=value 的形式

           多个参数是用 (&) 分隔

          多个参数的时候 key1=value1&key2=value2&key3=value3

      在地址和参数之间写一个 问号(?) 来分隔是参数还是后缀

例如下图就是简单的get方式带参数请求

2  带有参数的post方式

    1. 完整流程

    2. 携带参数

        xhr.send() 这个方法的 () 里面就是书写请求体的位置

        我们要把需要携带的参数写在 send 后面的小括号里面

        参数格式：

           一个参数就是 key=value

           多个参数中间用 & 分隔

           多个参数书写的时候就是 key1=value1&key2=value2

         （以上和get方式携带参数的格式一样）

          注意：post请求携带参数不需要写问号

例如下图就是简单的post方式带参数请求

四、简单的get以及post请求方式的ajax封装

get方式的ajax请求

post方式的ajax请求

简单的聊了ajax的使用，ajax也能很方便的帮助我们写登录注册的案例，若有不足，还请大家多多指教！