<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax Get</title>
</head>
<body>
<script type="text/javascript">
window.onload = function ()
{
document.getElementById("AJAX").onclick = function ()
{
//发送ajax请求
console.log("发送请求");
//4步发送AJAX请求
//第一步创建ajax核心对象XMLHttpRequest
var obj = new XMLHttpRequest();
//第二步注册回调函数
//当我们的readystate值发生改变我们就执行一次回调函数
obj.onreadystatechange = function ()
{
//这里的内容会被调用多次
//0到1到2到3到4(AJAX请求有四步)
console.log(obj.readyState);
//但这个值等于4的时候,就是响应结束了
//响应结束之后一般会有一个Http的状态码
//200成功,404丢失,500错误服务器
if(obj.readyState === 4)
{
console.log(obj.status);
if(obj.status === 200)
{
//通过XMLHttpRequest对象获取相应的信息,通过这个对象的responseText属性来取值
console.log(obj.responseText);
//通过innerHtml渲染显示到盒子里面
document.getElementById("myDiv").innerHTML = obj.responseText;
}
}
}
//第三步开启通道
//open函数方法的值都是啥
//第一个method,请求方法,可以是get可以是post或者其他请求
//url就是请求路径
//async只能是true或者false,true表示支持异步请求,false表示不支持(同步请求)
//一般都是支持异步的,这样用户体验更好,极少数情况是不支持的同步
//username和password就是用户名和密码,有部分特殊资源是需要口令的,用户名和密码是用来对此做限制的
//需要的较少,这个是身份认证用的
obj.open("GET","/ajax/ajaxRequest1",true);
//open只是打开通道,并不是执行,只是浏览器和服务器建立链接
//第四步发送请求
obj.send();
// 这才是真正发送请求
}
document.getElementById("jsonTest").onclick = function ()
{
var address = { "city" : "北京","street" : "大兴区","zipCode" : "123456"};
var json =
{
"username" : "zhangsan",
"userCode" : 111,
"sex" : true,
"age" : 20,
"aihaos" : ["喝酒","抽烟","烫头"],
"address" : address
};
console.log(json.username);
console.log(json.userCode);
console.log(json.age);
console.log(json.sex ? "男" : "女");
console.log(json.address.city);
console.log(json.address.street);
console.log(json.address.zipCode)
for (var i = 0; i < json.aihaos.length; i++) {
console.log(json.aihaos[i]);
}
}
document.getElementById("jsonTest1").onclick = function ()
{
var fromJava = "{\"userCode\" : 111,\"age\" : 20}";
//用window对象调用eval函数解析即可
window.eval("var json = " + fromJava);
console.log(json);
//使用JSON内置对象的parse方法来转换
var jsonObj = JSON.parse(fromJava);
console.log(jsonObj);
}
}
</script>
<!-- 给一个按钮,用来发送ajax请求-->
<input type="button" id="AJAX" value="AJAX请求发送"/>
<!--给一个DIV盒子用来显示ajax回传的数据信息-->
<div id="myDiv"></div>
<input type="button" id="jsonTest" value="jsonTest">
<input type="button" id="jsonTest1" value="jsonTest1">
</body>
</html>
AJAX使用前端的window对象或JSON对象解析后端回传的JSON格式字符串获取信息------前端
原创
©著作权归作者所有:来自51CTO博客作者旧约Alatus的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
Java设置JSON字符串参数编码
本文详细介绍了如何在Java中创建JSON字符串以及在Java中设置JSON字符串参数编码的方法。
json 字符串 JSON Java -
SpringMVC前端传json后端用对象接收,后端传json给前端
ResponseBody和RequestBody@ResponseBody把后台pojo转换成json对象@RequestBo
SpringMVC发送json给后端 SpringMVC传json给前端 json spring json数据