关于ajax的认识

目录

1.ajax到底是什么？

2.ajax的原理

3.发送一个ajax请求

获取到ajax对象

设置ajax的请求

发送请求

接收服务器的返回值

4.ajax的状态和服务器状态码

获取ajax和服务器的状态

服务器状态码

比较常见的几种状态码如下：

以下为服务器状态码的扩展：

5.ajax发送请求时携带的参数

get请求携带的参数

post请求携带的参数

post的参数需要写在send中

6.ajax的返回值

7.总结

ajax的优点

ajax的缺点

寄语

---

1.ajax到底是什么？

1.ajax全名为 async javascript and XML；

2.ajax是前后端可以进行交互的能力，也就是我们客户端给服务器发送消息的，然后让服务器接受我们的消息来做出反应的工具；

3.可以在不必刷新整个浏览器的情况下与服务器进行异步通讯的技术；

4.ajax不是新的编程语言，而是一种使用现有标准的新方法；

5.ajax是一个默认异步执行机制的功能，ajax分为同步(async=false)和异步(async=true)；

什么是同步(false)？

 同步请求是指当前发出请求后，浏览器什么都不能做，
 必须得等到请求完成返回数据之后，才会执行后续的代码，
 相当于生活中的排队，必须等待前一个人完成自己的事物，后一个人才能接着办。
 也就是说，当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面处于一个假死状态，
 当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态

什么是异步(默认:true)？

默认异步：异步请求就当发出请求的同时，浏览器可以继续做任何事，
Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。
一般默认值为true，异步。异步请求可以完全不影响用户的体验效果，
无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。

2.ajax的原理

1.通过XMLHttpRequest构造函数声明的对象来向服务器发送异步请求，从服务器上来获得数据，然后利用javascript来操作DOM而更新页面，这其中最关键的一步就是从服务器获得请求数据；

2.XMLHttpRequest对象是ajax的核心机制，是在IE5中首先引入的，是一种支持异步请求的技术。简单来说，也就是javascript可以及时向服务器提出请求和处理相应，而补阻塞用户。达到无刷新的效果，提升用户的体验感。

3.发送一个ajax请求

获取到ajax对象

let xhr = new XMLHttpRequest();

 这里是通过构造函数方式来获取到一个ajax对象；

设置ajax的请求

