学习笔记：IDEA、原生ajax的三道练习题、Markdown
程序员文章站
2022-04-14 18:24:57
前言 该从何说起呢？想写博客好久了，正好这个学期课很少(大三)，可以静下心来写点东西(虽然事情依旧很多)，总感觉记录和分享是一件很酷的事情。第一篇博客，第一次使用Markdown写博客，第一次使用IDEA，所以有什么错误的地方请指出。 一.原生ajax 关于AJAX = Asynchronous J ......
前言
该从何说起呢？想写博客好久了，正好这个学期课很少(大三)，可以静下心来写点东西(虽然事情依旧很多)，总感觉记录和分享是一件很酷的事情。第一篇博客，第一次使用markdown写博客，第一次使用idea，所以有什么错误的地方请指出。
一.原生ajax
关于ajax = asynchronous javascript and xml（异步的 javascript 和 xml）。ajax 不是新的编程语言，而是一种使用现有标准的新方法。ajax 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
详情请移步w3c ajax。
在学习ajax的原理之后，有三个简单的例子：
1.实时验证用户名是否存在
实时验证用户名是否存在，多用于注册的时提醒用户更换用户名，即有效性验证。
如cnblog注册时当输入信息后，失去焦点实时判断信息是否可用。
首先模拟一个后台servlet
package test.servlet;
import net.sf.json.jsonobject;
import test.utils.dbutil;
import javax.servlet.servletexception;
import javax.servlet.annotation.webservlet;
import javax.servlet.http.httpservlet;
import javax.servlet.http.httpservletrequest;
import javax.servlet.http.httpservletresponse;
import java.io.ioexception;
import java.sql.*;
@webservlet(name = "ajaxservlet",urlpatterns = "/ajaxservlet")
public class ajaxservlet extends httpservlet {
protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
}
protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
connection con;
string exist = "true";
try {
con = dbutil.getinstance().getconnection();
string sql = "select count(*) from stu where name = ?";
preparedstatement pstatement = con.preparestatement(sql);
pstatement.setstring(1, request.getparameter("username"));
resultset resultset = pstatement.executequery();
while (resultset.next()) {
if (resultset.getint(1)==0) {
exist = "false";
}
}
jsonobject jsonobject = new jsonobject();
jsonobject.put("exist", exist);
response.getwriter().write(jsonobject.tostring());
system.out.println(jsonobject.tostring());
} catch (sqlexception e) {
// todo auto-generated catch block
e.printstacktrace();
}
}
}
这段代码的逻辑简单：接受doget请求得到参数username，从数据库里查询用户名是否存在，最后将结果转化成json数据响应到前台。
之前一直使用eclipse，第一次使用idea，很不熟悉，其中新建servlet ，idea是这样的注解
@webservlet(name = "ajaxservlet"),而eclipse是@webservlet("/ajaxservlet"),在idea中用默认的注解会有404问题,必须使用这样的注解@webservlet(name = "ajaxservlet",urlpatterns = "/ajaxservlet")或者@webservlet("/ajaxservlet"),或者配置web.xml文件。
接下来就是前台页面了
<body>
username<input type="text" id="username" name="username" onblur="exist('username')"/><span id="it"></span><br>
password<input type="password" id="pwd" name="pwd"><br>
<input type="submit" value="提交" />
<script type="text/javascript">
var xhr = new xmlhttprequest();
function ajax(url,id){
var input = document.getelementbyid(id);
var span = document.getelementbyid("it");
var value = input.value;
xhr.open("get",url+"?username="+value,true);
xhr.onreadystatechange = function(){
if (xhr.readystate == 4 && xhr.status == 200){
var temp = xhr.responsetext;
var data = eval("("+temp+")");
if (data.exist=="true"){
span.innertext = "该用户已存在！";
}else{
span.innertext = "命名正确！！";
}
}
};
xhr.send(null);
};
function exist(id){
var input = document.getelementbyid(id);
var value = input.value;
if(value){
ajax("ajaxservlet",id);
}else{
var span = document.getelementbyid("it");
span.innertext = "输入为空，请输入内容！！";
}
}
</script>
</body>
写的比较初级，刚学javascript没多久，原谅我的菜^_^，简单来说这段代码就是dom找元素绑定到onblur(失去焦点事件)，当触发事件在判断是否有值，如果有值的话，ajax发送请求，发送成功，服务器响应，返回数据，接着利用eval("("+temp+")")处理成json字符串，进行解析并判断。
2.省市区三级联动
省市区三级联动多用于填写地址，为防止用户输入信息有效，采取下拉框选项供用户选择。
例如淘宝网的地址填写。
数据库设计
这样设计的好处是便于维护，如果增加第四级，直接插入数据表明super_id就可以了，不用继续增加表，从而降低耦合性。
后台servlet代码
package test.servlet;
import net.sf.json.jsonarray;
import net.sf.json.jsonobject;
import test.pojo.postion;
import test.untils.dbutil;
import javax.servlet.servletexception;
import javax.servlet.annotation.webservlet;
import javax.servlet.http.httpservlet;
import javax.servlet.http.httpservletrequest;
import javax.servlet.http.httpservletresponse;
import java.io.ioexception;
import java.sql.*;
import java.util.arraylist;
import java.util.list;
@webservlet(name = "ajaxservlet",urlpatterns = "/ajaxservlet")
public class ajaxservlet extends httpservlet {
protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
}
protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
connection con ;
string sql ="select * from postion where super_id=?";
list<postion> list = new arraylist<>();
int super_id = integer.parseint(request.getparameter("super_id"));
try {
con = dbutil.getinstance().getconnection();
preparedstatement pst = con.preparestatement(sql);
pst.setint(1,super_id);
resultset resultset = pst.executequery();
while(resultset.next()){
postion postion = new postion();
postion.setid(resultset.getint(1));
postion.setname(resultset.getstring(2));
postion.setsuper_id(resultset.getint(3));
list.add(postion);
}
jsonarray json = jsonarray.fromobject(list);
jsonobject jsonobject = new jsonobject();
jsonobject.put("potions",json);
system.out.println(jsonobject.tostring());
response.getwriter().write(jsonobject.tostring());
} catch ( sqlexception e) {
e.printstacktrace();
}
}
}
这段代码也写的比较简单，主要的逻辑是接受doget请求得到参数super_id，从数据库里查询super_id匹配的词条，放入list中最后将结果转化成json数据响应到前台。
下面是前台代码
<body>
省<select id = "province" ></select>
市<select id = "city"></select>
区<select id = "region"></select>
<script type="text/javascript">
var xhr = new xmlhttprequest();
var province = document.getelementbyid("province");
var city = document.getelementbyid("city");
function ajax(level,super_id) {
var type = document.getelementbyid(level);
xhr.open("get","ajaxservlet?super_id="+super_id,true);
xhr.onreadystatechange = function (ev) {
if (xhr.readystate == 4 && xhr.status ==200){
var temp = xhr.responsetext;
var data = json.parse(temp);
var innerhtml = "";
for (i in data.potions){
innerhtml+="<option value=";
innerhtml+=data.potions[i].id;
innerhtml+=">";
innerhtml+=data.potions[i].name;
innerhtml+="</option>";
}
type.innerhtml = innerhtml;
}
}
xhr.send(null);
}
(function () {
ajax("province",0);
}());
province.onchange = function () {
var index = province.selectedindex;
ajax("city",province[index].value);
};
city.onchange = function () {
var index = city.selectedindex;
ajax("region",city[index].value);
}
</script>
</body>
首先省级的super_id=0,当html加载的时候首先把省级的元素填充满，之后通过onchange事件绑定得到选中的option的value。之后发送请求，返回数据，转化解析json。
3.无刷新添加
无刷新添加是ajax应用的典型代表，原始添加数据，首先发送显示所有数据的请求，请求应答之后，返回数据，显示在页面上，而添加请求之后要重新加载页面重新发送显示所有页面的请求，这时候就要刷新了。而利用ajax的方法，很容易的解决这个问题。
下面贴出servlet代码
package test.servlet;
import net.sf.json.jsonarray;
import net.sf.json.jsonobject;
import test.pojo.topic;
import test.untils.dbutil;
import javax.servlet.servletexception;
import javax.servlet.annotation.webservlet;
import javax.servlet.http.httpservlet;
import javax.servlet.http.httpservletrequest;
import javax.servlet.http.httpservletresponse;
import java.io.ioexception;
import java.sql.connection;
import java.sql.preparedstatement;
import java.sql.resultset;
import java.sql.sqlexception;
import java.util.arraylist;
import java.util.list;
@webservlet(name = "showallservlet",urlpatterns = "/showallservlet")
public class showallservlet extends httpservlet {
public showallservlet() {
super();
// todo auto-generated constructor stub
}
protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
connection con = dbutil.getinstance().getconnection();
list<topic> list = new arraylist<>();
try {
preparedstatement pst =con.preparestatement("select * from topic");
resultset resultset = pst.executequery();
while (resultset.next()){
topic topic = new topic();
topic.setid(resultset.getint(1));
topic.setcontent(resultset.getstring(2));
list.add(topic);
}
jsonarray jsonarray = jsonarray.fromobject(list);
jsonobject jsonobject = new jsonobject();
jsonobject.put("topics",jsonarray);
response.setcontenttype("application/html;charset=utf-8");
response.getwriter().write(jsonobject.tostring());
system.out.println(jsonobject.tostring());
} catch (sqlexception e) {
// todo auto-generated catch block
e.printstacktrace();
}
}
protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
// todo auto-generated method stub
doget(request, response);
}
}
这个是显示所有内容的servlet，这个很简单就不多说了。
package test.servlet;
import net.sf.json.jsonarray;
import net.sf.json.jsonobject;
import test.pojo.topic;
import test.untils.dbutil;
import javax.servlet.servletexception;
import javax.servlet.annotation.webservlet;
import javax.servlet.http.httpservlet;
import javax.servlet.http.httpservletrequest;
import javax.servlet.http.httpservletresponse;
import java.io.ioexception;
import java.sql.connection;
import java.sql.preparedstatement;
import java.sql.resultset;
import java.sql.sqlexception;
import java.util.arraylist;
import java.util.list;
@webservlet(name = "addaction",urlpatterns = "/addaction")
public class addaction extends httpservlet {
protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
connection con = dbutil.getinstance().getconnection();
try {
preparedstatement pst =con.preparestatement("insert topic values(null,?)");
pst.setstring(1,request.getparameter("content"));
pst.execute();
jsonobject jsonobject = new jsonobject();
jsonobject.put("status",1);
response.setcontenttype("application/html;charset=utf-8");
response.getwriter().write(jsonobject.tostring());
} catch (sqlexception e) {
// todo auto-generated catch block
e.printstacktrace();
}
}
protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
}
}
addactio从数据库中插入数据，如果插入成功，status=1,响应到前台进行判断。
下面是前台代码
<body>
<div id = "content">
</div>
请输入内容<textarea id="input">
</textarea>
<button id="bt">添加</button>
<script type="text/javascript">
var xhr = new xmlhttprequest();
var area = document.getelementbyid("input");
var bt = document.getelementbyid("bt");
bt.onclick = function () {
var text = document.getelementbyid("content");
xhr.open("post","addaction?content="+area.value,true);
var innerhtml = text.innerhtml;
xhr.onreadystatechange = function() {
if (xhr.readystate == 4 && xhr.status == 200) {
var temp = xhr.responsetext;
var result = eval("("+temp+")");
if (result.status==1){
innerhtml+=area.value;
}
innerhtml+="<hr>";
text.innerhtml = innerhtml;
}
}
xhr.send(null);
};
function ajax() {
var text = document.getelementbyid("content");
xhr.open("get","showallservlet",true);
var innerhtml ="";
xhr.onreadystatechange = function() {
if (xhr.readystate == 4 && xhr.status == 200) {
var temp = xhr.responsetext;
var result = eval("("+temp+")");
for(i in result.topics){
innerhtml+=result.topics[i].content;
innerhtml+="<hr/>";
}
text.innerhtml = innerhtml;
}
}
xhr.send(null);
}
(function () {
ajax();
}());
</script>
</body>
首先请求显示所有内容，收到应答的数据，将数据放到块中，添加数据后单击按钮，触发onclick事件，发送请求，返回status值，判断是否添加成功，如果添加成功直接放到块中，从而避免刷新(重新发送显示所有内容的请求)。
关于idea
第一次用idea，从eclipse到idea真的不熟悉，项目模块的概念不一样，导入jar包的方式让我费解，artifacts的打包方式，一脸懵逼，这些都不是关键问题，关键的是我电脑打开idea需要1分多钟，真的快o(╥﹏╥)o了，打开eclipse间接性抽搐，哎，欲哭无泪，省了几顿饭钱，忍痛从8g内存换到12g内存，没什么多大用。好恨，当初骗我买学习本的那个家伙！！！！
推荐一个关于idea的学习教程，写的很棒，这是地址
关于markdown
之前准备用sublime text3的插件写博客，sublime text3的插件下载如果不能*就很难受，网贼慢，我自己捣鼓半天发现有点问题，之后就改用vscode写markdown的文件，这篇博客就是利用vscode 的插件markdown preview enhanced所完成的，怎么说呢？用markdown写文档很酷(^▽^)。
最后
一直都想写博客，以为就是写点文字贴点儿图片代码，第一次写，写到这里真的很费神，首先语言组织，然后大致的格式，最重要的是技术的理解，是，写是这么写，但为什么这么写，你对这个技术的理解是否到位，是否会把别人带到坑里，这些都要考虑，这篇博客就图个乐呵，真的写的很差劲，对技术的理解也可能没有到位，语言组织能力也比较差，不过这是一个过程，我会不断的成长，提成各项的能力。加油，努力。
上一篇： luogu P1816 【忠诚】
下一篇： Python之Pycharm安装及介绍