HTTP协议/AJAX异步请求-01

Posted 2021-04-15 懂设计的程序媛

一、HTTP协议

一）概述

HTTP（HyperText Transfer Protocol）超文本传输协议规定 Web 浏览器如何从 Web 服务器获取文档和向 Web 服务器提交表单内容，以及 Web 服务器如何响应这些请求和提交。

IETF（Internet Engineering Task Force）国际互联网工程任务组制定了 HTTP 协议的详细内容，规定了客户端浏览器和 Web 服务器通信所必须的内容格式。

二）HTTP协议详解

例如：在客户端向服务器请求 https://github.com/chenxiaohuan117，在开发者工具的 network 中可以看到 HTTP协议的具体内容

★ 响应消息头部

1、响应消息状态码（Response-statusCode）

1）1xx：提示性消息

100：continue

101：Switching Protocols

2）2xx：成功的响应

200：OK

201：Created

3）3xx：请求需要重定向

301：Moved Permanently

303：see other

304：Not Modified（请求资源服务器端没有修改，请继续使用客户端缓存）

4）4xx：客户端请求错误

400：Bad Request（无效的请求）

402：Payment Required

403：Forbidden

404：Not Found

405：Method Not Allowed

414：Request-URI Too Long

5）5xx：服务器端运行错误

500：Internal Server Error（服务器内部运行错误）

501：Not Implemented（请求方法当前资源没有实现）

503：Service Unavailable（服务暂时不可用）

2、响应消息类型（Content-Type）

1）text/plain

2）text/html

3）text/css

4）application/javascript

5）application/xml

6）application/json

7）image/jpeg

8）image/png

9）audio/mpeg3

....）....   100+ MIME多种

★ 请求消息头部

3、请求消息的方法（Request-Method）

1）GET：客户端想获取服务器端指定资源；

2）POST：客户端想向服务器传递数据 —— 有请求主体；

3）PUT：客户端想向服务器上放置特定的文件 —— 有请求主体；

4）DELETE：客户端想删除服务器上指定的文件；

5）HEAD：客户端想获得指定资源的响应消息头部，而不要该资源本身。

4、请求消息可取值（Content-Type）

1）text/plain：请求主体内容是普通文本，未经编码——有些服务器拒绝接收这样的数据（如php服务器）

2）application/x-www-form-urlencoded：请求主体数据时经过编码后的表单数据(encodeURIComponent())

3）multipart/form-data：请求主体数据包含文件上传

5、浏览器什么情况下发起GET请求？POST请求？

2）POST请求：POST方式提交表单、AJAX-POST请求

 

6、GET和POST请求的区别？

1）GET把请求数据追加在请求URI后面，以?开头，由于浏览器和服务器对URI总长度有限制，一般请求数据不要超过几十个汉字，GET请求没有请求主体，GET的语义表“获取”；

2） POST把请求数据放在请求主体中，不以?开头，请求主体的长度没有限制，可以传输大量数据，尤其是文件上传，必需请求主体，POST的语义表“传递/提交”。

 

7、GET和HEAD请求的区别？

 HEAD请求不会获得响应主体

8、MIME类型（Multipurpose Internet Mail Extension）

多用途互联网邮件扩展，定义了一批固定名称的文件类型，如果靠文件名的后缀无法可靠的分辨的类型靠MIME类型

.html/.htm/.xhtml    ——    text/html

.jpg/.jpeg    ——    image/jpeg

.mp3/.mpeg3    ——    audio/mpeg3

9、如何修改响应消息的头部

1）修改Web服务器的配置文件，如httpd.conf

 问题：会影响到当前服务器上所有的网站，有些情况下没有权限修改

2）在HTML设置meta元标签

<meta http-equiv="Cache-Control" content="no-cache">

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

问题：修改的并非真正的响应头部，可能是无效，仅对HTML文档可用

3）使用服务器端动态语言来修改，如PHP

header('Content-Type: image/jpeg')

header('Cathe-Control:no-cache')

10、通过 HTTP 协议进行网站的访问优化

1）域名解析

尽可能减少域名解析次数，减少跨站外部资源的引用；

2）创建连接

努力减少连接创建次数，使用持久连接避免重复连接

3）发送请求

尽力减少请求次数，资源合并，合理的使用缓存

4）等待响应

提高服务器运行速度，使用服务器端缓存技术，提高数据运算及查询速度；

5）接收响应

缩短响应消息下载时间，尽可能减少响应数据长度，启动压缩，修改 Web 服务器的配置文件

11、HTTP 和 HTTPS

HTTP：80（明文传输）

HTTP协议栈：HTTP 应用层、TCP传输层、IP网络层、网络接口/数据访问层

HTTPS：443（加密传输，保证安全，但访问速度一般慢于 HTTP 协议）

HTTPS协议栈：HTTP应用层、SSL/TLS 安全层、TCP传输层、IP网络层、网络接口/数据访问层

二、AJAX

一）概述

AJAX（Asynchronous Javascript And XML），异步的 JS 和 XML。2001， Google 为了改进搜索的用户体验，提出了GoogleSugguest 效果，正式提出了AJAX 的概念，目的——在无刷新无提交的情况下，实现页面内容的局部更新——数据来自于服务器。

1、常见应用：实时数据获取(如股票走势图)、搜索建议、聊天室、SPA ......

 2、AJAX 应用依赖于浏览器底层提供的核心对象：

XMLHttpRequest：用于向 Web 服务器发起异步请求，并接收响应消息。

3、浏览器发起的HTTP请求的类型

1）同步请求： 超链接跳转、JS跳转、表单提交

2）异步请求： 使用XHR发起

二）XMLHttpRequest 对象的常用成员

1、成员属性

