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