您的位置：首页 > Web前端 > JQuery

如果不用jQuery,Ajax你还能写出多少?

2014-03-19 14:26 316 查看
许久之前发过一篇关于Ajax的博客,通篇讲的都是通过jQuery编写Ajax,可能因为jQuery在这方面做的实在太好,以至于突然发现不用jQuery的话自己都模糊了Ajax的写法,这里重温一下.

First-我们明确在使用jQuery的Ajax忽略掉的问题,那就是Ajax的操作本身是操作一个XMLHttpRequest对象,所有的请求发送和监听都是围绕它进行的.

在不同浏览器中,以及IE的不同浏览器版本下都会有不一样的Function创建这个对象,或者方法不同或者参数不同.

01
function
CreateXHR(){
02
var
xhrobj=
false
;
03
try
{
04
xhrobj=
new
ActiveXObject(
"Msxml2.XMLHTTP"
);
//iemsxml3.0+
05
}
06
catch
(e){
07
try
{
08
xhrobj=
new
ActiveXObject(
"Microsoft.XMLHTTP"
);
//iemsxml2.6
09
}
catch
(e2){
10
xhrobj=
false
;
11
}
12
}
13
if
(!xhrobj&&
typeof
XMLHttpRequest!=
'undefined'
){
//firefoxopera8.0safari
14
xhrobj=
new
XMLHttpRequest();
15
}
16
return
xhrobj;
17
}
为了最终创建出正确的XHR对象,不断用try-catch进行尝试.

Second-有了XHR对象,接下来我们调用XMLHttpRequest对象的各个方法就可以了,Ajax对于所谓的异步请求发送无外乎就是通过几个方法来进行的.

我们这里是通过Javascript原生编写异步请求,但是其实并不复杂,只需要记住几个function就可以了.

01
//open,setRequestHeader,onreadystatechange,send
02
03
var
xhr=CreateXHR();
04
05
//这里以POST方式发送,也可以是GET,参数不同即可.而且GET不需要设置setRequestHeader
06
xhr.open(
"POST"
,
"demo.jsp"
,
true
);
07
08
//设置HTTP的输出内容类型为：application/x-www-form-urlencoded
09
xhr.setRequestHeader(
"Content-Type"
,
"application/x-www-form-urlencoded"
);
10
11
//设置浏览器不使用缓存，服务器不从缓存中找，重新执行代码，而且服务器返回给浏览器的时候，告诉浏览器也不要保存缓存。
12
xhr.setRequestHeader(
"If-Modified-Since"
,
"0"
);
13
14
//设置回调函数
15
xhr.onreadystatechange=callback;
//callback是方法名
16
17
//发送请求
18
xhr.send(
null
);
//GET方式
19
xhr.send(
"isAjax=1&na=123"
);
//POST方式
这里就完成了请求发送,也定义了请求的回调是callback函数,所以最后我们的请求的结果就是在callback函数中.

Third-定义callback函数,Ajax的返回是有状态的,这里不同于jQuery的success,所以要自己判断状态码是否正确.

viewsource

print?

1
//回调函数
2
function
callback(){
3
if
(xhr.readyState==4){
4
if
(xhr.status==200){
5
var
res=xhr.reponseText;
//获得服务器返回的字符串
6
console.log(res);
7
}
8
}
9
}
这样就完成了通过原生Javascript发送Ajax请求.
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航