ajax+json

时间:2021-10-27 11:07:38
ajax学习:
1.ajax的概念
局部刷新技术。不是一门新技术,是多种技术的组合,是浏览器端的技术

2 为什么要使用ajax?
           传统的模式 是 发送请求 到 服务器 ,服务器经过业务处理。返回一个页面给 客户端浏览器。这样的做法,浪费资源,可能多次请求同一个页面资源。
           所以 我们需要 ajax。首先 只需要请求一次页面 ,之后所有的数据交互 都 无需 重新加载当前页面。

2.ajax的作用
实现在当前结果页中显示其他请求的响应内容
3.ajax的使用
ajax的基本流程
//创建ajax引擎对象
//复写onreadystatement函数
//判断ajax状态码
//判断响应状态码
//获得响应内容
//处理响应内容
//发送请求
ajax的状态码
redayState:0,1,2,3,4
4:表示内容被成功接受
响应状态码:
200:表示一切ok
404:资源为找到
500:服务器繁忙
ajax的异步和同步
ajax.open(method,url,async);
async:表示设置同步代码还是异步代码执
true:代表异步 默认异步
false:代表同步
4 json格式入门

      ajax 发送 json格式的数据给后台

       $.post(   "/shop/checkUsername"  ,  { username: username.value , aeg:18 }  ,   function (data) {
// data 就是服务器响应给我们的数据 回调函数
if(data == "no"){
$("#showMsg").html("对不起 用户名已被占用").css("color","red");
}else{
$("#showMsg").html("恭喜您 获得如此酷炫用户名").css("color","green");
}
} ); 后台回传json数据的响应给前台浏览器 (java整json很麻烦 我们借助阿里巴巴的fastjson.jar 第三方jar包 处理json )
A 将 fastjson.jar 导入到工程中的 WEN-INF/lib目录下
boolean exit = dao.isExit(telephone);
PrintWriter out = resp.getWriter();
/*if (exit){
out.write(exit ? "no" : "ok");
}*/
//System.out.println(exit);
Map<Object, Object> map = new HashMap<>();
if (exit){
map.put("code","100444");
map.put("message","该用户名已被占用");
}else {
map.put("code","100200");
map.put("message","用户名可用");
}
String s = JSON.toJSONString(map);
out.write(s);
out.close();