参考链接1
参考链接2
浏览器与服务器之间时采用HTTP协议通信的；如在地址栏输入地址或者提交表单，浏览器都会向服务器发起请求；而AJAX是脚本向服务器发起HTTP请求的代名词；
AJAX总结为以下步骤：
1.创建AJAX对象；
2.发起HTTP请求(只能是协议、域名、端口都相同的同源网址)；
3.接收服务器传回的数据；
4.更新局部网页数据；
实例化XMLHttpRequest对象，使用它向服务器发出HTTP请求
httpRequest = new XMLHttpRequest();
提出请求后利用XMLHttpRequest实例的属性——readyState相应的值来获得XMLHttpRequest请求当前所处的状态；readyState有以下值：
| 整数值 | 对应常量 | 请求所处状态 |
|---|---|---|
| 0 | UNSENT | 请求未初始化 |
| 1 | OPENED | 建立服务器连接 |
| 2 | HEADERS_RECEIVED | 请求收到 |
| 3 | LOADING | 处理请求 |
| 4 | DONE | 请求完成，响应已准备就绪 |
readyState属性的值发生改变，就会触发readyStateChange事件。此时我们可以通过onReadyStateChange属性，指定这个事件的回调函数，对不同状态进行不同处理。尤其是当状态变为4的时候，表示通信成功，这时回调函数就可以处理服务器传送回来的数据。
接下来，通过status还要检查HTTP响应的响应代码;
| 状态码 | 状态 |
|---|---|
| 200 | 访问正常 |
| 301 | 永久移动 |
| 302 | 暂时移动 |
| 401 | 未授权 |
| 403 | 禁止访问 |
| 404 | 未发现指定网址 |
| 500 | 服务器发生错误 |
根据readyState、onReadyStateChange、status属性，当我们利用open方法和send发送HTTP请求时，代码如下：
httpRequest.onreadystatechange = alertContents;
httpRequest.open('GET', 'test.html');
httpRequest.send();
function alertContents() {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
.....
} else {
......
}
}
}
open方法用于指定发送HTTP请求的参数，一共可以接受五个参数：
- method：表示HTTP动词，比如“GET”、“POST”、“PUT”和“DELETE”。
该请求所要访问的URL; - url: 表示请求发送的网址。
- async: 默认为true，表示请求为异步。如果设为false，则
send()方法-
只有等到收到服务器返回的结果，才会有返回值。 - user：表示用于认证的用户名，默认为空字符串。
- password：表示用于认证的密码，默认为空字符串。
send方法用于实际发出HTTP请求;如果不带参数，就表示HTTP请求只包含头信息，也就是只有一个URL，典型例子就是GET请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是POST请求。如下两个例子：
ajax.open('GET'
, 'http://www.example.com/somepage.php?id=' + encodeURIComponent(id)
, true
);
// 等同于
var data = 'id=' + encodeURIComponent(id);
ajax.open('GET', 'http://www.example.com/somepage.php', true);
ajax.send(data);
var data = 'email='
+ encodeURIComponent(email)
+ '&password='
+ encodeURIComponent(password);
ajax.open('POST', 'http://www.example.com/somepage.php', true);
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
ajax.send(data);
上面代码中的setRequestHeader方法用于设置HTTP头信息。该方法必须在open()之后、send()之前调用;另外send方法的参数就是发送的数据。多种格式的数据，都可以作为它的参数。可以是表单数据，Document数据，JavaScript生成的文件，发送二进制数据，最好使用ArrayBufferView或Blob对象，这使得通过Ajax上传文件成为可能。
在检查请求的状态(readyState)和响应的HTTP状态代码(status)之后，通过response属性获得服务器返回的数据；
它的类型由XMLHttpRequest.responseType属性的值决定。默认为字符串，如果本次请求没有成功或者数据不完整，该属性就会等于null；
- “arraybuffer”：ArrayBuffer对象
- “blob”：Blob对象
- “document”：Document对象
- “json”：JSON对象
- “text”：字符串
blob类型适合读取二进制数据，比如图片文件。参考以下代码：
var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
var blob = new Blob([this.response], {type: 'image/png'});
// 或者
var blob = oReq.response;
}
};
xhr.send();
如果将这个属性设为ArrayBuffer，就可以按照数组的方式处理二进制数据。
var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
var uInt8Array = new Uint8Array(this.response);
for (var i = 0, len = binStr.length; i < len; ++i) {
// var byte = uInt8Array[i];
}
};
xhr.send();
responseText和responseXML分别返回从服务器接收到的字符串和Document对象；如下代码：
var data = ajax.responseText;
data = JSON.parse(data);
如果想在请求的各种情况下做什么其他处理，可以使用可以使用事件监听接口：
- onloadstart 请求发出
- onprogress 正在发送和加载数据
- onabort 请求被中止，比如用户调用了abort()方法
- onerror 请求失败
- onload 请求成功完成
- ontimeout 用户指定的时限到期，请求还未完成
- onloadend 请求完成，不管成果或失败
httpRequest = new XMLHttpRequest();
function alertContents() {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
.....
} else {
......
}
}
}
httpRequest.onreadystatechange = alertContents;
httpRequest.open('GET', 'test.html',true);
httpRequest.onerror = function () {
console.log("** An error occurred during the transaction");
};
httpRequest.send();
利用表单进行文件上传的时候
现有HTML代码如下：
<form id="file-form" action="handler.php" method="POST">
<input type="file" id="file-select" name="photos[]" multiple/>
<button type="submit" id="upload-button">上传</button>
</form>
JavaScript代码如下：
var file = document.getElementById('test-input').files[0];
var xhr = new XMLHttpRequest();
xhr.open('POST', 'myserver/uploads');
xhr.setRequestHeader('Content-Type', file.type);
xhr.send(file);
网友评论