第八天: ajax json
ajax:Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。
Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。
同步请求:
表单
超链接
特点:只要发送请求,整个页面内容都会重新加载,请求发送出去之后必须等待服务器响应回来之后才能继续操作。
异步请求:
特点:在请求响应的过程中浏览器能继续操作,不需要等待服务器响应
请求响应回来之后不需要重新加载整个网页,实现网页的局部更新
Ajax实现
1.原始js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function createxmlhttp(){
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
window.onload=function () {
//点击事件
document.getElementById("btn").onclick=function () {
//请求参数如何被传递? 服务器响应内容如果被接收?
//发送ajax(异步请求)请求步骤:
//1.创建XMLHttpRequest对象
var xmlhttp=createxmlhttp();
//2.建立连接 里面参数:1.请求方式 2.请求的路径 3.判断是否是异步 true表是异步是真 false表示不是
xmlhttp.open("GET","/tomcat/servletAJAXDemo1",true);
//3.发送请求
xmlhttp.send();
}
}
</script>
</head>
<body>
<!--点击这个按钮无需加载整个网页就可以对局部或者部分进行刷新,将内容展现在下面的div中-->
<button id="btn">发送异步请求</button><br/>
<div></div>
</body>
</html>
package com.swlz.ajax;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/servletAJAXDemo1")
public class ServletAJAXDemo1 extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
System.out.println("hi"+username);
System.out.println("servletAJAXDemo1......被访问了哦。。。。。。。。。。。");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}
2.jquery实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
/**
* 1.请求方式
* 2.请求路径
* 3.请求参数
* 4.响应数据
*/
$(function () {
$("#btn").click(function () {
// $.get("/ajaxServlet","username=bianyiit")
$.get("/ajaxServlet",{username:"tom",password:"123"},function (data) {
$("#div1").html(data)
})
});
$("#btn1").click(function () {
$.post("/ajaxServlet",{username:"tom",password:"123"},function (data) {
$("#div1").html(data)
})
});
})
</script>
</head>
<body>
<button id="btn"> 发送get异步请求</button><br>
<button id="btn1"> 发送post异步请求</button><br>
<input type="text"> <br>
<div id="div1">
</div>
</body>
</html>
三种方式:
$.ajax();
$.get();
$.post();
Jquery对象发送异步请求常用的三种方式 $.ajax $.post $.get
1.$.ajax是jquery发送异步请求的基本方式
$.ajax能够设置http请求的各种请求信息
2.$.get和$.post是基于$.ajax封装的更加简单的异步请求方式
$.get和$.post只能发送普通的表单类型请求
3.Json:JavaScript Object Notation(对象简谱)
Json存储数据(作为在网络中传输数据的数据交换一种格式)
在网络中传输数据
把java对象转化为json对象,在响应到浏览器中去。
用json解析器
把java对象转换把json字符串
JSON对象可以转换为Java对象
Java对象可以转为JSON字符串 对象
javaScript对象表示法
JavaScript :
ECMAScript(核心语法) + DOM(文档对象模型) + BOM(浏览器对象模型)
Json的作用:
Json存储数据(作为在网络中传输数据的数据交换一种格式)
1. json字符串的写法
json数据格式分为2种
- json对象
- json数组(集合)
1. json数据的操作
2. java对象和json对象的相互转换
json解析引擎
jsonlib
Gson (google 提供 一般用在Android中)
fastJson(阿里巴巴 号称全世界做好做快的json解析引擎)
Jackson(springmvc无缝对接)
Jackson的基本使用
- 导入jar包
- 创建objectMapper对象
- 通过objectMapper上面的方法完成json的转换.writeValueAsString,将对象转换成json字符串并返回
- json字符串转换成java对象
例子:
package com.swlz.ajax;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.swlz.domain.User;
import java.io.IOException;
public class JsonDemo {
public static void main(String[] args) throws IOException {
User user = new User();
user.setId(1);
user.setUsername("toto");
user.setPassword("12345");
// java的user对象 转换为->json字符串 怎么搞?
//创建objectMapper对象
ObjectMapper objectMapper=new ObjectMapper();
//调用把值转为字符串的方法
// String userJson = objectMapper.writeValueAsString(user);
objectMapper.writeValue(System.out,user);//和上面效果一样在控制台输出
// System.out.println(userJson);
}
}
今日学习感受:纸上学来终觉浅,光看不动手,很容易忘记,多去实践把!加油!最后一句:不要喊口号,打嘴炮,想要的船要自己造。