XMLHttpRequest

1 .尽管名字里面有XML,Http,但是实际上是可以使用多种协议的file,ftp,发送任何形式的数据,包括字符串和二进制
2 .ajax只会向同源网址,发出http请求,跨域请求是会报错的
3 .

XMLHttpRequest.readyState

1 .返回一个整数,表示实例对象的当前状态,该属性只读。
2 .0 表示XMLHttprequest实例已经生成,但是实例的open方法没有被调用
3 .1 表示open方法已经调用,可以使用实例的setRequestHeader()方法设置HTTP请求头信息。此时send方法还没调用
4 .2 表示实例的send方法已经调用,并且服务器返回的头信息和状态码已经收到
5 .3 表示正在接收服务器传来的数据体body部分。这时,如果实例的responseType属性等于text或者空字符串,responseText属性就会包含已经收到的部分信息
6 . 4 表示服务器返回的数据已经完全接收,或本次接收已经失败
7 .通信过程中,每当实例对象发生状态变化,他的readyState属性就会改变,这个值每一次变化,都会触发readyStateChange事件

XMLHttpRequest.onready.statechange

1 .指向一个监听函数,readystatechange事件发生时,就会执行这个属性
2 .在这个里面判断当前的状态,取得返回值

XMLHttpRequest.response

1 .表示服务器返回的数据体,可能是任意的数据类型,比如字符串,对象,二进制对象等,具体类型由XMLHttpRequest.responseType属性决定,该属性只读
2 .如果本次请求没有成功或者数据不完整,该属性等于null.但是,如果responseType属性等于text或空字符串,在请求没有结束之前,response属性包含服务器已经返回的部分数据
3 .

XMLHttpRequest.responseType

1 .表示服务器返回数据的类型
2 .这个属性是可写的,在open之后,send之前,设置这个值,告诉服务器返回指定类型的数据。如果responseType设为空字符串,就等同于默认值text
3 .“”表示服务器返回文本数据
4 .“arraybuffer”表示服务器返回二进制数组
5 ."blob":表示返回二进制对象。图片文件
6 ."document"返回一个文档对象
7 ."json"json对象,浏览器自动对返回数据调用JSON.parse()方法
8 ."text"字符串

XMLHttpRequest.responseText

1 .属性返回从服务器接收的字符串,该属性为只读。只有HTTP请求完成以后,该属性才会包含完整的数据
2 .

XMLHttpRequest.responseXML

1 .返回从服务器接收到的html或xml文档对象,该属性为只读。如果本次请求没有成功,或者受到的数据不能解析为xml或html,该属性等于null
2 .该属性生效的前提是HTTP回应的Content-type头信息等于text/xml或者application/xml。在发送前XMLHttprequest.responseType属性要设为document
3 .如果HTTP回应的Content-type头信息不等于text/xml和application/xml.但是想要从responseXML拿到数据需要手动调用XMLHttpRequest.overideMineType()方法,强制进行xml解析

XMLHttpRequest.responseURL

1 .表示发送数据的服务器的网址
2 .这个属性的值与open方法指定的请求网址不一定相同,如果服务器端发生了跳转,这个属性返回最后实际返回数据的网址。另外,如果原始的url包括锚点,该属性会把锚点剥离

XMLHttpRequest.status,XMLHttpRequest.statusText

1 .XMLHttpRequest.status属性返回一个整数,表示服务器端回应的HTTP状态码。一般来说,通信成功,这个状态码返回的是200;
2 .只有2XX,304的状态码,服务器返回的数据是正确的
3 .statusText属性返回一个字符串,表示服务器发送的状态提示。该属性包含整个状态信息,比如ok,not found.在请求发送之前,该属性的值是空字符串,如果服务器没有返回状态提醒,该属性的值默认为ok,该属性为只读属性
4 .

XMLHttpRequest.timeout

1 .返回一个整数,表示多少毫秒之后,如果请求任然没有得到结果,就自动终止。如果该属性等于0,就表示没有时间限制
2 .xhr.ontimeout 用于设置一个监听函数,如果发生timeout事件,就会执行这个监听函数

xhr事件监听属性

1 .xhr.onloadstart
2 .xhr.onprogress(loaded,total,lengthComputeable)
3 .xhr.onabort
4 .xhr.onerror
5 .xhr.onload
6 .xhr.ontimeout
7 .xhr.onloadend:请求完成,不论失败或成功的监听函数

XMLHttpRequest.withCredentials

1 .该属性是一个布尔值,表示跨域请求时,用户信息cookie,http头信息是否会包含在请求之中,默认为false,即跨域请求发送时,不会发送example.com设置在本机上的cookie
2 .如果需要跨域请求发送cookie,需要withCredentials属性设为true.同源请求不需要设置这个属性
3 .为了这个属性生效,服务器必须显示返回Access-control-allow-credentials:true这个头信息
4 .脚本总是遵守同源策略,无法从document.cookie或者http回应的头信息之中,读取跨域的cookie,withCredentials属性不影响这一点
5 .

ajax上传文件

function upload(blobOrFile) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/server', true);
  xhr.onload = function (e) {};

  var progressBar = document.querySelector('progress');
  xhr.upload.onprogress = function (e) {
    if (e.lengthComputable) {
      progressBar.value = (e.loaded / e.total) * 100;
      // 兼容不支持 <progress> 元素的老式浏览器
      progressBar.textContent = progressBar.value;
    }
  };

  xhr.send(blobOrFile);
}

