js原生ajax如何被封装?

2020-04-12 11:37:21 java常见问答 5565

相信大家已经对ajax已经很熟悉了吧,本站也讲了很多关于ajax的一系列的知识,今天小编则是讲的是原生js是如何封装ajax函数的呢?接下来就让我们一起了解下吧。

Ajax,是由Asynchronous JavaScript + XML 的简写。指一种创建交互式网页应用的网页开发的一种技术。

通过异步模式,提升了用户体验。优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用。Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大量用户下的服务器负载。

Ajax最大的特点就是局部刷新。

Ajax 技术核心是 XMLHttpRequest 对象(简称 XHR)

Ajax的封装函数

//把传入的所有数据看成一个对象obj

//示例 obj={type:"get",url:"data.json",data:{},success:function(){},error:function(){}}

/*obj里含要发送的请求类型:get 或 post

要有路径 url

传的值data 可有可无

后面是成功时success调用的方法,失败时error调用的方法

* */

//示例 obj={type:"get",url:"data.json",data:{},success:function(){},error:function(){}}
/*obj里含要发送的请求类型:get  或  post
要有路径  url
传的值data 可有可无
后面是成功时success调用的方法,失败时error调用的方法
 * */
function Ajax(obj)
{
    if (window.XMLHttpRequest)
    {
        var xhr = new XMLHttpRequest();
    }
    else
    {
        var xhr = new ActiveXObject("Microsoft.XMLHTTP");
    } //这个if语句 浏览器兼容
    var str = "";
    for (var attr in obj["data"])
    { //遍历传入的数据data:{}
        str += attr + "=" + obj["data"][attr] + "&"; //属性=属性值 并以&连接
    } //遍历data,并用&连接起来,但是最后是以&结尾的,要消除最后一个&
    str = str.replace(/&$/, ""); //把最后一个&替换为空(就是去掉最后那个&)
    if (obj["type"].toLowerCase() == "get")
    {
        //判断请求类型是get还是post,为防止大小写不匹配,全部转换为小写
        if (obj["data"] === undefined)
        { //判断是否有data值
            xhr.open("get", obj["url"], true);
        }
        else
        {
            xhr.open("get", obj["url"] + "?" + str, true); //get类型以?连接
        }
        xhr.send();
    }
    else
    {
        xhr.open("post", obj["url"], true); //post方式
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        //post类型要加这句话,数据转换为form格式,死记
        xhr.send(str); //注意传str
    }
    xhr.onreadystatechange = function ()
    { //接收服务器返回的信息
        if (xhr.readyState == 4)
        {
            if (xhr.status == 200)
            {
                var data = xhr.responseText;
                obj["success"](data); //成功时调用的方法
            }
            else
            {
                if (obj["error"])
                { //失败时调用的方法
                    obj["error"]();
                }
            }
        }
    }
}

以上就是今天所讲的Java入门知识,是不是有了解掌握了呢?如果想要更多了解相关的Java知识,请继续关注本网站。