系列文章
XMLHttpRequest 对象(知识点主要来源于XMLHttpRequest)(已经熟悉的人也直接跳过这一章节吧)
XMLHttpRequest 对象用于在后台与服务器交换数据。您能够&＃xff1a;
在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求/接收数据
在后台向服务器发送数据
并且所有现代的浏览器都支持 XMLHttpRequest 对象。(简直程序员的梦想ヾ(≧O≦)〃嗷~)
一如既往先看兼容性
因为所有现代浏览器 (IE7&＃43;、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。创建 XMLHttpRequest 对象只需要这样
var xmlhttp&＃61;new XMLHttpRequest();
旧的浏览器也有办法拯救!!!
var xmlhttp&＃61;new ActiveXObject("Microsoft.XMLHTTP"); // 括号里面的是ActiveX插件的名字.
客服端请求
open(string method, string url, boolean asynch, String username, string password):
参数
描述
Method
表示http请求方法&＃xff0c;一般使用"GET","POST"
url
表示请求的服务器的地址
asynch
表示是否采用异步方法&＃xff0c;true为异步表示脚本会在 send()方法之后继续执行&＃xff0c;而不等待来自服务器的响应。false为同步可以省去额外的 onreadystatechange 代码。如果在请求失败时是否执行其余的代码无关紧要&＃xff0c;那么可以使用这个参数
username(可以不指定)
提供http认证机制需要的用户名
password(可以不指定)
提供http认证机制需要的密码
getRequestHeader(name)
获取指定的相应头部信息
setRequestHeader(name,value)
自定义HTTP头部信息。需在open()方法之后和send()之前调用&＃xff0c;才能成功发送请求头部信息。
头部
描述
Accept
浏览器能够处理的媒体类型
Accept-Charset
浏览器申明自己接收的字符集
Accept-Encoding
浏览器申明自己接收的编码方法&＃xff0c;通常指定压缩方法&＃xff0c;是否支持压缩&＃xff0c;支持什么压缩方法(gzip&＃xff0c;deflate)
Host
客户端指定要请求的WEB服务器的域名/IP 地址和端口号
Referer
发出请求的页面的URI
Content-Type
标明发送或者接收的实体的MIME类型
X-Requested-With
非标准HTTP头&＃xff0c;只为firefox3标注是否为ajax异步请求&＃xff0c;null表示为同步请求
send(content)
向服务器发出请求&＃xff0c;如果采用异步方式&＃xff0c;该方法会立即返回。content可以指定为null表示不发送数据&＃xff0c;其内容可以是DOM对象&＃xff0c;输入流或字符串。
abort()
调用此方法可取消异步请求&＃xff0c;调用后&＃xff0c;XHR对象停止触发事件&＃xff0c;不允许访问任何与响应相关的属性&＃xff1b;
服务端响应
onreadystatechange事件
可以传递一个函数的名称&＃xff0c;当 XMLHttpRequest 对象的状态发生改变时&＃xff0c;会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化. 事件使代码复杂化了。但是这是在没有得到服务器响应的情况下&＃xff0c;防止代码停止的最安全的方法。
readyState状态
表示XMLHttpRequest对象的状态&＃xff1a;
状态
描述
0
未初始化。对象已创建&＃xff0c;未调用open
1
open方法成功调用&＃xff0c;但send方法未调用
2
send方法已经调用&＃xff0c;尚未开始接受数据
3
正在接受数据。Http响应头信息已经接受&＃xff0c;但尚未接收完成
4
完成&＃xff0c;即响应数据接受完成
status状态
表示服务器返回的http状态码。200表示“成功”&＃xff0c;404表示“未找到”&＃xff0c;500表示“服务器内部错误”等。
总的来说有几部分:
状态
描述
1xx
信息提示
2xx
成功
3xx
重定向
4xx
客户端错误
5xx
服务器错误
responseText信息
服务器响应的文本内容.
responseXML对象
服务器响应的XML内容对应的DOM对象.
statusText
服务器返回状态的文本信息。
responseBody(只有微软的IE支持)
将响应信息正文以unsigned byte数组形式返回(二进制数据).
responseStream(只有IE的某些版本支持)
以Ado Stream对象(二进制流)的形式返回响应信息.
getResponseHeader(name)
从响应信息中获取指定的http头.
getAllResponseHeaders
获取响应的所有http头.
overrideMimeType
通常用于重写服务器响应的MIME类型。
Eg&＃xff0c;正常情况下XMLHttpRequest只接收文本数据&＃xff0c;但我们可以重写MIME为“text/plain; charset&＃61;x-user-defined”&＃xff0c;以欺骗浏览器避免浏览器格式化服务器返回的数据&＃xff0c;以实现接收二进制数据。
完整例子
下面基本跟来源教程一样,只是部分写法有点区别
var xmlhttp;
function loadXMLDoc(url) {
if (window.XMLHttpRequest) {
xmlhttp &＃61; new XMLHttpRequest()
} else if (window.ActiveXObject) {
xmlhttp &＃61; new ActiveXObject("Microsoft.XMLHTTP")
} else {
xmlhttp &＃61; null;
alert(&＃39;Your browser does not support XMLHTTP.&＃39;);
}
if (xmlhttp) {
xmlhttp.onreadystatechange &＃61; state_Change;
xmlhttp.open(&＃39;GET&＃39;, url, true);
xmlhttp.send(null);
}
//post
/*if(xmlhttp) {
xmlhttp.onreadystatechange &＃61; state_Change;
xmlhttp.open(&＃39;&＃39;POST&＃39;&＃39;, url);
xmlhttp.setRequestHeader(&＃39;Content-Type&＃39;, &＃39;application/x-www-form-urlencoded&＃39;);
xmlhttp.send(null);
}*/
}
function state_Change() {
if (xmlhttp.readyState &＃61;&＃61;&＃61; 4) { // 4 &＃61; "loaded"
if (xmlhttp.status &＃61;&＃61;&＃61; 200) { // 200 &＃61; OK
// ...our code here...
} else {
alert("Problem retrieving XML data");
}
}
}
看着挺强大,实际还是有挺多缺点的,例如:
只支持文本数据的传送&＃xff0c;无法用来读取和上传二进制文件。
传送和接收数据时&＃xff0c;没有进度信息&＃xff0c;只能提示有没有完成。
受到"同域限制"(Same Origin Policy)&＃xff0c;只能向同一域名的服务器请求数据。
于是后面就有了新版本.
XMLHttpRequest2 对象
新版本针对以前的缺点升级的新增功能主要有以下:
可以设置 HTTP 请求的时限。(部分浏览器兼容有问题)
可以使用 FormData 对象管理表单数据。(后续文章会讲到)
下载和上载图像、视频和音频等二进制文件(无需使用插件)。(其实整个系列文章都是围绕这个需求才得出的)
可以请求不同域名下的数据(跨域请求)。(前提是浏览器必须支持这个功能&＃xff0c;而且服务器端必须同意这种"跨域"。前端代码的写法与不跨域的请求完全一样。)
可以获取服务器端的二进制数据。
可以获得数据传输的进度信息:
timeout
设置ajax请求超时时限&＃xff0c;过了这个时限&＃xff0c;就自动停止 HTTP 请求。
responseType
(默认&＃xff1a;“text”)在发送请求前&＃xff0c;根据您的数据需要&＃xff0c;将xhr.responseType设置为“text”、“arraybuffer”、“blob”或“document”。(暂时不讲)
response: 响应
成功发送请求后&＃xff0c;xhr的响应属性会包含DOMString、ArrayBuffer、Blob 或 Document 形式(具体取决于responseTyp的设置)的请求数据。
progress
传送数据的时候&＃xff0c;用来返回进度信息。它分成上传和下载两种情况&＃xff1a;
上传的progress事件属于XMLHttpRequest.upload对象
下载的progress事件属于XMLHttpRequest对象
里面有两个重要属性分别是
total:需要传输的总字节&＃xff0c;
loaded:已经传输的字节。
(大家都应该猜到这就是实现进度条的东西了)
ontimeout事件
当ajax超过timeout 时限时触发的回调函数。
load事件&＃xff1a;
传输成功完成。
error事件&＃xff1a;
传输中出现错误。
loadstart()&＃xff1a;
传输开始。
loadEnd()&＃xff1a;
传输结束&＃xff0c;但是不知道成功还是失败。
修改版
还以上面的代码示例修改一下
var xmlhttp;
function loadXMLDoc(url) {
if (window.XMLHttpRequest) {
xmlhttp &＃61; new XMLHttpRequest()
} else if (window.ActiveXObject) {
xmlhttp &＃61; new ActiveXObject("Microsoft.XMLHTTP")
} else {
xmlhttp &＃61; null;
alert(&＃39;Your browser does not support XMLHTTP.&＃39;);
}
if (xmlhttp) {
xmlhttp.timeout &＃61; 3000;
xmlhttp.ontimeout &＃61; time_Out;
xmlhttp.onreadystatechange &＃61; state_Change;
xmlhttp.upload.onprogress &＃61; load_Change;//未经测试
xmlhttp.open(&＃39;GET&＃39;, url, true);
xmlhttp.send(null);
}
}
function time_Out() {
alert(&＃39;请求超时&＃xff01;&＃39;);
}
function state_Change() {
if (xmlhttp.readyState &＃61;&＃61;&＃61; 4) { // 4 &＃61; "loaded"
if (xmlhttp.status &＃61;&＃61;&＃61; 200) { // 200 &＃61; OK
// ...our code here...
} else {
alert("Problem retrieving XML data");
}
}
}
function load_Change(evt) {
if (evt.lengthComputable) {
var percentComplete &＃61; Math.round(evt.loaded * 100 / evt.total);
xx.value &＃61; percentComplete;
xx.style.width &＃61; percentComplete &＃43; "%";
}
}
实战需要后台代码配合,详情查阅请狠狠地点击关于XMLHttpRequest 对象
load_Change函数写着未经测试是需要传送后台返回数据才能拿到,我暂时没办法测试,只是给个思路给你们实现进度条,参考网上其他文章然后加进去的,有兴趣可以自行搜索,没兴趣就忽略吧,怕误人子弟就不好了(据说部分手机不支持),里面的evt一般是这样子的
详情查阅请狠狠地点击原生js上传文件 显示进度条
实话实说,这章看起来内容好少比较简单,其实你被误导了,是我写的简单了,实际有好多东西都没写出来,因为我也还在摸索没太搞懂,想做出一个完整实例需要后端配合能力,这是硬伤,我还没到这水平,就是让大家知道有这么一个东西,建议大家网上查看其它资料.
京公网安备 11010802041100号