AJAX的初体验

今天做了AJAX的题，也看AJAX的相关知识，我在这里在补充拓展一下：

AJAX的基础操作：

let xhr= new XMLHttpRequest(); //创造实例；IE低版本浏览器中用new ActiveXObject();

xhr.open('GET', '路径', true, userName,userPass); //配置发送请求信息： false代表同步，true代码异步，默认true；

   // user-name:传递给服务器的用户名

   // user-pass:传递给服务器的密码；

xhr.onreadstatechange=function(){

    //监听AJAX状态，当readstate发生改变的时候触发

    console.log(xhr.readyState);

    if(xhr.readyState==4 && /^(2|3)\d{2}$/.test(xhr.status)){

        //请求完成并且成功

        //获取响应主体信息：一般用responseText，因为服务器返回的信息一般都是JSON格式的字符串，如果返回的是XML格式，用responseXML

        //xhr.responseXML,xhr.response,xhr.responseType

        let result=xhr.responseText;

        xhr.getResponseHeader('Data'); //获取响应头中对应的属性名的属性值

        xhr.getAllResponseHeaders(); //获取所有的响应头

    }

}

xhr.timeout=2000; //最长的请求时间，设置AJAX等待时间，超过这个时间算AJAX延迟

xhr.ontimeout=function(){

    //这个事件会在超时的时候触发

    xhr.abort();//手动中断AJAX请求

}

xhr.setRequestHeader('Zhong-Guo',444);//设置请求头

xhr.send(请求主体中的信息);

send之后先去三握，建立通道，然后数据交互2 ，3数据交互完成，四次挥手，断开通道 4

当readystate有五个值：

0  unsent 创造出实例的时候 readystate 就是0

1  opend 执行完open 函数之后 readystate 会由0变为1

2  header-received 响应头信息已经返回客户端（发送请求后，服务器会依次返回响应头和响应主体的信息）

3  loading 正在加载响应内容

4  done 响应主体信息已经返回给客户端

xhr.status ：http状态码

ajax的请求方式：

    get形式的请求：（简单请求）get head delete，把请求的参数放到了请求地址后边

    post形式的请求：post put option 把请求的参数放到请求体中

delete/put 往服务器删除或者放东西，一般都是处理文件主体的信息

head请求：服务器只会把头信息返回（响应主体信息不进行处理），这样在AJAX状态为2的时候就可以获取到响应头信息了，没必要等到4

options请求（试探请求）：在cros跨域请求中，正常请求发送之前，浏览器会先发送一个options，试探能否和非同源服务器建立连接，如果可以建立连接，在把我们正常的请求发送过去

客户端基于get请求传递给服务器信息，一般基于URL问号传参，post一般基于请求主体

get请求容易产生缓存，需要在参数后边加随机数或者时间戳

post没有缓存问题

post相对来说比get安全点

获取响应主体的信息： xhr.response / xhr.responseText / xhr.responseXML

设置超时时间：xhr.timeout=1000; 请求+响应超出这个时间，请求会自动中断

AJAX里的常用七个方法：

xhr.withCredentials ：在CORS跨域请求中，允许客户端携带资源凭证（cookie）传递给服务器

xhr.abort()：中断ajax请求

xhr.getAllResponseHeaders()/xhr.getResponseHeader([key])：

xhr.overrideMimeType():获取想要类型的返回数据，在send前调用

xhr.open()

xhr.send()：

xhr.setRequestHeader()：设置响应头

HTTP请求方式：

get系列请求：一般用于从服务获取信息，给的少，拿得多

    get:

    delete: 一般应用于告诉服务器，从服务器上删除点东西

    head：只想要获取响应头内容，告诉服务器响应主体内容不要

    options：试探性请求，发个请求给服务器，看看服务器能不能接收到，能不能返回

post系列请求：一般用于给服务器推送信息，给的多，拿的少

    post

    put 和 delete对应，一般是想让服务器把我传递的信息存储到服务器上（一般应用于文件和大型数据）

    采用对应的请求方式会使请求变的更加明确（语义化），不遵循这些方式也可以；

get系列和post系列的本质区别：

get系列传递给服务器信息的方式一般采用问号传参

post系列传递给服务器信息的方式一般采用：设置请求主体

1、get传递给服务器的内容比post少，因为url有最长大小限制（IE浏览器一般限制2KB，谷歌限制4~8KB）

请求主体中内容理论上没有大小限制，但是真实项目中，为了保证传输速度，会自己限制一些

2、get会产生缓存（缓存自己不可控制）：因为请求的地址（尤其是问号传递的信息一样），浏览器有时候会认为你要和上次请求的数据一样，拿得上一次信息；这种缓存我们不期望有，期望的缓存是自己可控制的：解决办法：

xhr.open('get','/list?name=zhufeng&_='+Math.random());

xhr.open('get','/list?name=zhufeng&_='+);

3、get相比较post来说不安全：get是基于问号传参传递给服务器内容，url劫持，别人可以获取或者篡改传递的信息；post基于请求主体传递信息，不容易劫持；

客户端怎么把信息传递给服务器？

    问号传参  xhr.open('get','/getdata?xxx=xxx&xxx=xxx')

    设置请求头 xhr.setRequestHeader([key],[value])

    设置请求主体 xhr.send(请求主体信息)

服务器怎么把信息返回给客户端？

    通过响应头

    通过响应主体（大部分信息都是基于响应主体返回）

服务器渲染的特点：

1、我们看到的内容都是在服务器端渲染完的（jsp，php，asp.net，node...），客户端只是把所有渲染好的内容呈现在页面中而已；然而我们第一次渲染完，页面中的某部分数据需要更新了，我们需要让服务器整体重新的渲染一次，把最新的页面（包含最新的数据）返回客户端，客户端只能整体刷新页面展示最新的内容=>'全局刷新'，性能和体验都非常的差，而且服务器压力也很大

2、如果服务器性能比较高，页面呈现出来的速度会快一些，因为只要从服务器拿到内容，一切信息都已经准备好了

3、由于内容在服务器端就已经渲染好了，所以页面渲染完成后，在页面源代码中都可以看到内容，有利于seo搜素引擎优化

客户端渲染数据内容：

1、可以实现页面中内容局部刷新，而且渲染的操作交给客户端来做=>体验好，减轻了服务器的压力

2、而且开始可以只把部分区域的数据获取到，滚动到某个区域后，在请求对应的数据也可以，实现数据的分批异步加载，提高性能体验

3、由客户端渲染的内容没有出现在页面的源代码中，不利于seo的优化

当代项目开发的整个架构模型：

1、出服务器渲染（需要做seo优化，或者技术氛围问题）

2、混编模式：部分内容是服务器渲染，部分内容是客户端渲染=>常见的+骨架屏（首屏内容为服务器渲染：目的是让页面一打开，就能把首屏内容加载出来，前提服务器得给力，其余内容都是客户端基于AJAX逐一获取的，对于表单提交等数据交互操作也是客户端为主）

3、完全客户端和服务器端分离开发=>目前最常见的，vue+react

4、把vue和react在服务器端基于node来渲染=>服务器端渲染