[Java教程]如果不用jQuery,Ajax你还能写出多少?
0 2014-03-19 19:00:23
许久之前发过一篇关于Ajax的博客,通篇讲的都是通过jQuery编写Ajax,可能因为jQuery在这方面做的实在太好,以至于突然发现不用jQuery的话自己都模糊了Ajax的写法,这里重温一下.
First - 我们明确在使用jQuery的Ajax忽略掉的问题,那就是Ajax的操作本身是操作一个
在不同浏览器中,以及IE的不同浏览器版本下都会有不一样的Function创建这个对象,或者方法不同或者参数不同.01function CreateXHR() {
02var xhrobj =false;
03try {
04xhrobj =new ActiveXObject("Ms);//ie ms
05}
06catch (e) {
07try {
08xhrobj =new ActiveXObject("Microsoft.);//ie ms
09}catch (e2) {
10xhrobj =false;
11}
12}
13if (!xhrobj &&typeof 'undefined') {//firefox opera 8.0 safari
14xhrobj =new
15}
16return xhrobj;
17}
为了最终创建出正确的XHR对象,不断用try-catch进行尝试.
Second - 有了XHR对象,接下来我们调用
我们这里是通过Javascript原生编写异步请求,但是其实并不复杂,只需要记住几个function就可以了.01//open,setRequestHeader,onreadystatechange,send
02
03var xhr = CreateXHR();
04
05//这里以POST方式发送,也可以是GET,参数不同即可.而且GET不需要设置setRequestHeader
06xhr.open("POST","demo.jsp",true);
07
08//设置HTTP的输出内容类型为:application/x-www-form-urlencoded
09xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
10
11//设置浏览器不使用缓存,服务器不从缓存中找,重新执行代码,而且服务器返回给浏览器的时候,告诉浏览器也不要保存缓存。
12xhr.setRequestHeader("If-Modified-Since","0");
13
14//设置回调函数
15xhr.onreadystatechange = callback;//callback是方法名
16
17//发送请求
18xhr.send(null);//GET方式
19xhr.send("isAjax=1&na=123");//POST方式
这里就完成了请求发送,也定义了请求的回调是callback函数,所以最后我们的请求的结果就是在callback函数中.
Third - 定义callback函数,Ajax的返回是有状态的,这里不同于jQuery的success,所以要自己判断状态码是否正确.view source
print?1//回调函数
2function callback() {
3if (xhr.readyState == 4) {
4if (xhr.status == 200) {
5var res = xhr.reponseText;//获得服务器返回的字符串
6console.log(res);
7}
8}
9}
这样就完成了通过原生Javascript发送Ajax请求.
本文网址:http://www.shaoqun.com/a/86279.html
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:admin@shaoqun.com。
jquery
0