前言

该从何说起呢?想写博客好久了,正好这个学期课很少(大三),可以静下心来写点东西(虽然事情依旧很多),总感觉记录和分享是一件很酷的事情。第一篇博客,第一次使用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写文档很酷()。

最后

一直都想写博客,以为就是写点文字贴点儿图片代码,第一次写,写到这里真的很费神,首先语言组织,然后大致的格式,最重要的是技术的理解,是,写是这么写,但为什么这么写,你对这个技术的理解是否到位,是否会把别人带到坑里,这些都要考虑,这篇博客就图个乐呵,真的写的很差劲,对技术的理解也可能没有到位,语言组织能力也比较差,不过这是一个过程,我会不断的成长,提成各项的能力。加油,努力。

学习笔记:IDEA、原生ajax的三道练习题、Markdown的更多相关文章

  1. jquery学习笔记(五):AJAX

    内容来自[汇智网]jquery学习课程 5.1 ajax AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新. AJAX = 异步 JavaScript 和 XML ...

  2. 高性能javascript学习笔记系列(6) -ajax

    参考 高性能javascript javascript高级程序设计 ajax基础  ajax技术的核心是XMLHttpRequest对象(XHR),通过XHR我们就可以实现无需刷新页面就能从服务器端读 ...

  3. MongoDB学习笔记~使用原生语句实现三层集合关系的更新

    回到目录 MongoDB的文档型数据结构使得它在存储数据上很像JSON,在可读性方面很强,然而这种复杂的结构在update时相对麻烦一些,而对于官方给出的文档说的也不够细致,有些东西也是模棱两可的态度 ...

  4. ZendFramework2学习笔记 json和ajax

    单程: View服务寄存器ViewJsonStrategy之后,有可能直接在控制器action是使用JsonViewModel输出json的数据. 注冊ViewJsonStrategy: //modu ...

  5. MVC3 学习笔记 之(ajax表单)

    mvc 提供了一种ajax提交表单的方式.与普通表单不同的是,它是一个异步表单. 在开始使用之前,需要引用以下文件: <script src="@Url.Content("~ ...

  6. Java学习笔记6(循环和数组练习题)

    1.输出100到1000的水仙花数: public class LoopTest{ public static void main(String[] args){ int bai = 0; int s ...

  7. ffmpeg学习笔记-native原生绘制

    上次已将ffmpeg的动态库编译出来了,并且使用了ffmpeg的转码功能,成功将mp4格式视频转化为yuv视频,这篇文章基于上次测试的demo,使用surfaceview显示解码完成的像素数据 布局设 ...

  8. MongoDB学习笔记系列

    回到占占推荐博客索引 该来的总会来的,Ef,Redis,MVC甚至Sqlserver都有了自己的系列,MongoDB没有理由不去整理一下,这个系列都是平时在项目开发时总结出来的,希望可以为各位一些帮助 ...

  9. MongoDB学习笔记系列~目录

    MongoDB学习笔记~环境搭建 (2015-03-30 10:34) MongoDB学习笔记~MongoDBRepository仓储的实现 (2015-04-08 12:00) MongoDB学习笔 ...

随机推荐

  1. 我的gulp第一个程序

    以前都是单枪匹马的干,从没用过模块化的打包工具,加入新的团队后,模块化开发学到不少,尤其是工具的使用.团队目前较多的使用gulp,也是最流行的一款前端打包工具.最近Team开始尝试用gulp,我也只是 ...

  2. Java 使用Log4J进行日志操作

    使用Log4J进行日志操作   Log4J简介   Log4J是Apache的一个开放源代码项目,它是一个日志操作包,通过使用Log4J,可以指定日志信息输出的目的地,如控制台.文件.CUI组件.NT ...

  3. 关于echart 图表自适应问题的解决办法

    <div id="divEnergy" style="width: 100%; height: 300px; border: 5px solid red; &quo ...

  4. 005hystrix.stream信息聚合Turbine

    1.POM配置 和普通Spring Boot工程相比,仅仅添加了Turbine和Spring Boot Starter Actuator依赖 <dependencies> <!--添 ...

  5. Raspberry Config.txt 介绍

    原文连接:http://elinux.org/RPi_config.txt Config.txt 由于树莓派并没有传统意义上的BIOS, 所以现在各种系统配置参数通常被存在"config.t ...

  6. 最新-Linux常用命令大全-随时更新

      一.系统管理与设置 1.信息显示命令 # man & info  //帮助手册 # man 命令 //显示相应命令的帮助内容 # arch  //显示当前系统体系结构 # cal  //显 ...

  7. mysql/MariaDB 搭建后创建密码及开启远程

    创建密码: mysqladmin -u root -p password 123 或 MariaDB [(none)]> use mysql MariaDB [mysql]> update ...

  8. SIMATIC 1500 PLC 同步轴,状态字StatusWord信号描述

    轴名. StatusWord.X21 (Synchronizing) 正在建立同步 轴名. StatusWord.X22 (Synchronous) 已经建立同步

  9. July 22nd 2017 Week 29th Saturday

    If you are not brave enough, no one will back you up. 如果你不够勇敢,没人会替你坚强. I was told that the real man ...

  10. C#中的"?"和"??"

    摘自:http://www.cnblogs.com/zxjyuan/archive/2009/10/27/1590795.html 如果你看到C#中的“?”问号脑袋里便充满问号,那么这个贴子便是为你而 ...