ajax之请求对象的创建以及它与服务器之间的4次“握手”(好吧其实只有3次)
2014-08-25 21:48
295 查看
request对象的创建
对于request对象的创建,我们总会第一时间反映到下列语句
不过因为各大浏览器之间的相互斗殴行为,事情是不会这么简单的。
比如非常经典的:IE浏览器没有XMLHttpRequest函数。
但这难不倒我们聪明机智的程序员,我们也有经典的应对措施:
此方法兼容各大浏览器,可收藏至自己的utils.js当中。
request对象与服务器的几次“握手”
其实就本质而言,request对象是先向浏览器请求,然后浏览器再向服务器请求;然后服务器做出反馈,浏览器接收到返回后对request对象做出修改。
首先是checkName.php的代码:
注意sleep(2)这个语句。
然后是JavaScript的代码:
当checkUsername被执行且username不为“bill”或“ted”时,可在控制台看到:
可以看到request.onreadystatechange事件被触发了4次。这4次具体是这样子的:
第一次:request.open("GET",url,true)执行完毕,request.readyState为1,请求已准备好可以发送
第二次:request.readyState为2,表示服务器已接收到请求并正在处理
第三次:request.readyState为3,数据下载到请求对象,但相应数据还没有完全准备好,还不能使用
第四次:request.readyState为4,服务器处理完请求,数据可以使用,可以看到,此时request.responseText已有“okay”这个值
以上就是request和服务器的4次“握手”。
如果我们在进行ajax编程时无法得到返回的数据,可以看看请求对象的readyState属性的值,便可以知道服务器那边的处理是进行到哪一步再出现问题。
对于request对象的创建,我们总会第一时间反映到下列语句
var request=new XMLHttpRequest();
不过因为各大浏览器之间的相互斗殴行为,事情是不会这么简单的。
比如非常经典的:IE浏览器没有XMLHttpRequest函数。
但这难不倒我们聪明机智的程序员,我们也有经典的应对措施:
function createRequest(){ try{ request=new XMLHttpRequest(); }catch(tryMS){ try{ request=new ActiveXObject("Msxml2.XMLHTTP"); }catch(otherMS){ try{ request=new ActiveXObject("Microsoft.XMLHTTP"); }catch(failed){ request=null; } } } return request; } var request=createRequest();
此方法兼容各大浏览器,可收藏至自己的utils.js当中。
request对象与服务器的几次“握手”
其实就本质而言,request对象是先向浏览器请求,然后浏览器再向服务器请求;然后服务器做出反馈,浏览器接收到返回后对request对象做出修改。
首先是checkName.php的代码:
<?php $takenUsernames = array ('bill', 'ted'); sleep(2); if (!in_array( $_REQUEST['username'], $takenUsernames )) { echo 'okay'; } else { echo 'denied'; } ?>
注意sleep(2)这个语句。
然后是JavaScript的代码:
function checkUsername(){ var url="checkName.php?username="+userName; request.onreadystatechange=showUsernameStatus; request.open("GET",url,true); request.send(null); } function showUsernameStatus(){ console.info((new Date)+"request.readyState : "+request.readyState+"request.responseText : "+request.responseText); }
当checkUsername被执行且username不为“bill”或“ted”时,可在控制台看到:
Mon Aug 25 2014 21:37:01 GMT+0800 (中国标准时间)request.readyState : 1 request.responseText : Mon Aug 25 2014 21:37:03 GMT+0800 (中国标准时间)request.readyState : 2 request.responseText : Mon Aug 25 2014 21:37:03 GMT+0800 (中国标准时间)request.readyState : 3 request.responseText : Mon Aug 25 2014 21:37:03 GMT+0800 (中国标准时间)request.readyState : 4 request.responseText : okay
可以看到request.onreadystatechange事件被触发了4次。这4次具体是这样子的:
第一次:request.open("GET",url,true)执行完毕,request.readyState为1,请求已准备好可以发送
第二次:request.readyState为2,表示服务器已接收到请求并正在处理
第三次:request.readyState为3,数据下载到请求对象,但相应数据还没有完全准备好,还不能使用
第四次:request.readyState为4,服务器处理完请求,数据可以使用,可以看到,此时request.responseText已有“okay”这个值
以上就是request和服务器的4次“握手”。
如果我们在进行ajax编程时无法得到返回的数据,可以看看请求对象的readyState属性的值,便可以知道服务器那边的处理是进行到哪一步再出现问题。
相关文章推荐
- 微软企业库4.1学习笔记(二)各功能之间的依赖关系以及对象创建
- 微软企业库Enterprise Library学习笔记二各功能之间的依赖关系以及对象创建
- AJAX概念介绍:2.2 XMLHttpRequest对象的创建、请求、响应
- 使用springMVC注解@ResponseBody与jackson工具类在ajax请求中实现对象与json之间的相互转化
- 创建XMLHttpRequest对象并向服务器发送请求的方法
- 原生ajax异步请求问题--3次握手
- 跨浏览器 创建xmlhttprequest 对象 以及和服务器交互的全过程
- AJAX笔记一创建XMLHttpRequest对象,以及XMLHttpRequest对象的常用属性
- 微软企业库4.1学习笔记(二)各功能之间的依赖关系以及对象创建
- js实现的ajax对象创建&与服务器交互
- 使用ajax访问服务器时---创建XMLHttpRequest对象
- TCP和UDP的区别以及tcp3次握手和4次挥手。
- AJAX之创建XHR对象与发送请求
- Ajax - 使用XMLHttpRequest对象向服务器发送简单请求
- 创建ajax的请求对象
- AJAX基础学习(1)(创建对象,发请求)
- Vue------第五天(Vue的Ajax请求,使用Axios,目前熟悉了一下,主要包括GET请求、POST请求、并发请求、请求参数的配置、服务器响应的结构以及对服务器响应错误的简单处理)
- 一个Servlet同一时刻只有一个实例。 当多个请求发送到同一个Servlet,服务器会为每个请求创建一个新线程来处理。
- 微软企业库4.1学习笔记(二)各功能之间的依赖关系以及对象创建
- tcpdump 之 arp请求,tcp的3次握手,4次断开,详解