【训练大纲044】
上午学习目标：
1 掌握 AJAX访问原理
2 掌握 AJAX 编写步骤
1. 删除用户功能实现
根据视频中的讲解，完成以下内容
(1) 简述删除功能的基本思路流程
答：
1、点击删除发送请求到DataServlet（要删除的用户id及方法名）
2、服务器接收到删除请求后，调用DataServlet的指定的方法，完成用户删除
3、响应用户删除成功给浏览器
(2) 独立完成删除按钮的创建以及删除请求路径的修改
答：<td><div class="button-group"> <a class="button border-main" href="cateedit.html"><span class="icon-edit"></span> 修改</a> <a class="button border-red" href="data?method=delUserInfo&uid=${u.uid }" ><span class="icon-trash-o"></span> 删除</a> </div></td>
(3) 完成删除功能的Servlet的实现
答：public void delUserInfo(HttpServletRequest req, HttpServletResponse resp) throws IOException{
//获取请求信息
String uid = req.getParameter("uid");
//处理请求信息
UserService us = new UserServiceImpl();
int i= us.delUserInfoService(uid);
//响应处理结果
if(i>0){
resp.getWriter().write("用户信息删除成功");
}else{
resp.getWriter().write("用户信息删除失败");
}
}
2. 删除用户信息和问题说明
(1) 删除用户信息和问题说明
答：在删除成功后，响应内容会将请求页面的所有内容进行覆盖显示新的响应内容，但是我们希望在保留当前请求页面的基础上显示新的内容。
(2) 什么是当前请求页？
答：指的不一定是浏览器中一个标签页，一般frameset标签中的划分区域，都是单独的，如果某个区域发起了请求，则该区域可以称为当前请求页。
3. ajax介绍&ajax的访问原理
(1) 视频中ajax的特点是？
答：实现网页的局部刷新
(2) 根据视频总结ajax的基本原理
答：通过XMLHttpRequest对象来向服务器发异步请求，从服务器获得数据，然 后服务器将数据响应给浏览器指定的位置。
(3) 使用画图软件根据视频画出视频中的ajax访问原理图。
答：
4. 非ajax和ajax方式比较&第一个ajax请求
(1) 视频中创建Ajax对象的代码是？
答：var ajax;
if(window.XMLHttpRequest){
ajax = new XMLHttpRequest();
}else if(window.ActiveXObject){
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
(2) 视频中创建ajax请求的代码是？
答：ajax.open(method, url, async, username, password);
(3) 视频中发送ajax请求的代码是？
答：ajax.send(null);
(4) 视频中声明ajax监听的代码是？
答：ajax.onreadystatechange=function(){
处理数据
};
5. ajax的状态码学习
(1) 视频中讲解的Ajax的状态码及其含义是?
答：0：表示ajax引擎对象创建
1：表示请求创建但并未发送 ajax.open("get", "my");
2：请求发送 ajax.send(null);
3：请求处理完毕，正在接收响应内容
4：响应内容接收完毕（重要状态）
(2) 根据视频，编写ajax程序，在onreadystatechange中打印ajax的状态码？。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<script type="text/javascript">
function testAjax(){
//创建ajax引擎对象
var ajax;
if(window.XMLHttpRequest){
ajax = new XMLHttpRequest();
}else if(window.ActiveXObject){
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
//声明监听事件
ajax.onreadystatechange=function(){
alert(ajax.readyState);
};
//发送请求
//创建请求
ajax.open("get", "my");
//发送请求
ajax.send(null);
}
</script>
</head>
<body>
<input type="button" value="ajax测试" οnclick="testAjax()" />
<div id="div" style="height: 200px;width: 200px; border: 2px solid;"></div>
</body>
</html>
下午学习目标：
1 掌握AJAX的get和post请求
2 掌握AJAX返回json数据 js处理json数据
3 掌握Jquery中的AJAX
1. ajax之响应状态码
(1) 视频中讲解的ajax的响应状态码的属性是?
答：ajax.status==状态码
200：表示一切正常
404：资源未找到
500：服务器内部错误
(2) 根据视频讲解判断ajax的响应状态码完善ajax代码。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<script type="text/javascript">
function testAjax(){
//创建ajax引擎对象
var ajax;
if(window.XMLHttpRequest){
ajax = new XMLHttpRequest();
}else if(window.ActiveXObject){
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
//声明监听事件
ajax.onreadystatechange=function(){
//判断ajax的状态码
if(ajax.readyState==4){
//判断响应状态码
if(ajax.status==200){
//处理响应
//获取数据
var data = ajax.responseText;
//获取div对象
var div = document.getElementById("div");
div.innerHTML=data;
}else if(ajax.status==404){
//获取div对象
var div = document.getElementById("div");
div.innerHTML="请求资源不存在";
}else if(ajax.status==500){
//获取div对象
var div = document.getElementById("div");
div.innerHTML="内部服务器繁忙";
}else{
//获取div对象
var div = document.getElementById("div");
div.innerHTML="未知异常";
}
}
};
//发送请求
//创建请求
ajax.open("get", "my");
//发送请求
ajax.send(null);
}
</script>
</head>
<body>
<input type="button" value="ajax测试" οnclick="testAjax()" />
<div id="div" style="height: 200px;width: 200px; border: 2px solid;"></div>
</body>
</html>
2. ajax之异步和同步
(1) 根据视频讲解说出你对ajax异步和同步的理解?
答：ajax默认为异步，当前js函数继续执行，无需等待ajax请求的响应以及响应的处理。需要手动设置ajax.open(async)为同步,async默认为true，如果想要设置为异步，将true改为false即可。
(2) 根据视频讲解，动手在servlet中让请求线程睡一会儿，然后修改ajax代码的异步同步，观察异步和同步的执行效果。
答：public class MyServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
resp.getWriter().write("ajax学习");
}
}
3. ajax异步同步总结和ajax的get请求和ajax的post请求
(1) 视频中创建ajax.open的总结内容是?
答：ajax.open(method,url,async)
method:表示请求方式
url：请求地址
async：设置异步或者同步请求，true表示异步，false表示同步，默认为true
异步：当前js函数继续执行，无需等待ajax请求的响应及响应的处理。
同步：当前js函数会等待ajax请求及响应，当ajax响应处理完毕后，继续执行函数剩余的代码。
(2) ajax的get请求如何附带请求数据。
答：直接以?的形式将数据拼接在url后面
(3) ajax的post请求如何附带请求数据。
答：需要单独的进行请求数据的设置。使用 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
设置请求数据为键值对数据。如果有请求数据则ajax.send("键值对数据"),如果没有请求数据，则ajax.send(null)
4. ajax响应数据问题及json学习
(1) 视频中明确的ajax使用流程是?
答：创建ajax引擎对象
声明监听函数
//判断ajax状态码
//判断响应状态码
//处理响应
创建并发送ajax请求
创建请求(设置请求方式，设置请求地址，设置异步或同步)
发送请求
其他处理
(2) 根据视频讲解为什么需要json格式响应数据，说出你的理解？
答：服务器响应给浏览器的数据应该是字符串类型，但是如果数据量较大，就需要在服务器端将数据拼接成一个良好格式的字符串数据响应给浏览器，浏览器根据格式进行数据的解析和使用。此时的解决方法就是使用json格式的字符串。
(3) ajax获取响应数据的代码是？
答：var data = ajax.responseText;
(4) json数据的格式是什么？
var 对象名={
键1:值2,
键2:值2,
...
键:值
}
(5) json的作用是什么
答：保证对象中数据的紧密性和完整性。
5. 使用josn格式完成数据响应
(1) 视频中在后台手动拼接的User对象的json字符串是?
答：String str = "{uid:1,uname:'张三',age:18,fav:'看电影'}";
(2) eval方法的作用是什么？
答：将字符串数据转换成js对象
(3) 视频中使用eval方法将json字符串转换对js对象的代码是？
答：eval("var obj="+data);
(4) gson包的作用是什么？使用哪个方法可以将Java对象转换为对应的json字符串
答：完成json格式字符串的拼接
String str = new Gson().toJson(u);
tojson()方法;
6. ajax之用户名校验ajax代码(1)
(1) 视频中实现用户名校验的思路是什么？
答：1、书写用户名信息，在失去焦点时进行校验
2、失去焦点发送请求到服务器，服务器根据用户名信息去数据库中查询该用户名是否存在
3、将校验结果响应给客户端
4、在当前页面用户名输入框后显示提示语
7. ajax之用户名校验后台代码完成(2)
(1) 根据视频完成用户名校验功能。
8. 封装自己的ajax
(1) 为什么要封装ajax代码。
答：在使用ajax进行业务处理时，ajax的代码有很多地方是相同的，这样造成了编写代码时出现了重复编写，影响开发效率。封装之后，下次使用直接调用即可，可以增加开发效率。
(2) 封装的思想是什么？
答：相同的保留，不同的传参
(3) 视频中请求方式的封装内容是？
答：请求方式、请求地址、请求数据、异步同步设置、响应处理参数
(4) 视频中封装的deal200的原理是什么？
答：该参数接收一个js的函数对象，函数对象中声明ajax响应数据的处理逻辑代码，函数对象需要声明一个形参用来接收要处理的响应数据
9. jQuery中的ajax学习(1)
(1) 使用jQuery中的ajax第一步是什么？
答：引入jQuery文件
(2) jQuery中get方式的ajax的基本使用格式是？
答：$.get(url,data,function)
$.ajax({json格式的参数})
(3) $.get的参数及作用
答：url：请求地址
data：请求参数，参数格式为json对象
function:回调函数，函数要声明一个形参用来接收响应数据
(4) $.get和$.post的区别是什么？
答：请求方式不同，get请求方式将数据以键值对的形式拼接在后面，post方式需要单独的进行请求数据的设置，设置请求数据为键值对数据。
10. jQuery中的ajax学习(2)
(1) $.ajax设置请求方式，设置请求参数，设置同步异步，设置回调函数的属性分别是？
答：请求方式：type
请求参数：url
同步异步：async
回调函数：success
扫一扫
7957
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
