原生AJAX GET方法

最新推荐文章于 2025-01-10 23:24:24 发布

空空dream

最新推荐文章于 2025-01-10 23:24:24 发布

阅读量2.9k

点赞数

分类专栏： # JavaScript

版权源自：dahouzi.cn

本文链接：https://blog.youkuaiyun.com/lglglgl/article/details/54972494

版权

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

闲来无事，学一下原生ajax。之前只知道ajax是异步，一直用的也是jQuery的ajax，不曾知道其原理。无奈最近闲的蛋疼。

copy一段别人的代码:

<script type="text/javascript">
function ajax(){
    var XHR=null;  

    //第一步：创建XMLHttpRequest对象
    if (window.XMLHttpRequest) {  
        XHR = new XMLHttpRequest();  // 非IE内核  
    } else if (window.ActiveXObject) {  
        XHR = new ActiveXObject("Microsoft.XMLHTTP");   // IE内核,这里早期IE的版本写法不同,具体可以查询下  
    } else {  
        XHR = null;  
    }  

    //第二步：发送请求
    if(XHR){  
        XHR.open("GET", "/test/ajax");  //"/test/ajax"test为项目名称、ajax为方法名称
    //第三步：
        XHR.onreadystatechange = function () { 

            // readyState值说明  
            // 0,初始化,XHR对象已经创建,还未执行open  
            // 1,载入,已经调用open方法,但是还没发送请求  
            // 2,载入完成,请求已经发送完成  
            // 3,交互,可以接收到部分数据  

            // status值说明  
            // 200:成功  
            // 404:没有发现文件、查询或URl  
            // 500:服务器产生内部错误  
            if (XHR.readyState == 4 && XHR.status == 200) {  //注①
                // 这里可以对返回的内容做处理  
                // 一般会返回JSON或XML数据格式  
                console.log("XHR.responseText-->"+XHR.responseText);  
                // 主动释放,JS本身也会回收的  
                XHR = null;  
            }  
        };  
        XHR.send();  
    }

}
</script>

调用

<a onclick="ajax();">ajax</a>

后台：

@RequestMapping("/ajax")
    public @ResponseBody Company ajax() {
        Company company=new Company();
        company.setAddr("公司地址");
        company.setCompanyLogoImageUrl("公司logo");
        return company;
    }

后台返回数据：

{
"addr": "公司地址",
"lng": 0,
"lat": 0,
"amount": 0,
"companyLogoImageUrl": "公司logo"
}

注：
①：如果是本地环境，可能会出现XHR.status == 0这种情况
②：NS_ERROR_UNEXPECTED如出现此错误则是跨域问题
第一次把url设置成：http:127.0.0.1/test/ajax，时出现此错误

关键词：Ajax中XMLHttpRequest对象的status为0时的解决方法