xhr.open('get/post','url','true/false'

下面是我自己的示例 

xhr.open('get', 'http://localhost:8888/test/first')

 xhr.open的参数：

第一个参数写想要发送请求的方式;

第二个参数写想要发送ajax请求的服务器地址；

第三个参数写是需要同步还是异步(默认异步true);

发送请求

xhr.send()

接收服务器的返回值

xhr.onload = function (){
	console.log(xhr.response)
	//此时的xhr.response打印的是发送请求后在调试栏-->Network-->发送的请求-->Reponse 
}

4.ajax的状态和服务器状态码

获取ajax和服务器的状态

xhr.onreadystatechange = function(){
	console.log(xhr.readyState)
    console.log(xhr.status)
}

onreadystatechange：可以监听ajax对象的状态和服务器状态；

readyState：可以获取ajax的状态；

status：可以获取服务器的状态；

ajax的五种状态

0	未初始化（不可见）
1	对象初始化未调用send（正在加载）
2	已经调用send，但服务器状态未知（已加载）
3	已经接收服务器部分数据（交互中）
4	服务器响应完成（完成）

服务器状态码

比较常见的几种状态码如下：

200	请求成功，服务器已返回数据；
303	告知客户端使用另一个URL来获取数据
400	请求格式错误，语法错误/参数有误
404	没有找到页面/没有该资源；
500	内部服务器出错

以下为服务器状态码的扩展：

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

200（成功）  服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。
201（已创建）  请求成功且服务器已创建了新的资源。 
202（已接受）  服务器已接受了请求，但尚未对其进行处理。 
203（非授权信息）  服务器已成功处理了请求，但返回了可能来自另一来源的信息。 
204（无内容）  服务器成功处理了请求，但未返回任何内容。 
205（重置内容） 服务器成功处理了请求，但未返回任何内容。与 204 响应不同，此响应要求请求者重置文档视图（例如清除表单内容以输入新内容）。 
206（部分内容）  服务器成功处理了部分 GET 请求。

300-307:表示的意思是：如果要完成请求，您需要进一步进行操作。通常这些状态代码是永远重定向的（指向其他网页），重定向的讲解请跳转通俗讲解【重定向】及其实践 - 知乎 (zhihu.com)

300（多种选择）  服务器根据请求可执行多种操作。
        服务器可根据请求者来选择一项操作，或提供操作列表供其选择。
    301（永久移动）  请求的网页已被永久移动到新位置。服务器返回此响应时，会自动将请求者转到新位置。
        您应使用此代码通知搜索引擎蜘蛛网页或网站已被永久移动到新位置。 
    302（临时移动） 服务器目前正从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
        会自动将请求者转到不同的位置。
        但由于搜索引擎会继续抓取原有位置并将其编入索引，因此您不应使用此代码来告诉搜索引擎页面或网站已被移动。 
    303（查看其他位置） 当请求者应对不同的位置进行单独的 GET 请求以检索响应时，服务器会返回此代码。
        对于除 HEAD 请求之外的所有请求，服务器会自动转到其他位置。 
    304（未修改） 自从上次请求后，请求的网页未被修改过。服务器返回此响应时，不会返回网页内容。

    如果网页自请求者上次请求后再也没有更改过，您应当将服务器配置为返回此响应。
    由于服务器可以告诉 搜索引擎自从上次抓取后网页没有更改过，因此可节省带宽和开销。 

    305（使用代理） 请求者只能使用代理访问请求的网页。
        如果服务器返回此响应，那么，服务器还会指明请求者应当使用的代理。 
    307（临时重定向）  服务器目前正从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
        会自动将请求者转到不同的位置。但由于搜索引擎会继续抓取原有位置并将其编入索引，因此您不应使用此代码来告诉搜索引擎某个页面或网站已被移动。

 4XX-表示请求可能出错，会妨碍服务器的处理

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

    401（身份验证错误） 此页要求授权。您可能不希望将此网页纳入索引。 

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

    404（未找到） 服务器找不到请求的网页。例如，对于服务器上不存在的网页经常会返回此代码。

    例如：http://www.0631abc.com/20100aaaa，就会进入404错误页面

    405（方法禁用） 禁用请求中指定的方法。

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

    407（需要代理授权） 此状态码与 401 类似，但指定请求者必须授权使用代理。如果服务器返回此响应，还表示请求者应当使用代理。 

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

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

    410（已删除） 请求的资源永久删除后，服务器返回此响应。
        该代码与 404（未找到）代码相似，但在资源以前存在而现在不存在的情况下，有时会用来替代 404 代码。
        如果资源已永久删除，您应当使用 301 指定资源的新位置。 

    411（需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。 

    412（未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。 

    413（请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。 

    414（请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。 

    415（不支持的媒体类型） 请求的格式不受请求页面的支持。 

    416（请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态码。 

    417（未满足期望值） 服务器未满足"期望"请求标头字段的要求。

500-505:服务i其在尝试处理请求时内部发生错误，这些错误可能是服务器本身的错误，而不是请求出错；

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

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

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

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

   504（网关超时）  服务器作为网关或代理，未及时从上游服务器接收请求。 

   505（HTTP 版本不受支持） 服务器不支持请求中所使用的 HTTP 协议版本。

5.ajax发送请求时携带的参数

发送ajax请求是可以携带参数的

参数就是和后台交互时给后台提供的一些信息

但是携带参数get和post两个方式是有区别

get请求携带的参数

发送get请求的参数传递方式

get请求的参数需要追加到url后面例如：

'get，URL?name=壁虎&age=22'
//请求的形式:?k1=v1&k2=v2&k3=v3...

post请求携带的参数

首先post请求方式需要设置参数的编码方式为form表单的编码方式；

post请求的编码方式/请求头需要设置在send之前，编码的设置是为了告诉浏览器

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

post的参数需要写在send中

let param = 'name=Gecko&age=22';
//请求的形式：k1=v1&k2=v2&k3=v3...
//这里是声明了一个变量保存post的参数;
xhr.send(param);//发送请求携带param变量

json的编码方式为:

xhr.setRequestHeader('consten-type','text/json;charset=utf-8')
//json参数的传递形式为{k1:v1,k2:v2}

6.ajax的返回值

xhr.onload = function(){
//onload作用是等待ajax请求完成再执行
    console.log(xhr.response)
    //response为服务器的返回值
}

onload的作用：等待ajax请求完成后执行想要的操作；

onerror的作用：可以接收服务器错误时的信息；

xhr.response接收到的是json字符串，可以使用JSON.parse来转换成对象

使用解构赋值：let{参数1,参数2} = JSON.parse(xhr.response);

ps：字符串转对象：JSON.parse()，对象转json字符串：JSON.stringify()

7.总结

ajax的优点

1.最大的一点是页面无刷新，用户的体验非常好;

2.使用异步方式和服务器进行交互，具有更加迅速的响应能力;

3.可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和宽带的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是‘按需取数据’，可以最大成都的极爱年少冗余请求，和响应对服务器造成的负担;

4.是基于标准化的并被广泛支持的技术，不需要下载插件或者小程序;

ajax的缺点

1.ajax不支持浏览器的back按钮；

2.安全问题，ajax暴露了与服务器交互的细节；

3.对搜索引擎的支持比较弱；

4.破坏了程序的异常机制；

5.不容易调试；

寄语

Gecko:"希望你我永远不做情绪的奴隶"