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,可以跨域,类似于表单提交,但是不能指定回调函数。