ajax 简单入门
1.简述 AJAX(Asynchronous Javascript And XML),是一个局部刷新技术,即网页不需要重新加载,只进行部分更新即可
例如:视频弹幕,点赞,登录验证... 2.JavaScript原生AJAX 步骤:
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.
3.JQuery版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(
"请求路径",(对应第一种方式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"
);4.json 概述:json是一种有格式的字符串,是轻量级的数据传输方式. 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]} ] }
5.jackson 作用: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);