原生js实现Ajax

如果要用原生的JS实现Ajax怎么整呢，让我们一起来整一个试试。

方法：

/**

 * 原生js封装ajax方法

 * @param {Object} conf

 * ajax({

        type:"post",

        url:"test.php",

        data:"name=xx&pwd=xx",

        dataType:"json",

        success:function(data){

            console.log(data);

        }

    });

 */

function _ajax(conf){

    //创建xhr对象

    var createAjax = function() {

        var xhr = null;

        try {

            //IE系列浏览器

            xhr = new ActiveXObject("microsoft.xmlhttp");

        } catch (e1) {

            try {

                //非IE浏览器

                xhr = new XMLHttpRequest();

            } catch (e2) {

                window.alert("您的浏览器不支持ajax，请更换！");

            }

        }

        return xhr;

    };

    // 初始化

    //type参数,可选

    var type = conf.type;

    //url参数，必填 

    var url = conf.url;

    //data参数可选，只有在post请求时需要

    var data = conf.data;

    //datatype参数可选    

    var dataType = conf.dataType;

    //回调函数可选

    var success = conf.success;

    if (type == null){

        //type参数可选，默认为get

        type = "get";

    }

    if (dataType == null){

        //dataType参数可选，默认为text

        dataType = "text";

    }

    // 创建ajax引擎对象

    var xhr = createAjax();

    // 打开

    xhr.open(type, url, true);

    // 发送

    if (type == "GET" || type == "get") {

        xhr.send(null);

    } else if (type == "POST" || type == "post") {

        xhr.setRequestHeader("content-type",

                    "application/x-www-form-urlencoded");

        xhr.send(data);

    }

    xhr.onreadystatechange = function() {

        if (xhr.readyState == 4 && xhr.status == 200) {

            if(dataType == "text"||dataType=="TEXT") {

                if (success != null){

                    //普通文本

                    success(xhr.responseText);

                }

            }else if(dataType=="xml"||dataType=="XML") {

                if (success != null){

                    //接收xml文档    

                    success(xhr.responseXML);

                }  

            }else if(dataType=="json"||dataType=="JSON") {

                if (success != null){

                    //将json字符串转换为js对象  

                    success(eval("("+xhr.responseText+")"));

                }

            }

        }

    };

}

详细说明：

1.Ajax步骤：1.创建，2.打开连接，发送数据，3.接收数据

1.1关于创建：

除了ie低版本，其它都支持XMLHttpRequest对象

1.2关于连接：

open(method,url,async)主要有三个参数，关于post和get方法需要注意，get方法参数是放URL上进行传输，post是单独作为send的参数传输到后台的，因此，如果用post方法我们必须设置请求头传的数据类型setRequestHeader('content-type',value),value可以是application/x-www-form-urlencoded,multipart/form-data等。

1.3关于接收数据：

当readyState变化时会调用onreadystatechange

readyState主要有五种状态：

| 值 | 状态 | 描述 |
| 0 | UNSENT (未打开) | open()方法还未被调用. |
| 1 | OPENED (未发送) |

open()方法已经被调用.

response

响应实体的类型由 responseType 来指定，可以是 ArrayBuffer， Blob， Document， JavaScript 对象 (即 "json")，或者是字符串。如果请求未完成或失败，则该值为 null。

responseType

设置该值能够改变响应类型。就是告诉服务器你期望的响应格式。

responseText

此次请求的响应为文本，或是当请求未成功或还未发送时为 null。只读。

responseXML

本次请求的响应是一个 Document 对象，如果是以下情况则值为 null：请求未成功，请求未发送，或响应无法被解析成 XML 或 HTML。当响应为text/xml 流时会被解析。当 responseType 设置为"document"，并且请求为异步的，则响应会被当做 text/html 流来解析。只读.

status

该请求的响应状态码 (例如, 状态码200 表示一个成功的请求).只读.

1开头的是information responses

2开头是响应成功

3重定向信息

4客户端错误信息

5服务器端响应错误

statusText

该请求的响应状态信息,包含一个状态码和原因短语 (例如 "200 OK"). 只读.

upload

可以在 upload 上添加一个事件监听来跟踪上传过程。

不考虑浏览器兼容性，当时在一个项目中，我发现在谷歌浏览器下，上传文件的时候，在谷歌浏览器的状态栏可以看到上传进度，我想谷歌应该有提供方法出来供开发调用，开启调试发现确实有。

代码如下：

进度条当时是easyui的。

xhr.onloadstart = $.message.progress({text:'{value}%',title:'文件上传',interval:false});

xhr.upload.onprogress = function(evt){

if(evt.lengthComputable){

var comVal = Math.round(evt.loaded * 100 / evt.total);

$("div.messager-p-bar").progressbar("setValue", comVal);

}

补充：

post和get主要差别

发送数据的方式：get是放URL上，post是单独作为请求体
安全性，post比get相对安全，因为get在URL上可见的
大小，get有限制，一般几kb，post受服务器端限制，一般可以几十兆

原生js实现Ajax

你可能感兴趣的:(原生js实现Ajax)