结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
1.3 前台页面设计
服务器小程序已经差不多了，现在我们为了和服务器进行交互，就需要编写前台页面。这个页面也就是给用户看的。换言之，用户只能通过前台页面来访问我们的Servlet。
我们来写一个小案例，在页面上发送一句话到服务器，然后服务器给出一个回应就行了。
就是这么一个简单的案例，主要用来熟悉一下流程。
为了简单起见，我就不自己调css样式了，直接用bootstrap吧。
引入bootstrap的核心css文件。
然后，修改index.jsp
<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>
提交
页面效果：
1.4 基于get方式的数据请求
当我们点击提交按钮，就alert（）一下，如果成功的话，那么说明点击事件没有问题。然后，继续往下写代码。
如果是以往，我们都是通过form表单来进行提交的，可是这样的话，就会有一个问题，就是页面会刷新，而且代码也相对比较难懂。
自从ajax出来了之后，这种情况得到了巨大的改善，局部刷新技术在当时来看，还是非常不错的。
我先把实现代码给出：
btn.onclick = function(){
var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject(“Microsoft.XMLHTTP”);
xhr.open(“get”,“MyServlet?message=”+document.getElementsByTagName(“input”)[0].value,true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState4 && xhr.status200){
alert(xhr.responseText);
}
};
}
同时修改一下MyServlet
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String msg = req.getParameter(“message”);
System.out.println(msg);
}
重启 tomcat ，访问index.jsp页面。
现在的浏览器一般都有调试功能，按一下F12，调试界面就出来了。然后，找到一个network，以谷歌浏览器为例
network视图会把所有的数据交互显示出来，包括引入的 js ， css文件，还有各种请求和回应，都会在这里显示出来。
比如，现在我刷新一下页面
我这么一刷新，首先服务器接收到的是这么一个 URL： http://localhost/ajax/index.jsp
这就是一个请求，服务器收到这个请求后，返回给我 index.jsp页面和bootstrap.min.css这个文件。
因为我在index.jsp的确引入过bootstrap.min.css，所以他也就一起加载进来了。
现在，我输入一句话，点击提交，看看会发生什么？
我们把input框里面的内容提交到服务器程序 MyServlet
控制台已经接受到了，这里比较幸运，没有遇到中文乱码的问题，那么先不管乱码了。
因为MyServlet中没有返回什么东西，所以alert出来的是空。
好的，那我们给浏览器也返回一句话吧。
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String msg = req.getParameter(“message”);
System.out.println(msg);
resp.setContentType(“text/html;charset=utf-8”);
PrintWriter out=resp.getWriter();
out.println(“你好，这是服务器返回的信息！”);
out.flush();
out.close();
}
再次点击提交按钮
OK了。
接下来，看一下请求的具体信息
在比对一下js代码，就一目了然了。
btn.onclick = function(){
var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject(“Microsoft.XMLHTTP”);
xhr.open(“get”,“MyServlet?message=”+document.getElementsByTagName(“input”)[0].value,true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState4 && xhr.status200){
alert(xhr.responseText);
}
};
}
readyState:
0: 请求未初始化
1: 服务器连接已建立，还没发送
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
当 readyState 等于 4 且状态为 200 时，表示响应已就绪.
请求方式是get，并且只有当返回的状态码为200的时候，才会打印出responseText，这个就是对应的
out.println(“你好，这是服务器返回的信息！”);
这句话。
1.5 基于post方式的数据请求
get方法会在URL地址栏里显示你提交所带的值，post方法不会。所以，相对来说，post方法比较安全。
post方法在流程上和get方式差不多，我就直接上代码了:
window.onload = function(){
var btn = document.getElementById(“submit”);
btn.onclick = function(){
var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject(“Microsoft.XMLHTTP”);
xhr.open(“post”,“MyServlet”,true);
xhr.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
var postData = {message : document.getElementsByTagName(“input”)[0].value};
var postDataStr = (function(obj){ // 转成post需要的字符串.
var str = “”;
for(var prop in obj){
str += prop + “=” + obj[prop] + “&”
}
return str;
})(postData);
alert(postDataStr);
xhr.send(postDataStr);
xhr.onreadystatechange = function(){
if(xhr.readyState4 && xhr.status200){
alert(xhr.responseText);
}
};
}
};
MyServlet.java
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
总结
三套“算法宝典”
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
算法刷题LeetCode中文版（为例）
人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。
最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！
910
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
