AJAX和JSON
2018-07-15 本文已影响0人
北冥有鱼_很好吃
第一章Ajax
1.1 Ajax 概念
"Asynchronous Javascript And XML"（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
1.2 AJAX原理分析
AJAX引擎会在不刷新浏览器地址栏的情况下，发送异步请求
1.1 使用JavaScript获得浏览器内置的AJAX引擎（XMLHttpRequest对象）
1.2 使用js确定请求路径和请求参数
1.3 AJAX引擎对象根据请求路径和请求参数进行发送请求
服务器接收到ajax引擎的请求进行处理
2.1 服务器获得请求参数数据
2.2 服务器处理请求业务（调用业务层代码）
2.3 服务器响应数据给ajax引擎
AJAX引擎获得服务器响应的数据，通过执行JavaScript的回调函数将数据更新到浏览器页面具体位置。
3.1 通过设置给AJAX引擎的回调函数获得服务器响应的数据
3.2 使用JavaScript在指定的位置，显示响应数据，从而局部修改页面的数据，达到局部刷新目的。
1.3 js原生的ajax开发
1.3.1. js原生的ajax的开发步骤
1）创建Ajax引擎对象（浏览器创建）
2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
3）绑定提交地址
4）发送请求
5）监听里面处理响应数据
开发参照w3cschool文档
XMLHttpRequest 是 AJAX 的基础
准备资源：编写外部js （在html中导入依赖！！）
1531470878996.png
- 内容：
// 获取ajax开发核心对象
function getXhr() {
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
// 通过id 获取dom对象 自定一个方法 这里以 $(id) 为例 ，也可以 _(id) 等
function $(id) {
return document.getElementById(id);
}
- 准备资源页面 ajax_get.html
<body>
<input type="button" value="ajax_get请求" onclick="sendGet();"><br>
<input type="button" value="ajax_Post请求" onclick="sendPost();"><hr>
<div id="mydiv"></div>
</body>
- get请求
// ajax开发 发送get请求 更新 div标签 内容来自服务器servlet响应数据
function sendGet() {
// 1. 创建XMLHttpRequest
var xhr = getXhr();
// 2. 点击按钮 发送异步请求 后台servlet发送请求 获取response数据更新 div
// 建立请求参数 参数1 请求方式 get/post 参数2 请求服务器地址 参数3 true 异步 默认 true
xhr.open("get", "ajaxGetServlet?id=10101&name=lisi", true);
// 4 服务器响应 接受服务器response回送数据 函数 一开始不执行的！ 回调函数注册
xhr.onreadystatechange = function ()
// 事件 绑定函数 当服务器响应时，该事件触发了函数执行 dom更新
{
//当服务器相应码为200且xhr的readyState参数为4的时候，执行dom更新
if (xhr.readyState == 4 && xhr.status == 200) {
var data = xhr.responseText;// 服务器回送数据字符
$("mydiv").innerHTML = data;//调用自定义函数
}
}
//3 发送请求
xhr.send(null);// get 请求 send null
}
- post请求
// ajax开发 发送get请求 更新 div标签 内容来自服务器servlet响应数据
function sendPost() {
// 1. 创建XMLHttpRequest
var xhr = getXhr();
// 2. 点击按钮 发送异步请求 后台servlet发送请求 获取response数据更新 div
// 建立请求参数 参数1 请求方式 get/post 参数2 请求服务器地址 参数3 true 异步 默认 true
xhr.open("post", "ajaxGetServlet", true);
// 4 服务器响应 接受服务器response回送数据 函数 一开始不执行的！ 回调函数注册
xhr.onreadystatechange = function ()
// 事件 绑定函数 当服务器响应时，该事件触发了函数执行 dom更新
{
// alert("1");
if (xhr.readyState == 4 && xhr.status == 200) {
var data = xhr.responseText;// 服务器回送数据字符
$("mydiv").innerHTML = data;
}
}
//3 post发送请求
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("id=9999");// post 请求
}
- 编写服务器servlet接受ajax请求
package cn.itheima.ajax.get;
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("/ajaxGetServlet")
public class AjaxGetServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String id = request.getParameter("id");
System.out.println("客户端提交id = "+id);
response.setContentType("text/html;charset=utf-8");
response.getWriter().print("<font color='red'>你好A贾克斯</font>");
}
}
1.4 get/post小结：
- 相同点：
1. 开发的四步骤结构代码是一样：
2. 获取XMLHttpRequest代码相同的
3. open("get/post","url",true);
4. xhr.onreadystatechange=function(){ // dom更新。。。}
5. 都是通过xhr.send()方法发送请求！
- 不同点:
1.xhr.open("get/post");
2.get请求 xhr.send(null)
post请求需要添加固定头信息和send参数
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(key=value)
第5节 jQuery框架的ajax（***）
jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操 作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种，但开发中 经常使用的有三种：
| 请求方式 | 语法 |
|---|---|
| GET请求 | $.get(url, [data], [callback], [type]) |
| POST请求 | $.post(url, [data], [callback], [type]) |
| AJAX请求 | $.ajax([settings]) |
| Load请求 | $(element).load(url); |
5.1 GET请求方式
语法：$.get(url, [data], [callback], [type])
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。
示例1：
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
示例2：
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
5.2 POST请求方式
示例1：使用 ajax 请求发送表单数据：
$.post("test.php", $("#testform").serialize());
示例2：获得 test.php 页面返回的 json 格式的内容：：
$.post("test.php", { "func": "getNameAndTime" },
function(data){
alert(data.name); // John
console.log(data.time); // 2pm
}, "json");
5.3 AJAX请求方式
$.ajax({key:value,key:value})
| 属性名称 | 解释 |
|---|---|
| url | 请求的服务器端url地址 |
| async | (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false |
| data | 发送到服务器的数据，可以是键值对形式，也可以是js对象形式 |
| type | (默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET" |
| dataType | 预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等 |
| success | 请求成功后的回调函数 |
| error | 请求失败时调用此函数 |
示例：
$.ajax({
//type默认为get
type:"post",
url:"searchServlet",
data:{name:word},
dataType:"json",
success:function (result) {
//判断数据是否为空,result返回的是一个列表数据，就是js数组
if(result.length>0){
//result为json数组例如 [{id:1,name:aa,password:123},...]
//每一个用户名就是一个div
var html="";//用于拼接结果
for(var i=0;i<result.length;i++){
var user = result[i];
html+="<div>"+user.name+"</div>";
}
//将html更新到show里面并显示出来
$(".show").html(html).show();
}
},
error:function () {
alert("没有成功获取数据");
}
});
第六章. json数据格式
简介：JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
json对象有三种数据格式，分别如下：
| 类型 | 语法 | 解释 |
|---|---|---|
| 对象类型 | {name:value,name:value...} | 其中name是字符串类型，而value是任意类型 |
| 数组/集合类型 | [value,value,value...]或[{},{}... ...] | 其中value是任何类型（比如js对象，或数组） |
| 混合类型 | {name:[]... ...} | 合理包裹嵌套对象类型和数组类型 |
<script language="JavaScript">
/**
* 案例一 -json对象的定义和调用说明
* var person={key:value,key:value}
*
* class Person{
* String firstname = "张";
* String lastname = "三丰";
* Integer age = 100;
* }
*
* Person p = new Person();
* System.out.println(p.firstname);
*/
//json的定义
var person = {"firstname":"张","lastname":"三丰","age":100};
//json解析
alert(person.firstname);
alert(person.lastname);
alert(person.age);
</script>
<script language="JavaScript">
/**
* 案例二 - json对象数组使用说明
* [{key:value,key:value},{key:value,key:value}]
*
*/
var json = [
{"firstname":"张","lastname":"三丰","age":100},
{"firstname":"张","lastname":"翠山","age":58},
{"firstname":"张","lastname":"无忌","age":23}
];
for(var i=0;i<json.length;i++){
alert(json[i].lastname);
}
</script>
<script language="JavaScript">
/**
* 案例三 -json对象数组嵌套
* {
* "param1":[{key:value,key:value},{key:value,key:value}],
* "param2":[{key:value,key:value},{key:value,key:value}],
* "param3":[{key:value,key:value},{key:value,key:value}]
* }
*
*
*/
var json = {
"baobao":[
{"name":"小双","age":18,"addr":"扬州"},
{"name":"建宁","age":18,"addr":"北京海淀"},
{"name":"龙儿","age":38,"addr":"岛国"},
{"name":"阿珂","age":17,"addr":"台湾"}
],
"haohao":[
{"name":"楠楠","age":23,"addr":"北京昌平修正"},
{"name":"倩倩","age":18,"addr":"上海"}
]
}
//取倩倩
alert(json.haohao[1].name);
</script>
java对象需要转为json格式的字符串回调给浏览器。
常见的json转换工具
| 工具名称 | 介绍 |
|---|---|
| Jsonlib | Java 类库，需要导入的jar包较多 |
| Gson | google提供的一个简单的json转换工具 |
| Fastjson | alibaba技术团队提供的一个高性能的json转换工具 |
| Jackson | 开源免费的json转换工具，springmvc转换默认使用jackson |
fastjson依赖包：
fastjson依赖包
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//模拟数据库
ArrayList<User> users = new ArrayList<User>();
users.add(new User(1,"lanzhiyi",26));
users.add(new User(2,"Bill",56));
users.add(new User(3,"Tang",36));
users.add(new User(4,"周杰伦",36));
//集合转换json数组字符串 这里依赖fast
response.setContentType("text/json;charset=utf-8");
//fastjson依赖包的方法：java->json
String s = JSON.toJSONString(users);
System.out.println("s = " + s);
//s = [{"age":26,"id":1,"name":"lanzhiyi"},{"age":56,"id":2,"name":"Bill"},{"age":36,"id":3,"name":"Tang"},{"age":36,"id":4,"name":"周杰伦"}]
response.getWriter().print(s);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.11.3.js" type="application/javascript"></script>
<script>
function jsonDemo() {
$("#mytab").empty();
var str = "";
$.get("jsonServlet",function(data){
$(data).each(function () {
str+="<tr><td>"+this.id+"</td><td>"+this.name+"</td><td>"+this.age+"</td></tr>"
})
$("#mytab").append("<tr>\n" +
" <td> 编号</td>\n" +
" <td> 姓名</td>\n" +
" <td> 年龄</td>\n" +
" </tr>").append(str)
});
}
</script>
</head>
<body>
<input type="button" value="显示用户列表信息" onclick="jsonDemo();"><br>
<table id="mytab" border="1px " style=" border-color: darkgray" width="30%">
</table>
</body>
效果.PNG
