许久之前发过一篇关于Ajax的博客,通篇讲的都是通过jQuery编写Ajax,可能因为jQuery在这方面做的实在太好,以至于突然发现不用jQuery的话自己都模糊了Ajax的写法,这里重温一下.
First - 我们明确在使用jQuery的Ajax忽略掉的问题,那就是Ajax的操作本身是操作一个XMLHttpRequest对象,所有的请求发送和监听都是围绕它进行的.
在不同浏览器中,以及IE的不同浏览器版本下都会有不一样的Function创建这个对象,或者方法不同或者参数不同.
01 |
function CreateXHR() { |
04 |
xhrobj = new ActiveXObject( "Msxml2.XMLHTTP" ); |
08 |
xhrobj = new ActiveXObject( "Microsoft.XMLHTTP" ); |
13 |
if (!xhrobj && typeof XMLHttpRequest != 'undefined' ) { |
14 |
xhrobj = new XMLHttpRequest(); |
为了最终创建出正确的XHR对象,不断用try-catch进行尝试.
Second - 有了XHR对象,接下来我们调用XMLHttpRequest对象的各个方法就可以了,Ajax对于所谓的异步请求发送无外乎就是通过几个方法来进行的.
我们这里是通过Javascript原生编写异步请求,但是其实并不复杂,只需要记住几个function就可以了.
03 |
var xhr = CreateXHR(); |
06 |
xhr.open( "POST" , "demo.jsp" , true ); |
09 |
xhr.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" ); |
12 |
xhr.setRequestHeader( "If-Modified-Since" , "0" ); |
15 |
xhr.onreadystatechange = callback; |
19 |
xhr.send( "isAjax=1&na=123" ); |
这里就完成了请求发送,也定义了请求的回调是callback函数,所以最后我们的请求的结果就是在callback函数中.
Third - 定义callback函数,Ajax的返回是有状态的,这里不同于jQuery的success,所以要自己判断状态码是否正确.
3 |
if (xhr.readyState == 4) { |
4 |
if (xhr.status == 200) { |
5 |
var res = xhr.reponseText; |
这样就完成了通过原生Javascript发送Ajax请求.