ajax
javaScript and XML 是js 与结合的技术
ajax 特点：异步与局部进行刷新 ==>不需要刷新整个网页,知识刷新网页的一部分
同步:就是客户端去服务器获取数据，数据全部获取完毕之后，才跳转页面去显示
先获取数据==>再进行页面的显示
异步： 不管有没有获取数据，先跳转界面，再去刷数据 用户体验度会更高一点
原生代码来是实现ajax
步骤:
1.获取input标签的值
2.获取ajax 的核心对象 XMLHttpRequest xmlHttpRequest = new XMLHttpRequest();
3.设置回调函数 xmlHttpRequest.onreadystatechange=callBack; 注意这个 callBack 是自己定义，不是系统的
4.创建连接 xmlHttpRequest.open("get",url,true); 第一个参数是 : method 请求的方式 url 请求的地址 async 是支持异步刷新 true 表示支持
5.发送请求 xmlHttpRequest.send(null);
//与服务器进行交互
xmlHttpRequest = new XMLHttpRequest();
//设置其回调
xmlHttpRequest.onreadystatechange=callBack;
//建立连接 打开连接
//使用get提交
//第一个参数是 : method 请求的方式 url 请求的地址 async 是支持异步刷新 true 表示支持
/* //string, : string, async
var url ="/userServlet?uname="+username
xmlHttpRequest.open("get",url,true);
//发送请求
xmlHttpRequest.send(null);*/
// 使用post ajax 请求 url 不需要来拼接参数
var url ="/userServlet";
xmlHttpRequest.open("post",url,true);
// 必须加上这句话
xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//var data =username;
var data = "uname="+username;
xmlHttpRequest.send(data)*/
}
// 设置其回调函数的方法
//xmlHttpRequest.readyState=4 与服务器建立连接成功
//xmlHttpRequest.status==200 表示响应成功
function callBack() {
if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
//获取服务器写入到客户端的值 ,获取过来的值都是字符串
var flag = xmlHttpRequest.responseText;
if(flag=="true"){
$("#tv_span").html("用户可以使用")
}else {
$("#tv_span").html("用户不可以使用")
}
}
}
servlet
PrintWriter pw = resp.getWriter();
boolean flag = false;
// 表示这个用户可以使用
if(uname.equals("admin")){
flag = true;
}else{
flag = false;
}
//写入到客户端
pw.print(flag);
//关闭资源
pw.close();
使用jQuery实现ajax
function show() {
var username = $("#tv_uname").val();
//进行非空验证
if (username == "" || username == null) {
$("#tv_span").html("您输入的不能为空")
} else {
/* $.post("/userServlet",{"uname":username},function (data) {
alert(data);
},"text");*/
//url:请求的地址
//data：传递的参数的值
$.ajax({
"url": "${pageContext.request.contextPath}/userServlet",
"type": "post",
"data": {"uname": username},
"dataType": "text",
"success": callBack,//回调函数
"error": function () {
alert("请求失败");
}
});
function callBack(data) {//data是servlet写writ过来的值，自动获取
alert(data)
}
json和json和java间的转换
1. 概念： JavaScript Object Notation
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
var p = {"name":"张三","age":23,"gender":"男"};
* json现在多用于存储和交换文本信息的语法
* 进行数据的传输
* JSON 比 XML 更小、更快，更易解析。
2. 语法：
1. 基本规则
* 数据在名称/值对中：json数据是由键值对构成的
* 键用引号(单双都行)引起来，也可以不使用引号
* 值得取值类型：
1. 数字（整数或浮点数）
2. 字符串（在双引号中）
3. 逻辑值（true 或 false）
4. 数组（在方括号中） {"persons":[{},{}]}
5. 对象（在花括号中） {"address":{"province"："陕西"....}}
6. null
* 数据由逗号分隔：多个键值对由逗号分隔
* 花括号保存对象：使用{}定义json 格式
* 方括号保存数组：[]
2. 获取数据:
1. json对象.键名
2. json对象["键名"]
3. 数组对象[索引]
4. 遍历
//1.定义基本格式
var person = {"name": "张三", age: 23, 'gender': true};
var ps = [{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 24, "gender": true},
{"name": "王五", "age": 25, "gender": false}];
//获取person对象中所有的键和值
//for in 循环
/* for(var key in person){
//这样的方式获取不行。因为相当于 person."name"
//alert(key + ":" + person.key);
alert(key+":"+person[key]);
}*/
//获取ps中的所有值
for (var i = 0; i < ps.length; i++) {
var p = ps[i];
for(var key in p){
alert(key+":"+p[key]);
}
}
3. JSON数据和Java对象的相互转换
* JSON解析器：
* 常见的解析器：Gson，fastjson
gson 进行转化 ==> 使用基本步骤:
1. Gson gson = new Gson();
2. gson.fromJson("json的字符串","外层的Class文件"); ==>把json串转化为对象
3. gson.toJson(city); 把对象转换成json串
4. gson.fromJson(str,new TypeToken<List<City>>(){}.getType()); 把json 串准换为集合
//把集合转换成json串
/*String str1 = JSON.toJSONString(employees);
System.out.println(str1);*/
String str ="[{'id':'0375','city':'平顶山'},{'id':'0374','city':'平顶山1'}]";
// 第一步实例化这个Gson
Gson gson = new Gson();
List<City> cities = gson.fromJson(str,new TypeToken<List<City>>(){}.getType());
for (City c:cities){
System.out.println(c.getId()+"\t"+c.getCity());
}
System.out.println( gson.toJson(cities));;
/* City city = gson.fromJson(str,City.class);
System.out.println( city.getId()+"\t"+city.getCity());*/
//把对象转化成json串
/* String jsonStr = gson.toJson(city);
System.out.println(jsonStr);*/
fastjson 进行转化 ==> 使用基本步骤:
1.JSON.parseObject(json字符串, 最外层类的.class);
2.如果最外层是集合，里面是对象
JSON.parseArray(json字符串, 最外层类名.class);
如果最外层是对象，里面有集合
JSON.parseObject(json字符串, 最外层类.class);
3.把对象转换为字符串
JSON.toJSONString(对象名);
/* //外层是对象，内层是集合
//对外层是一个对象，里面的属性有一个也是一个对象的集合
String json = "{\n" +
"\"employees\": [\n" +
"{ \"firstName\":\"Bill\" , \"lastName\":\"Gates\" },\n" +
"{ \"firstName\":\"George\" , \"lastName\":\"Bush\" },\n" +
"{ \"firstName\":\"Thomas\" , \"lastName\":\"Carter\" }\n" +
"]\n" +
"}";
//要解析json字符串必须生成成员属性相同的实体类才可以使用，注意加序列化和get set方法
Employees employees = JSON.parseObject(json, Employees.class);
List<Student> employees1 = employees.getEmployees();
for (Student stu:employees1){
System.out.println(stu);
}*/
//外层是集合，内层是对象
//对象的集合就只用创建一个对象就行了
String json="[{'id':0375,'city':'平顶山'},{'id':0377,'city':'南阳'}]";
//创建一个实体类来存集合
List<city> cityLists = JSON.parseArray(json, city.class);
for (city ci:cityLists){
System.out.println(ci.getCity()+"+"+ci.getId());
}
//将对象转换为字符串的json格式
String s = JSON.toJSONString(cityLists);
System.out.println(s);
前后端交互，就是把后端装满数据的对像或集合转换为字符串和json数据，通过print方法写给请求的界面，前端界面通过解析请求过来的数据用数据对界面进行渲染，js使用实体类和数据数据是通过JavaScript对象.实体类名（不需要get/set）
前端异步解析json
<script>
function show() {
let val = $("#tv_name").val();
if (val == null && val == "") {
$("#tv_span").html("不能为空成功")
} else {
$.ajax({
url: "${pageContext.request.contextPath}/userServlet",
type: "get",
data: {"uname": val},
dataType: "text",//数据的返回类型
success: callBack,
error: function () {
$("#tv_span").html("失败")
}
});
}
}
function callBack(data) {//data代表servlet通过write返回的内容
console.log(data);
let parse = JSON.parse(data);//转换为js对象
let $1 = $(parse);//转换为jq对象
$1.each(function () {//遍历对象集合
var tem = "<li>" + this.id+":"+this.city + "</li>";//前端使用实体类中的数据类型不会有get和set
$("#u_id").append(tem);
})
}
</script>
3668
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
