前言---加油,ajax和json总结终于完成,每天都要坚持!如有不足或错误之处,还请大家多多纠正,谢谢
json数据
目录
数据交换格式:
json
xml
什么是JSON:
javascript对象表示法,是存储和交换信息的语法,类似xml,比xml更小更易解析
json对象:{"username":"zhangsan"}
json数组:[{"username":"zhangsan"},{"password":123},{ }]
json嵌套:{"username":{"age":18}}
基本上每一个语言都有一个包对json进行了解析
json,其实就是一个文本格式 ,每个语言都有一个jar包对他进行解析读取,之后以字符串的形式传到页面,如果想操 作,转化成js对象就好了 eval("("+xmlHttp.responseText+")");
Ajax技术
什么是Ajax:
ajax是一种异步交互局部刷新的一种技术,减少服务器的压力,提高用户的体验
Ajax交互与传统交互的比较:
传统交互:页面整体刷新,服务器压力大,用户体验不好
Ajax异步交互:页面局部刷新,服务器压力小,用户体验好
Ajax异步交互的实现原理:
异步交互基于XMLHttpRequest对象的建立。
XMLHttpRequest对象:所有的浏览器基本支持XMLHttpRequest对象,他可以实现页面不重新加载的情况下实 现页面的局部刷新,用于后台与服务器交换数据。
XMLHttpRequest对象的建立:
1、var xmlHttp = new XMLHttpRequest();
2 var xmlHttp = new ActiveXobject("Microsoft.XMLHTTP");
XMLHttpRequest.open(method,url,async);
methid参数:表示post请求或者get请求
url参数:请求的地址
async参数:异步true,同步false
XMLHttpRequest.send() :表示像服务器发送数据
onreadystatechange表示事件,当 XMLHttpRequest 对象的状态发生改变时,会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时,我们才执行代码。
xmlhttp.status==200 //属相等于200表示成功
xmlhttp.readyState==4 //属性表示对象的状态
0:请求未初始化 1:服务器连接已建立 2:服务器请求已接收 3:服务器处理请求 4:请求吹完成并响绪就绪
获得来自服务器的响应:
获得字符串形式的响应数据:XMLHttpRequest.responseText
获得来自xml形式的相应数据:XMLHttpRequest.responseXMl
案例建立动态页面,使用Tomcat服务器servlet,代码如下:
<script type="text/javascript">
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else if(window.ActiveXobject){
xmlHttp = new ActiveXobject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange = function(){
if(xmlHttp.ready==4 && xmlHttp.status==200){
.......//成功
}else{
// 失败
}
xmlHttp.open(method,url,true);
xmlHttp.send(); //向服务器发送数据
</script>
程序员老黄历案例
技术分析:
使用ajax技术异步提交数据
$.get(url,function(data,status){ }); url:表示提交的地址, function() 回调函数 ,data:返回的数据,
status:请求的状态
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>程序员老黄历</title>
<link href="./css/laohuangli.css" rel="stylesheet">
<script src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
var url= "http://127.0.0.1:8020/day05-bootStrap/data.json";
//ajax请求
$.get(url,function (data) {
var shuju = data[4];
// var a = $(".good .content").html();
//适合干什么
var goodCount = Math.floor(Math.random()*3+1);
while (goodCount<0){//获取几条数据
var index = Math.floor(Math.random()*data.length); //获取一条数据
var obj = data[index];
$(".good ul").append("<li><div class='name'>"+obj.name+"</div><div class='description'>"+obj.good+"</div></li>");
goodCount--;
}
//不适合干什么
var goodCount1 = Math.floor(Math.random()*3+3);
while (goodCount<0){//获取几条数据
var index1= Math.floor(Math.random()*data.length); //获取一条数据
var obj1 = data[index1];
$(".bad ul").append("<li><div class='name'>"+obj1.name+"</div><div class='description'>"+obj1.bad+"</div></li>");
goodCount--;
}
},"json");
});
</script>
</head>
<body>
<div class="container">
<div class="title">
程序员老黄历
</div>
<div class="good">
<div class="title">
<table>
<tr>
<td>宜</td>
</tr>
</table>
</div>
<div class="content">
<ul>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="split"></div>
<div class="bad">
<div class="title">
<table>
<tr>
<td>不宜</td>
</tr>
</table>
</div>
<div class="content">
<ul>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>