前端的强富可敌国

学习改变命运,学习可以致富,这些话语其实一点都不夸张,学习真的可以改变我们的命运,学习真的可以成就我们的人生,学习也确实可以致富。

同步调用固然简单，但使用异步调用才是我们真正常用的手段。使用异步调用的时候，需要触发readystatechange事件，然后检测readyState属性即可。这个属性有五个值：值状态说明0未初始化尚未调用open()方法1启动已

同步调用固然简单，但使用异步调用才是我们真正常用的手段。使用异步调用的时候，需要触发readystatechange事件，然后检测readyState属性即可。这个属性有五个值：

值状态说明

0未初始化尚未调用open()方法

1启动已经调用open()方法，但尚未调用send()方法

2发送已经调用send()方法，但尚未接受响应

3接受已经接受到部分响应数据

4完成已经接受到全部响应数据，而且可以使用

addEvent(document, 'click', function () {

var xhr = new createXHR();

xhr.onreadystatechange = function () {

if (xhr.readyState == 4) {

if (xhr.status == 200) {

alert(xhr.responseText);

} else {

alert('数据返回失败！状态代码：' + xhr.status + '状态信息：'

+ xhr.statusText);

}

}

};

xhr.open('get', 'demo.php?rand=' + Math.random(), true);

xhr.send(null);

});

PS：使用abort()方法可以取消异步请求，放在send()方法之前会报错。放在responseText之前会得到一个空值。

一．GET与POST

在提供服务器请求的过程中，有两种方式，分别是：GET和POST。在Ajax使用的过程中，GET的使用频率要比POST高。

在了解这两种请求方式前，我们先了解一下HTTP头部信息，包含服务器返回的响应头信息和客户端发送出去的请求头信息。我们可以获取响应头信息或者设置请求头信息。我们可以在Firefox浏览器的firebug查看这些信息。

//使用getResponseHeader()获取单个响应头信息

alert(xhr.getResponseHeader('Content-Type'));

//使用getAllResponseHeaders()获取整个响应头信息

alert(xhr.getAllResponseHeaders());

//使用setRequestHeader()设置单个请求头信息

xhr.setRequestHeader('MyHeader', 'Lee'); //放在open方法之后，send方法之前

PS：我们只可以获取服务器返回回来响应头信息，无法获取向服务器提交的请求头信息，自然自定义的请求头，在JavaScript端是无法获取到的。

GET请求

GET请求是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到URL的末尾，以便提交给服务器。

xhr.open('get', 'demo.php?rand=' + Math.random() + '&name=Koo', true);

通过URL后的问号给服务器传递键值对数据，服务器接收到返回响应数据。特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理，中文字符的返回及传参，可以讲页面保存和设置为utf-8格式即可。

//一个通用的URL提交函数

function addURLParam(url, name, value) {

url += (url.indexOf('?') == -1 ? '?' : '&'); //判断的url是否有已有参数

url += encodeURIComponent(name) + '=' + encodeURIComponent(value);

alert(url);

return url;

}

PS：当没有encodeURIComponent()方法时，在一些特殊字符比如“&”，会出现错误导致无法获取。

POST请求

POST请求可以包含非常多的数据，我们在使用表单提交的时候，很多就是使用的POST传输方式。

xhr.open('post', 'demo.php', true);

而发送POST请求的数据，不会跟在URL的尾巴上，而是通过send()方法向服务器提交数据。

xhr.send('name=Lee&age=100');

一般来说，向服务器发送POST请求由于解析机制的原因，需要进行特别的处理。因为POST请求和Web表单提交是不同的，需要使用XHR来模仿表单提交。

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

PS：从性能上来讲POST请求比GET请求消耗更多一些，用相同数据比较，GET最多比POST快两倍。

JSON也可以使用Ajax来回调访问。

var url = 'demo.json?rand=' + Math.random();

var box = JSON.parse(xhr.responseText);

今天就简单说到这里，我觉得想学好就一心一意的去学，总会可以学会。一起努力就会成功。喜欢的小伙伴可以点个关注，有想一起学习讨论的可以私信我，大家多多评论。