AJAX(Asynchronous Javascript And XML),是一个局部刷新技术,即网页不需要重新加载,只进行部分更新即可
例如:视频弹幕,点赞,登录验证...
步骤:
1.创建XMLHttpRequest核心对象;
var 变量名 = new XMLHttpReques();
2.使用核心对象打开请求;
变量名.open(参数一,参数二,参数三);
参数一:数据提交方式(get或者post)
参数二:请求地址
参数三:是否异步(true[默认]异步,false)
3.使用核心对象发送请求;
变量名.send();
4.接收数据.
变量名.onreadystatechange = function(){...}
代码示例:
html:
<script type="text/javascript"> function jsajax(){ var xhr = new XMLHttpRequest(); xhr.open("post","JsAjax",true); xhr.send(); xhr.onreadystatechange = function(){ if(xhr.status == 200 && xhr.readyState == 4){ var i = xhr.responseText; document.getElementById("msg").innerText=i; } } } </script> </head> <body> jsajax:<span id="msg"></span> <br> <button onclick="jsajax()">点我有惊喜</button> </body> </html>
java
//因为ajax可以获取响应主题的内容,所以采用PrintWriter返回数据
PrintWriter writer = response.getWriter(); writer.print("JS原生AJAX");
原生AJAX使用起来十分麻烦,一般只需要了解即可,更多的是使用下面JQ版的AJAX.
JQuery版AJAX有三种写法,下面一一介绍这三种写法
$.ajax({
url:"请求路径",
data:{"键名1":值1,"键名2":值2,"键名3":值3......},
type:"提交方式get/post",
dataType:"返回数据格式",(常用:text,json)
async:true/false,
success:function(){},
error:function(){}
})
url:请求路径;data:请求数据;type:数据请求方式;dataType:返回数据格式;async:是否异步;success:执行成功执行本函数;error:执行失败执行本函数
代码示例:
$.ajax({ url:"JQAjax", data:{"name":"李四","age":24}, type:"post", dataType:"text", async:true, success:function(obj){ $("#msg").text(obj); } })
第二种和第三种是将提交方式分解出来,$.get()和$.post()内容基本一致
$.get(
"请求路径",(对应第一种方式url)
{"键名1":值1,"键名2":值2,"键名3":值3......},(对应data)
function(){},(对应success:function(){})
"返回数据格式"(对应dataType)
)
$.post(
"请求路径",
{"键名1":值1,"键名2":值2,"键名3":值3......},
function(){},
"返回数据格式"
)
代码示例:
$.get(
"JQPostAjax",
{"name":"张三","age":23},
function(obj){
$("#msg").text(obj);
},
"text"
);
$.post(
"JQPostAjax",
{"name":"张三","age":23},
function(obj){
$("#msg").text(obj);
},
"text"
);
json数据格式(三种)
1.数组
[值1,值2,值3......]
值的数据类型随意
2.对象
{"键名1":值1,"键名2":"值2"......}
3.混合模式
[{对象1},{对象2},{对象3}.....]
{[数组1],[数组2],[数组3]......}
这里只是简单叙述了混合模式的两种写法,实际写法并不固定,只要嵌套正确({}和[]交替使用),就OK.
例如:
{
"zone":"boss",
"persons":[
{"name":"张三","age":23,"sroce":[98,99,100]},
{"name":"李四","age":24,"sroce":[87,87,87]},
{"name":"王五","age":25,"sroce":[76,876,65]}
]
}
作用:jackson将数组,集合,对象...转换成json格式
使用方式:
1.创建ObjectMapper对象
ObjectMapper 对象名 = new ObjectMapper();
2.将指定的数据转化为json
String 变量名 = 对象名.writeValueAsString("指定的数据");
代码示例:
Student s1 = new Student("张三", 23, new int[]{93,94,95}); Student s2 = new Student("李四", 24, new int[]{94,95,96}); Student s3 = new Student("王五", 25, new int[]{95,96,97}); Student s4 = new Student("赵六", 26, new int[]{96,97,98}); Student s5 = new Student("孙七", 27, new int[]{97,98,99}); List<Student> students = new ArrayList<Student>(); students.add(s1); students.add(s2); students.add(s3); students.add(s4); students.add(s5); //转化为json /* * 1.创建ObjectMapper对象 * 2.使用writeValueAsString将数据转化为json格式 */ ObjectMapper mapper = new ObjectMapper(); String json = mapper.writeValueAsString(students); response.setContentType("text/html;charset=utf-8"); PrintWriter writer = response.getWriter(); writer.print(json);
原文：https://www.cnblogs.com/wp9503/p/11285155.html