HTTP协议/AJAX异步请求-01
Posted 懂设计的程序媛
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTTP协议/AJAX异步请求-01相关的知识,希望对你有一定的参考价值。
一、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(){} //响应完成的回调
})
以上是关于HTTP协议/AJAX异步请求-01的主要内容,如果未能解决你的问题,请参考以下文章