ajax 技术的概述
javaScript and XML ：是 js 与 xml 结合的技术，创建交互式的技术(主要是创建客户端与服务进行交互)
ajax 技术的使用
1.直播的弹幕
2.做一些与后台交互的验证
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);
注意点：
1.回调方法是独立的方法 ，不能与方法相互嵌套
2.请求方式 post 的区别：不能直接拼接参数
3.xmlHttpRequest.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”); post 方式请求必须加上这句话
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script src="js/jquery-1.8.3.js"></script>
</head>
<body>
<input type="text" name="uname" id="username" onblur="show()"><span id="span" style="color: red"></span>
<script>
function show() {
//获取input 标签值
var username = $("#username").val();
//进行判断
if (username == null || username == "") {
$("#span").html("你输入的不能为空");
}else {
//与服务器进行交互
xmlHttpRequest = new XMLHttpRequest();
//设置其回调
xmlHttpRequest.onreadystatechange=callBack;
//建立连接
var url = "/userServlet?uname=" + username;
//第一个参数get: method 的请求方式
//第二个参数url：请求的地址
//第三个参数true：支持异步刷新
xmlHttpRequest.open("get",url,true);
//发送请求
xmlHttpRequest.send(null);
//post 方式
var url = "/userServlet"
xmlHttpRequest.open("post",url,true);
//post 方式必须加上这句话
xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var date = "uname=" + username;
xmlHttpRequest.send(date);
}
//设置其回调函数的方法
//xmlHttpRequest.readyState = 4 ：与服务器创立连接成功
//xmlHttpRequest.status == 200 ：表示响应成功
function callBack() {
if (xmlHttpRequest.readyState = 4 && xmlHttpRequest.status == 200) {
//获取服务器写入到客户端的值，获取过来的值都是字符串
var flag = xmlHttpRequest.responseText;
if (flag == "true"){
$("#span").html("用户可以使用");
}else {
$("#span").html("用户不可以使用");
}
}
}
jquery 方式实现 ajax 步骤
1.在Web下添加jquery 文件(图一)
2.在页面引入文件路径(图二)
ajax 的语法
$.ajax({
“url”:“请求地址”
“type”:“请求的方式post/get”
“data”:{“键1”,“值1”,“键2”,“值2”}
“dataType”:"回调函数的数据:类型：text,json xml 注意：第二个首字母大写
“success”:正确的回调方法
“error”:错误的回调方法
})
$.ajax({
"url":"${pageContext.request.contextPath}/userServlet",
"type":"post",
"data":{"uname":username},
"dataType":"text",
"success":callBack,
"error":function () {
alert("请求失败！");
}
})
//回调方法
function callBack(data) {
//转化成前端能解析的json
var jsonstr = JSON.parse(data);
//转化为jquery 对象
var $jsonstr = $(jsonstr);
//进行遍历
var temp = "";
$jsonstr.each(function () {
temp += "<li>"+this+"</li>";
});
//最后追加
$("#tv_ul").html(temp);
json 概述
1.轻量级数据交互格式，一般使用与前端进行交互
2.xml :解析比较麻烦 json：解析比较简单
3.是以键值对进行存储
4.json 数据类型：int、String、boolean、{}就是对象、[]就是集合
json 之间的转换
使用市面上的fastjson-1.2.13.jar(阿里的) gson-2.2.4.jar(谷歌的)
1.JSON.toJSONString(list); 把对象转化为 json 串(图一)
2.JSON.parseArray(str,City.class);转换为集合(图二)
3.JSON.parseObject(str,Employees.class);转换为对象(图三)
//写数据
PrintWriter pw = resp.getWriter();
List<String> list = new ArrayList<String>();
list.add("111");
list.add("222");
list.add("333");
String json = JSON.toJSONString(list);
//写入到客户端
pw.print(json);
//关流
pw.close();
String str ="[{'id':'0375','city':'平顶山'},{'id':'0377','city':'南阳'}]";
List<City> list = JSON.parseArray(str,City.class);
for (City c:list){
System.out.println(c.getId()+"\t"+c.getCity());
}
String str ="{\n" +
"\"employees\": [\n" +
"{ \"firstName\":\"Bill\" , \"lastName\":\"Gates\" },\n" +
"{ \"firstName\":\"George\" , \"lastName\":\"Bush\" },\n" +
"{ \"firstName\":\"Thomas\" , \"lastName\":\"Carter\" }\n" +
"]\n" +
"}";
Employees employees = JSON.parseObject(str,Employees.class);
List<Emp> empList = employees.getEmployees();
for (Emp emp:empList){
System.out.println(emp.getFirstName()+"\t"+emp.getLastName());
}
gson 进行转化使用步骤
1.实例化对象：Gson gson = new Gson();
2.gson.fromJson(“json的字符串”,“外层的Class文件”);把json串转化为对象
3. gson.toJson(city); 把对象转换成json串
4. gson.fromJson(str,new TypeToken<List>(){}.getType()); 把json 串准换为集合
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);*/
MVC 设计模型
MVC 概念
全称：Model View Controller
model：模型
view：视图
controller：控制器
一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码
MVC 设置模式的优势
1.项目代码的结构非常清晰
2.可维护性扩展性高，节约开发成本
3.耦合度低
4.web发展的趋势
5.试用于移动端
缺点：不适合中小型的项目
314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
