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协议的具体内容


HTTP协议/AJAX异步请求-01


★ 响应消息头部



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的主要内容,如果未能解决你的问题,请参考以下文章

异步请求(ajax,http) 之 逐渐完善的大全

Ajax练手Demo

ssm+ajax异步请求返回list遍历

同步请求和异步请求的区别(理解ajax用)

如何实现服务端客户端异步通信

使用AJAX技术发送异步请求,HTTP服务端推送