readyState：0，就绪状态，描述 XHR 请求-响应过程进行到哪一步了，可取值为：

0 - UNSENT  表示请求尚未发送

1 - OPENED  表示 XHR 已经打开了到服务器的连接

2 - HEADERS_RECEIVED  表示 XHR 已经接收到了响应消息头部

3 - LOADING  表示 XHR 正在加载响应消息主体

4 - DONE 表示 XHR 已经加载完成响应主体

       

status：0，表示响应消息的状态码， readyState 变为 2 才有值；

statusText：""，表示响应消息的原因短句，readyState变为 2 才有值；

responseText: ""，表示响应消息的主体数据，readyState变为 3 开始有值，变为4时值稳定下来；

responseXML：初始值为 null，readyState 值变为 3 开始才有响应消息主体内容——XMLDOM树对象；

2、成员方法

open(method, url, isAsync)  打开到服务器的连接

send( null/body )  发送请求消息

setRequestHeader(name,value)   设置请求消息头部

getAllResponseHeader()    获取所有的响应消息头部

getResponseHeader(name)   获得摸个响应消息头部

3、成员事件

onreadystatechange：每次 xhr.readyState 属性的值发生改变都会触发该事件，监听此事件可以知道请求-响应进行到哪一步了。

三）使用XHR发起异步请求步骤

1、创建XHR对象 —— 每个XHR只能发一个请求

var xhr = new XMLHttpRequest();

2、绑定监听函数，处理XHR的每一次状态改变

xhr.onreadystatechange = function(){ }

3、打开到Web服务器的连接

xhr.open('GET','9.php', true);

4、发送请求消息主体

xhr.send(null);

注：XHR对象的创建——注意浏览器兼容性

function getxhr(){

    var xhr=null;

    if(window.XMLHttpRequest){

        xhr=new XMLHttpRequest();

    }else{

        xhr=new ActiveXObject('Microsoft.XMLHTTP');

    }

    return xhr;

}

四）使用 XHR 发起异步的 HTTP GET 请求

核心代码：

1、创建 XHR 对象

var xhr=new XMLHttpRequest();

2、监听 XHR 的就绪状态改变事件

xhr.onreadystatechange=function(){

    if(xhr.readyState===4){

        if(xhr.status===200){

            doResponse(xhr);

        }else{

            alert('响应完成但有问题！');

        }

    }

}

3、连接到服务器

xhr.open('GET','x.php?k=v&k=v',true);

4、发起请求消息

xhr.send(null);

五）使用 XHR 发起异步的 HTTP POST 请求

核心代码：

1、创建 XHR 对象

var xhr=new XMLHttpRequest();

2、监听 XHR 的就绪状态改变事件

xhr.onreadystatechange=function(){

    if(xhr.readyState===4){

        if(xhr.status===200){

            doResponse(xhr);

        }else{

            alert('响应完成但有问题！');

        }

    }

}

3、连接到服务器

xhr.open('POST','x.php?k=v&k=v',true);

4、修改请求消息头部

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

5、发起请求消息

xhr.send('k=v&k=v');

六）使用 XHR 接收服务器返回的数据——text

服务器端：

header('Content-Type:text/plain');

echo 'xxx';

客户端：

xhr.responseText;

七）使用 XHR 接收服务器返回的数据——html

服务器端：

header('Content-Type:text/html;charset=UTF-8');

echo '<li>xxx</li>'

客户端：

ul.innerHTML=xhr.responseText

注：AJAX 应用中，服务器端异步返回的 html 不是完整的 HTML 文档，而只是部分标签的片段。

八）使用 XHR 接收服务器返回的数据——script

服务器端：

header('Content-Type:application/javascript');

echo "alert(123);alert(456)";

客户端：

eval(xhr.responseTest);

九）如何处理异步请求获取的批量数据

服务器端：

$list=[ [ ],[ ],[ ],[ ],[ ] ];

1、text/plain：简单，但容易出错；

2、text/html：直接可以使用，但灵活性不足，前后端工作混杂在一起

3、application/xml：W3C 推荐字符串数据格式

4、application/json：W3C 推荐字符串数据格式

注：服务器和客户端只能传输字符串，批量数据必须转换为某种形式的字符串，才能使用 HTTP 协议进行传输。

十）使用 XHR 接收服务器返回的数据——XML

服务器端：

header('Content-Type:application/xml');

echo "<productList><product></product></productList>"

客户端：

var document=xhr.responseXML;

注：解析 XMLDOM 树可以使用核心 DOM 方法

十一）使用 XHR 接收服务器返回的数据——JSON

服务器端：

header('Content-Type:application/json');

$list=[...];

//把 PHP 数组编码为 JSON 字符串

echo json_encode($list);

客户端：

//把 JSON 字符串解析为 JS 数组/对象

JSON.parse(xhr.responseText);

十二）jQuery 中的 AJAX 封装函数

1、load

$('选择器').load(url,[data],[fn]);

$('选择器').load(url);

应用实例：异步加载全站所有页面中相同的页头和页尾

2、$.get

$.get(url,[data],[fn]);

应用实例：注册学生信息时，输入框一失去焦点，立即异步验证该学生姓名是否已经存在

3、$.post

$.post(url,data,[fn]);

4、$.getJSON

$.getJSON(url,[data],[fn]);

应用实例：动态的级联下拉菜单

5、$.getScript

$.getScript(url,[data],[fn]);

$.getScript(url);

6、$.ajax

$.ajax({

    //POST/PUT/DELETE/HEAD,

    type:'GET',

    url:'x.php',

    data:'k=v&k=v',

    beforeSend:function(){}, //请求发送前的回调

    success:function(){}, //成功响应的回调

    error:function(){}, //失败响应的回调

    complete:function(){} //响应完成的回调

})