upload(new Blob(['hello world'], {type: 'text/plain'}));

xhr的实例方法

1 .open()用于指定http请求的参数,或者说初始化XMLHttpRequest实例对象

1 .method:表示HTTP动词方法,get,post,put,delete,head
2 .url:表示请求发送目标url
3 .async:表示请求是否为异步,默认为true.如果设置为false,则send方法只有等到服务器返回了结果,才会进行下一步操作,该参数可选。由于同步ajax会造成浏览器失去响应,许多浏览器禁止在主线程使用,只允许在worker里面使用
4 .user:表示用户认证的名字,默认为空字符串
5 .password:表适用于认证的密码,默认为空字符串

2 .send()方法用于发出实际http请求。参数可选

1 .如果不带参数,那就是表示是get请求,如果有参数,就表示出了头信息,还带有包含具体数据的信息体,典型的例子就是POST请求
2 .var xhr = new XMLHttpRequest();
var data = 'email='
  + encodeURIComponent(email)
  + '&password='
  + encodeURIComponent(password);

xhr.open('POST', 'http://www.example.com', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(data);
3 .所有XMLHttpRequest的监听事件,都必须在send方法调用之前设定。send方法的参数就是发送的数据。多种格式的数据,都可以作为他的参数

3 .setRequestHeader()

1 .用于设置浏览器发送http请求的头信息,必须在open之后,send之前调用,如果该方法多次调用,设定同一个字段,则每一次调用的值都会被合并成一个单一的值发送
2 .xhr.setRequestHeader('Content-Type', 'application/json');

XMLHttprequest.overrideMimeType()

1 .用来指定MIME类型,覆盖服务器返回的真正的MIME类型,从而让服务器进行不一样的处理
2 .假设服务器返回的数据类型是text/xml,当浏览器解析不成功报错的时候,这时拿不到数据,为了拿到原始的数据,我们可以把MIME类型改成text/plain。这样浏览器就不会自动解析了,从而可以拿到原始文本了
3 .该方法必须在send方法之前调用
4 .修改服务器返回的数据类型,并不是正常情况下应该采取的方法。如果希望服务器返回指定的数据类型,可以使用responseType属性告诉服务器。只有在服务器无法返回某种数据类型时,才使用overrideMimeType()方法
5 .

XMLHttpRequest.getResponseHeader()

1 .返回HTTP头信息指定字符安的值,如果还没有收到服务器返回或者指定字段不存在,返回null
2 .如果有多个字段同名,他们的只会被连接成为一个字符串,每个字段之间使用逗号+空格分割
3 .

XMLHttpRequest.getAllResponseHeaders

1 .返回一个字符串,表示服务器发来的所有http头信息,格式为字符串,每个头信息之间使用换行分隔

XMLHttpRequest.abrt()

1 .用来终止已经发出的http请求,调用这个方法以后,readyState属性变为4,status属性变为0
2 .

XMLHttprequest实例的事件

1 .readyStateChange,-onReadyStateChange事件
2 .progress

1 .上传文件时,xhr实例对象本身和实例的upload属性,都有一个progress事件,会不断返回上传的进度
2 .var xhr = new XMLHttpRequest();

function updateProgress (oEvent) {
  if (oEvent.lengthComputable) {
    var percentComplete = oEvent.loaded / oEvent.total;
  } else {
    console.log('无法计算进展');
  }
}

xhr.addEventListener('progress', updateProgress);

xhr.open();

navigator.sendBeacon()

1 .想在用户卸载网页的时候,向服务器发送一些数据,常见的是pagehide事件回调里面,使用ajax发送数据,但是这样做的后果就是可能会发送不出去,因为ajax是异步发送数据,很可能在他即将发送的时候,页面就已经卸载了,从而导致异步取消或者发送失败
2 .上面那个方法可以保证是异步发出请求,但是请求和当前页面脱钩,作为浏览器任务,因为可以保证把数据发出去,不拖延卸载流程
3 .方法使用

window.addEventListener('unload', logData, false);

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

推荐阅读更多精彩内容

  • 伟大的语文 1."钱是没有问题 ” 就这六个字的组词成句,可以变成不同意思的句子!哈哈,偉大的語文能力! 钱是没有...
    觉之灯阅读 341评论 0 0
  • 我祈祷一切娑诃众生帮我去丰台区一个叫小月湾女子强制隔离戒毒所的地方把一个圣人接出来,就是我。
    Mahaprabhu阅读 440评论 0 0
  • 在今天这个时代中,作为神的儿女,如果内心生命中没有敬畏神之心,生活中没有公平、公义之行为,就不配做基督徒。
    绍兴虞扬明阅读 245评论 0 1
  • 木兰词·拟古决绝词柬友 [ 清·纳兰性德 ] 人生若只如初见,何事秋风悲画扇。 等闲变却故人心,却...
    兼苍为暮阅读 251评论 0 7
  • 总是在夜深人静的时候想起你,想起你微笑的脸庞,想起你向我点头招手的模样,想起你背对着阳光时那高大的背影,想起你拉着...
    沙漏中的时光005阅读 193评论 0 0