Ajax必知必会
1.Ajax
Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),是与服务器交换数据,更新部分网页的技术,不加载整个页面
2.DOM模型
Document Object Model
查找Html元素:
var e1 = document.getElementById();//通过ID
var e2 = document.getElementByTagName();//通过标签名
var e3 = document.getElementsByClassName();//通过类名
改变Html的值
e1.innerHTML=新的 HTML //改变html内容
e2.attribute=新属性值 //改变hrml属性
绑定事件
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
3.Ajax请求
两种请求方式的区别:
序号 | 对比 | get | post |
---|---|---|---|
1 | 请求的数据是否暴露 | 请求数据附加在URL之后,以?分割URL和传输数据,多个参数用&连接 | 不会 |
2 | 传输数据的大小 | 有URL的长度和数据大小限制 | 无,请求数据放在HTTP请求包的包体中 |
回调函数:服务器相应完请求后,浏览器根据传输回的数据进行的操作的函数;
Ajax的jquery实现
// 格式1:ajax请求获得JSON数据,$.getJSON(url,data,function(data){}); // url:目标地址,不可省略 $.getJSON("/user/insert.do", user:user, function(data){ //前端处理代码 }); // 格式2:ajax通过get请求获得的数据,$.get(url,data,function(data){},datatype); // url:目标地址,不可省略 $.get("/user/insert.do", user:user, function(data){ //前端处理代码 },"JSON"); // 格式3:ajax通过post请求获得的数据,$.post(url,data,function(data){},datatype); // url:目标地址,不可省略 $.get("/user/insert.do", user:user, function(data){ //前端处理代码 },"JSON");
4.JSON
(JavaScript Object Notation) :一种数据交换格式
json创建和调用
//创建格式{"key1":value1,"key2":value2,..."keyn":valueN,}
var jsons={
"key1":"username",//字符串类型
"key2":1000,//number类型
"key3":{ //json类型
"key3_1":"userPhone",
"key3_2":"number"
}
"key4":[{"key4_1_1":"abc","key4_1_2":456},{"key4_2_1":"abc","key4_2_2":456}]//json数组
}
//调用格式:变量名.属性
jsons.key1;
jsons.key3.key3_1;
json.key4[0].key4_1_1;
Json和Java实体类的转换
在线转换工具
工具类jar包