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