HTTP请求

Posted 2020-09-19 Chris

http请求

• 一个完整的http请求过程，通常有下面七步骤

1、  建立tcp连接

2、  web浏览器向web服务器发送请求命令

3、  web浏览器发送请求头信息

4、  web服务器应答

5、  web服务器发送应答头信息

6、  web服务器像浏览器发送数据

7、  web服务器关闭tcp连接

• 一个http请求一般由四部分组成

1、  http请求的方法或动作，比如get或者是post请求

2、  正在请求的URL，总得知道请求的地址是什么

3、  请求头，包含一些客户端环境信息，身份验证信息等

4、  请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等等

 

• get与post

get：

1、  一般用于信息获取，查询

2、  使用URL传递参数

3、  对发送信息的数量也有限制，一般在2000个字符（4k左右）

4、  发送的信息任何人都是可见的（不安全）

5、  get请求是幂等，执行一次和一万次效果一样，影响相同

post：

1、  一般用于修改服务器上的资源。一般用作于发送表单数据，新建，修改，删除等等

2、  对所发送信息的数量无限制

3、  数据会嵌入到http的请求体中，安全

• 一个http响应一般由三部分组成

1、  一个数字和文字组成的状态码，用来显示请求是成功还是失败

a)      http状态码由三位数字构成，其中首位数字定义了状态码的类型：

b)      1xx：信息类，表示收到web浏览器请求，正在进一步的处理中

c)      2xx：成功，表示用户请求被正确接收，理解和处理例如：200 ok

d)      3xx：重定向，表示请求没有成功，客户必须采取进一步的动作

e)      4xx：客户端错误，表示客户端提交的请求有错误，例如：404 not found，意味着请求所引用的文档不存在

f)       5xx：服务器错误，表示服务器不能完成对请求的处理，例如：500

2、  响应头，响应头也和请求头一样包含许多有用的信息，例如服务器类型，日期时间，内容类型和长度等

3、  响应体，也就是响应正文

 

• XMLHttpRequest发送请求

1、   open（method【规定了发送的方式是get还是post】，url【必需，请求地址】，async【请求同步/异步（默认值true）】）

2、   send（string【get可以不填写或许null，post就一定要填写参数，否则无意义】）

这些方法可以将请求发送到服务器

 

• XMLHttpRequest取得响应

1、   responseText：获得字符串形式的响应数据

2、   responseXML：获得XML形式的响应数据

3、   status和statusText：以数字和文本形式返回http状态码

4、   getAllResponseHeader（）：获取所有的响应报头

5、   getResponseHeader（）：查询响应中的某个字段的值

 

readyState属性

• 0：请求未初始化，open还没有调用
• 1：服务器连接已建立，open已经调用了
• 2：请求已接受，也就是接收到头信息了
• 3：请求处理中，也就是接收到响应主体了
• 4：请求已完成，且响应已就绪，也就是响应完成了

onreadystatechange（）：监听通讯状态

var xhr = new XMLHttpRequest();

        /*设置请求行*/

        xhr.open(‘get‘, ‘02.XMLHttpRequest.php‘);

        /*设置请求头*/

        xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘);

        /*设置请求主体并发送*/

        xhr.send(null);

        /*=========响应===========*/

        /*什么时候去接受后台的数据*/

        /*通过一些事件或者回调函数去监听*/

        /*通过去监听  通讯的状态*/

        /*通讯状态  就会有多个通讯的状态  请求发送前  请求中 响应中  响应完成 */

        xhr.onreadystatechange = function() {

                if (xhr.status === 200&xhr.readyState===4) {

                    console.log(‘获取响应的主体‘ + xhr.responseText);//做一些事情 xhr.responseText

                } else {

                    alert(‘响应失败‘);

                }
}