js访问服务器状态码,ajax，http网络状态码，get和post

ajax

1)ajax：异步的js和xml

2)作用：通过ajax技术，客户端可以向服务器发送请求，把需要展示给用户的数据获取到，也可以把客户端用户填写的一些信息发送给服务器端进行处理；

ajax实现是前后端数据请求交互；

3)ajax中的异步js的概念

ajax中的异步和之前其他的异步表达的不同，ajax的异步表达的是“局部刷新”；

同步：代码从上往下执行；异步：比如定时器会放到等待池里面，等同步的数据执行完成后，再去等待池里面执行；

全局刷新：客户端看到的页面都是有服务器端进行渲染的，服务器把呈现的结构样式，以及动态的数据都渲染完成，客户端浏览器拿到数据最终的代码呈现给用户即可；

如果当前的页面中部分结构和数据需要改变，需要有服务器端重新渲染，把最新的渲染结果返回给客户端，客户端通过整体刷新来展示效果；

局部刷新：不是服务器端来渲染页面，客户端通过ajax等技术向服务器发送请求，服务器只需要把数据返回给客户端，页面的渲染是有客户端完成的；

如果有一个区域的数据需要发生改变，只需要在重新发送ajax请求，获取最新的数据，有客户端重新的把当前区域的内容渲染即可，页面不需要重新刷新 加载；

XML

html：超文本标记语言；

xhtml：更加严谨的html；是html的一代版本；

dhtml：页面中部分数据是动态跟新的；

xml：可扩展的标记语言，html的标签是基于w3c规定的，而xml中的标签大部分都是自己随意设置的；

数据传输常用的格式：

json：一般都是json的格式；

xml：

文件流(buffer，二进制，base64编码)

基础语法：

let xhr = new XMLHttpRequest；(http：传入协议，request：请求)

//打开连接，配置请求的参数；

xhr.open(‘method’，url，[sync/async]，user-name，user-password);

//监听状态请求

xhr.onreadystatechange = function(){

xhr.readyState:ajax状态码；0-4

xhr.status: http网络状态码；

xhr.responseText:获取服务器端返回的字符串数据(json字符串)；

// 发送ajax请求；传递的内容可以是null也可以是其他信息’

xhr.send(null)

}

xhr.open(‘method’，url，[sync/async]，user-name，user-password);

async/sync

第三个参数不写默认是true异步，写false是同步；

最后两个参数，我们一般不设置，只有当服务器丛安全限制的时候，限定某些用户才可以访问服务器，此时我们需要设置；

第一个参数：请求方式；

get：get delete，head

post：post，put

第二个参数：请求的url地址；

通过此地址可以向服务器发送请求，获取不用的数据，地址其实一个标识作用，告诉服务器端我们想要获取那些数据，真实项目中，后台开发工程师提供一个api的接口文档，在文档中声明了获取不同数据的不同接口地址；

readystatechange：

当ajax状态发生变化改变的会触发这个事件；

xhr.reaystate: ajax 状态码；0-4

0：unset：未发送，创建一个ajax实例；默认ajax状态是0

1：open一打开，执行xhr.open，状态变为1；

2： headrs_received:客户端已经获取到服务器返回的 (响应头部) 信息；

3：loading服务器返回的额 (响应主体) 内容正在传送中；

4：done客户端应景接收到服务器返回的响应主体内容(代表当前请求已经完成)

http网络状态码：

> 200请求成功；

> 301：永久转移(永久重定向)

访问老地址(老域名)永久指向新地址(新域名)这就是301永久转移

> 302：临时转移(临时重定向)

服务器临时转移地址，缓解服务器压力；

> 304：读取的缓存数据；

我们不经常改变的文件比如文件中css，js我们存在缓存中，页面再次刷新请求服务多次，我们不怎么改变的文件走缓存

> 307：临时重定向

> 400：请求参数错误；

> 401：请求权限不够

> 404：地址不存在；

> 500：未知服务器错误

> 503：服务器超负荷请求；比如一个1000人可以访问，多余一千人访问就会出现503；

> 504：服务器请求响应超时

服务端在交互的时候，肯定会把一些数据返回给客户端，而返回给服务端的数据分为两种：

通过响应头的响应头部，响应主体

获取响应头信息两个方法：

xhr.getAllResponseHeaders xhr.getResponseHeaders;

请求头和请求主体；客户端向服务端，有时候也需要把一些东西传递给服务端，传递方法是：

通过设置请求头部把信息传递给服务器端；xhr.setRequestHeader:

通过请求主体把内容传递给服务器端；

通过url请求地址后面带问号传递参数的方式吧内容传递给服务器；

timeout：

xhr.timeout ：设置请求的超时时间，当前请求如果超过了这个时间还没有请求完成；属于超时，请求终端，也会触发xhr.timeout这个事件；

ajax的请求方式：

客户端向服务器端发送请求的时候，有很多的请求方式：

1：get系列：get，delete，head

2：post系列：post，put

get系列：一般都是从服务器端获取数据信息，展示在页面中，给的少拿的多；

post系列：一般都是把客户端的数据推送给服务器端，比如用户注册，客户端把用户的信息发送给服务器；给的多，拿的少；

get和post都可以给服务器发送数据 和得到数据，只是get是给服务器的少，拿到的多；

post发送给服务器的多，拿到的少；

1).get和post主体区别：

get方式传递给服务器信息，采用是url问号参数的方式完成的；

xhr.open('get','/index?name=ly&age=3');

post方式：

传递给服务器的数据信息采用的是设置请求体传递；

xhr.send('name=ly&age=3')此方法中存放的就是请求主体的内容；

2)get请求传递给服务器的数据内容有长度的限制，是通过url方式传递，参数过长，到时url地址过长，浏览器对url地址有一个长度限制，谷歌一般限制8kb，火狐7kb，ie 2kb；长度限制超过，浏览器会自动截取；

1kb = 1024b；

post是通过请求主体传递的，请求主体是没有大小限制的，但是项目中，保证传输的速度，我们会控制传输的内容大小；

3)get请求会参数缓存；不可控制的缓存；

因为get是问号传递参数给服务器，第一次通过地址传递某些参数，获取到某些参数，第二次传递给服务器参数不变，获取服务器的参数和上一次一样，而不是服务器最新的数据；

’/index?name=ly&age=3‘+Math.random():

在项目中的url后加一个随机数，这样我们请求的地址就不一样，可以拿到最新的数据；

post请求没有缓存；

4)get请求方式不安全，因为get请求是在url地址上，用户可以看到我们url地址上 的信息；

post是请求主体传递参数；比较安全一些；

一般设置的密码安全信息的我们要用post请求；

delete：删除，从服务器上删除某些资源；

put：存放，把一些资源存放到服务器上；

head：只从服务器上获取头部信息，无法获取响应主体信息；