Web中的XHRHttpRequest

1.提出者：Jesse James Garrett

2.IE中，XHR是通过ActiveX对象实现的。涉及浏览器的兼容性写法。

3.使用

<1>open("请求方式","请求的URL"，“同步还是异步”)

<2>send("作为请求主体发送的数据") 如果不需要，则必须传入null。

<3>responseText() 作为响应主体被返回的文本,还有一个responseXML

<4>status 响应的HTTP状态

<5>statusText HTTP状态的说明

4.readyState

只要readyState由一个值变为另外一个值，都会触发onreadystatechange事件处理程序。为了确保兼容性，应该在open之前调用onreadystatechange。有请求也就可以取消请求，使用xhr.abort()即可。

5.HTTP的头信息

6.GET请求

使用GET请求经常会发生一个错误，就是差查询字符串的格式有问题。查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码，然后才能放到URL的末尾。

Blob对象：是一个二进制对象，如图片等

7.XMLHttpRequest 2级

<1>FormData

为表单的序列化以及创建与表单格式相同的数据提供了便利。

<2>超时设定

请求超时执行回调：xhr.timeout=function(){}

<3>overrideMimeType()

重写XHR响应的MIME类型

<4>进度事件

<5>load事件

<6>progress事件

8.实例演示：

JS：

//兼容性XHR
function createXHR(){if(typeof XMLHttpRequest !="undefined"){return new XMLHttpRequest();}else if(typeof ActiveXObject !="undefined"){if(typeof  arguments.callee.activeString!="string"){var versions=["MSXML2.XMLHTTP6.0","MSXML2.XMLHTTP3.0","MSXML2.XMLHTTP"], i,len;for(i=0;len=versions.lengthli<len;i++){try{new ActiveXObject(versions[i]);arguments.callee.activeString=versions[i];break;}catch (ex){//跳过
                }}}return new ActiveXObject(arguments.callee.activeString);}else{throw  new Error("无可用XHR");}}//兼容性写法 var xhr=new createXHR();
var xhr=new XMLHttpRequest();xhr.onreadystatechange=function(){if(xhr.readyState==4){if((xhr.status>=200 && xhr.status<300) || xhr.status==304){alert(xhr.responseText);}else{alert("请求失败！");}}};xhr.open("get","zqz.txt",true);xhr.send(null);

结果：

请求与响应的信息：

改成post请求后：

2015-10-31 start

9.XHR中，POST与GET的简单对比

不会改变服务器状态，只获取数据（被称为“幂等行为”）的请求，使用GET。经过GET请求的数据会被缓存，多次请求的话，有助于提升性能。

由于浏览器对URL的长度限制，使用较长URL会被截断。使用POST。

2015-10-31 end

转载：http://www.cnblogs.com/zqzjs/p/4912623.html

Web中的XHRHttpRequest相关推荐

HTML5 Web app开发工具Kendo UI Web中图像浏览器的使用
2019独角兽企业重金招聘Python工程师标准>>> Kendo UI Web中的图像浏览器在默认的情况下会打开一个简单的对话框,如下图所示,方便用户键入或者是粘贴图片的URL以及 ...
解析 WEB 中所有 URL 的简单牛B代码，先保存起来，方式将来找不到了
解析 WEB 中所有 URL 的简单牛B代码,先保存起来,方式将来找不到了 2011-11-22 16:48 by 通用信息化建设平台, 1471 ...
java web 中有效解决中文乱码问题-pageEncoding与charset区别, response和request的setCharacterEncoding 区别
java web 中有效解决中文乱码问题-pageEncoding与charset区别, response和request的setCharacterEncoding 区别参考文章: (1)java ...
Web中的积累：外观模式 Facade
摘要: 原创出处: http://www.cnblogs.com/Alandre/ 泥沙砖瓦浆木匠希望转载,保留摘要,谢谢! 壹前言目测好久没写文章了,距离上一篇文章也有二十多天.我是怎么了?哈 ...
HTML5 Web app开发工具Kendo UI Web中Grid网格控件的使用
Kendo UI Web中的Grid控件不仅可以显示数据,并对数据提供了丰富的支持,包括分页.排序.分组.选择等,同时还有着大量的配置选项.使用Kendo DataSource组件,可以绑定到本地的J ...
part.write java_小白向：web中利用request.getPart()上传文件到服务器
被文件上传弄得焦头烂额的一天,果然web中的路径和各种设置真的好讨厌= = 下面是超级小白的.及其简约的"详"解 1.明确目的: 用户将 1.txt 文件上传到服务器(web工 ...
模拟Spring如何在WEB中运行
Spring在web中配置和普通的Java程序中有所区别,总结一下主要表现在以下几个方面: ①jar包不同,需要引入两个web的jar包 ②需要考虑IOC容器创建的时间非 WEB 应用在 main ...
java web json_java web中对json的使用详解
一.在Java Web的开发过程中,如果希望调用Java对象转化成JSON对象等操作.则需要引入以下jar包,不然运行时则报错. 1.commons-beanutils.jar 2.commons-c ...
springbot集成finereport后在web中使用iframe引用报表
自己把报表开发好了后,运行地址 http://localhost:8075/webroot/decision/view/report?viewlet=reviewBoard.cpt 运行结果: 想要把 ...

Web中的XHRHttpRequest

Web中的XHRHttpRequest相关推荐

最新文章

热门文章