AJAX快速入门学习(XMLHttpRequest)

[XMLHttpRequest]是一个浏览器接口,使得Javascript可以进行HTTP(S)通信。

ajax就是其衍生出来的一个框架,然而HTML 5的概念形成后,W3C开始考虑标准化这个接口。2008年2月,就提出了[XMLHttpRequest Level 2]草案。
支持不同的浏览器,有些浏览器因为本身原因并不支持,所以ajax需要不同创立函数(这里引用网上大部分教程的if函数)


创立函数

因为不同版本的XMLHttpRequest(因为支持的浏览器不同);XML所拥有不同的用法
如果我们想打开一个网页:
xmlhttp.open(' 请求方式 ',' 网址(url)' )(同域传输)
xmlhttp.send()
这样就可以完成请求,等待主机做出响应,这时候就需要它的回调函数


回调函数
    xmlhttp.readyState:XMLHttpRequest对象的状态,等于4表示数据已经接收完毕。(一个分出了个过程,一般情况下4是我们比较常用的)
    xmlhttp.status:服务器返回的状态码,等于200表示一切正常
     xmlhttp.responseText:服务器返回的数据以文本方式显示
      xmlhttp.responseXML:服务器返回的XML格式的数据

xmlhttp.statusText:服务器返回的状态文本。

虽然好像看起来这样强求没什么问题,但是仔细一想,http协议中很多属性并没有显示出来

所以老版本就有很多缺点:


缺点

所以就推出了新版本的XMLHttpRequest对象
新版本多出了以下功能:


功能

1.有时,ajax操作很耗时,而且无法预知要花多少时间。如果网速很慢,用户可能要等很久。
新版本的XMLHttpRequest对象,增加了timeout属性,可以设置HTTP请求的时限。

   xmlhttp.timeout=xxxx;

计时单位为毫秒,如果超过这个时长就会自动停止http请求
也可以创建一个函数提醒一下自己什么时候请求挂掉了


超时

目前,Opera、Firefox和IE 10支持该属性,IE 8和IE 9的这个属性属于XDomainRequest对象,而Chrome和Safari还不支持。

ajax操作往往用来传递表单数据。为了方便表单处理,HTML 5新增了一个FormData对象,可以模拟表单。
AJAX中我们需要新建一个FormData对象
var formData = new FormData();
例如以下表单选项
formData.append('username', '三');
formData.append('id', 123456);
然后,传输对象
xmlhttp.send(formData);

然后 我们说一下上传文件
假定files是一个"选择文件"的表单元素(input[type="file"]),我们将它装入FormData对象。
函数:
var formData = new FormData();
   for (var i = 0; i < files.length;i++)
{
    formData.append('files[]', files[i]);
}
xmlhttp.send(formData);

跨域资源共享(CORS)
条件:使用"跨域资源共享"的前提,是浏览器必须支持这个功能,而且服务器端必须同意这种"跨域"。
xmlhttp.open('GET', '网址');
目前,除了IE 8和IE 9,主流浏览器都支持CORS,IE 10也将支持这个功能。具体事宜还需要你们自己设置一下
然后我们来说一下接受数据的进化、
新版的XMLHttpRequest可以接收二进制数据,分以下2种方法
第一种:
老版一点的是改写数据的MIMEType,将服务器返回的二进制数据伪装成文本数据,并且告诉浏览器这是用户自定义的字符集。
xmlhttp.overrideMimeType("text/plain; charset=x-user-defined");
然后,用responseText属性接收服务器返回的二进制数据。
var binStr = xmlhttp.responseText;
由于这时,浏览器把它当做文本数据,所以还必须再一个个字节地还原成二进制数据。
for (var i = 0, len = binStr.length; i < len; ++i) {

var c = binStr.charCodeAt(i);

var byte = c & 0xff;

}
最后一行的位运算"c & 0xff",表示在每个字符的两个字节之中,只保留后一个字节,将前一个字节扔掉。原因是浏览器解读字符的时候,会把字符自动[解读]成Unicode的0xF700-0xF7ff区段。
老板的放法还是很繁琐的,但好在思路清晰

新版的方法是使用新增的responseType属性。如果服务器返回文本数据,这个属性的值是"TEXT",这是默认值。较新的浏览器还支持其他值,也就是说,可以接收其他格式的数据。
var xhr = new XMLHttpRequest();

xhr.open('GET', '/path/to/image.png');
接收数据的时候,用浏览器自带的Blob对象即可
var xhr.responseType = new Blob([xhr.response], {type: 'image/png'});

进度信息
定义:新版本的XMLHttpRequest对象,传送数据的时候,有一个progress事件,用来返回进度信息。
它分成上传和下载两种情况。下载的progress事件属于XMLHttpRequest对象,上传的progress事件属于XMLHttpRequest.upload对象。
我们来看函数
首先:
我们先定义progress事件的回调函数。

  xmlhttp.onprogress = updateProgress;

  xmlhttp.upload.onprogress = updateProgress;

然后,在回调函数里面,使用这个事件的一些属性。
function updateProgress(event) {

if (event.lengthComputable) {

var percentComplete = event.loaded / event.total;

}

}
上面的代码中,event.total是需要传输的总字节,event.loaded是已经传输的字节。如果event.lengthComputable不为真,则event.total等于0。

与progress事件相关的,还有其他五个事件,可以分别指定回调函数:
事件
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容