原生AJAX GET方法

闲来无事,学一下原生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时的解决方法

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值