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

最新推荐文章于 2024-10-05 01:22:45 发布

weixin_34087503

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量125

点赞数

文章标签： javascript ViewUI

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

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

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

 
    01function CreateXHR() {
 
    02            var xhrobj = false;
 
    03            try {
 
    04                xhrobj = new ActiveXObject("Msxml2.XMLHTTP"); //ie msxml3.0+
 
    05            }
 
    06            catch (e) {
 
    07                try {
 
    08                    xhrobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml 2.6
 
    09                } catch (e2) {
 
    10                    xhrobj = false;
 
    11                }
 
    12            }
 
    13            if (!xhrobj && typeof XMLHttpRequest != 'undefined') { //firefox opera 8.0 safari
 
    14                xhrobj = new XMLHttpRequest();
 
    15            }
 
    16            return xhrobj;
 
    17        }

为了最终创建出正确的XHR对象,不断用try-catch进行尝试.

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

我们这里是通过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,所以要自己判断状态码是否正确.

 
    1//回调函数
 
    2function callback() {
 
    3  if (xhr.readyState == 4) {
 
    4    if (xhr.status == 200) {
 
    5      var res = xhr.reponseText; //获得服务器返回的字符串
 
    6      console.log(res);
 
    7    }
 
    8  }
 
    9}