ajax利用了什么协议,AJAX

参考链接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代码如下：

上传

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);