Ajax原理与快速入门 案例
花了一天时间通过视频的学习自己做的笔记，留个印象。。。。
具体自己写的源代码(百度网盘)：https://pan.baidu.com/s/1V5v_5Z-EogJzZvgd2tbHBQ
（github）:https://github.com/Mecho-Lichard/Ajax.git
Ajax简单介绍：
Ajax并不是新的是，只是将已有的技术封装起来。
AJAX即 "Asynchronous Javascript And XML" (异步JavaScript和XML) ,是指一种创建交互式网页应用的网页开发技术,它并不是一种新的技术ajax并非一种新的技术,而是几种原有技术的结合体,它由下列技术组合而成.
1.使用CSS和XHTML来表示.
2.使用DOM型来交互和动态显示,
3.使用XMLHtipRequest来和服务器进行异步通信.
4.使用javascript来绑定和调用.
在上面几中技术中,除了XmlHttpRequest对象以外,其它所有的技术都是基于web标准并且已经得到了广泛使用, XMLHttpRequest虽然目前还没有被W3C所采纳,但是它已经是一个事实的标|准因为目前几平所有的主流浏览器都支持它,
同步的概念：
发布一个请求，等服务器处理完才能继续发请求。
异步的概念：
有什么用？
传统的网页,如果需要更新内容,必须加载整个网页,如果只需要对网页上的某个内容进行局部剧新,那么就需要使用到Ajax了,它可以让我们无需重新加载全部网页内容,即可完成对某个部分」的内容执行剧新,最典型的的例子,莫过于大家在注册网站的时候,输入的用户名,会自动的提示我们,该用户已被注册.
Ajax总体概述：
内部原理：通过XmlHttpRequest去执行请求和返回结果
具体实现：Ajax Get()请求
一、请求或获取数据：Get
1.创建对象
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
2.发送请求：
function get(){
var request=ajaxFunction();
//2.发送请求
//http://localhost：8080/Ajax_day01/demo1.jsp
request.open("GET","ServletDemo1",true);
request.send();
}
demo1.jsp:
get()三个参数含义：
1.请求类型：Get or Post
2.请求的路径
3.是否异步，true or false
ServletDemo1.java
运行结果：
上面是客户端发送给服务器端，服务器端收到了请求。
接下来是服务器端发送给客户端，客户端响应信息。
其中骂娘啊，写错了一个单词，找了好久的错误，浪费时间。
代码缺一不可啊
demo1.jsp:
function get(){
var request=ajaxFunction();
//2.发送请求
//http://localhost：8080/Ajax_day01/demo1.jsp
/*
三个参数：
1.请求类型：Get or Post
2.请求的路径
3.是否异步，true or false
*/
/*带数据 request.open("GET","ServletDemo1",true); */
request.open("GET","ServletDemo1?name=aa&age=18",true);
request.send();
}
function get(){
var request=ajaxFunction();
/*带数据 request.open("GET","ServletDemo1?name=aa&age=18",true); */
request.open("GET","ServletDemo1?name=aa&age=18",true);
//3.获取响应数据.注册监听的意思，一会准备的状态发生了改变，那么就执行=号右边的方法
request.onreadystatechange=function(){
//前半段表示已经能够正常处理，再判断状态码是否=200
if (request.readyState==4 && request.status==200){
//弹出响应的信息
alert(request.responseText);
}
}
request.send();
}
ServletDemo1.java:
/*响应的数据*/
response.setContentType("text/html;charset=utf-8");
response.getWriter().write("客户端收到了请求...");
运行结果：
二、请求或获取数据：Post
Post()带数据：（与get()发送数据有点不同）
function Post(){
var request=ajaxFunction();
//2.发送请求
//http://localhost：8080/Ajax_day01/demo1.jsp
/*
三个参数：
1.请求类型：Get or Post
2.请求的路径
3.是否异步，true or false
*/
/*带数据 request.open("GET","ServletDemo1",true); */
request.open("Post","ServletDemo1",true);
//如果使用的是Post方式带数据，那么这里添加头，说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//post带数据过去
request.send("name=bb&age=19");
}
运行结果：
post传给客户端信息与get()写法一样
例子：Ajax 校验用户名是否可用：
页面设计：
| 用户名: | |
| 密码 | |
| 邮箱 | |
| 简介 | |
设置数据库：
c3p0设置：
当然得引入util：
demo3.jsp:jsp页面显示
CheckUserNameServlet.java servlet中的代码：
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//1.检测是否存在
String name=request.getParameter("name");
System.out.println("name"+name);
UserDao dao=new UserDaoImpl();
boolean isExist=dao.checkUserName(name);
//2.通知页面，到底有还是没有
if(isExist){
response.getWriter().println(1);//存在用户名
}else{
response.getWriter().println(2);//不存在用户名
}
}
UserDaoImpl.java Dao代码：
public class UserDaoImpl implements UserDao{
public boolean checkUserName(String username) {
QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());
String sql = "select count(*) from t_user where username =?";
try {
runner.query(sql, new ScalarHandler(), username);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
Long result = null;
try {
result = (Long) runner.query(sql, new ScalarHandler(), username);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return result > 0 ;
}
}
UserDao.java
kao，搞了好久总是失败，console总是报这个错
2018-7-24 19:11:44 com.mchange.v2.log.MLog
信息: MLog clients using java 1.4+ standard logging.
2018-7-24 19:11:44 com.mchange.v2.c3p0.C3P0Registry banner
信息: Initializing c3p0-0.9.1.2 [built 21-May-2007 15:04:56; debug? true; trace: 10]
2018-7-24 19:11:44 com.mchange.v2.c3p0.impl.AbstractPoolBackedDataSource getPoolManager
信息: Initializing c3p0 pool... com.mchange.v2.c3p0.ComboPooledDataSource [ acquireIncrement -> 3, acquireRetryAttempts -> 30, acquireRetryDelay -> 1000, autoCommitOnClose -> false, automaticTestTable -> null, breakAfterAcquireFailure -> false, checkoutTimeout -> 0, connectionCustomizerClassName -> null, connectionTesterClassName -> com.mchange.v2.c3p0.impl.DefaultConnectionTester, dataSourceName -> 1hge13h9w1klks9c1gwqgpr|757753a8, debugUnreturnedConnectionStackTraces -> false, description -> null, driverClass -> com.mysql.jdbc.Driver, factoryClassLocation -> null, forceIgnoreUnresolvedTransactions -> false, identityToken -> 1hge13h9w1klks9c1gwqgpr|757753a8, idleConnectionTestPeriod -> 0, initialPoolSize -> 10, jdbcUrl -> jdbc:mysql://127.0.0.1/stu, maxAdministrativeTaskTime -> 0, maxConnectionAge -> 0, maxIdleTime -> 30, maxIdleTimeExcessConnections -> 0, maxPoolSize -> 100, maxStatements -> 200, maxStatementsPerConnection -> 0, minPoolSize -> 10, numHelperThreads -> 3, numThreadsAwaitingCheckoutDefaultUser -> 0, preferredTestQuery -> null, properties -> {user=******, password=******}, propertyCycle -> 0, testConnectionOnCheckin -> false, testConnectionOnCheckout -> false, unreturnedConnectionTimeout -> 0, usesTraditionalReflectiveProxies -> false ]
nameaa
cao，上面那个不是错误！！cao，浪费我这么多时间。根本没有错。。。
最后的运行效果：
最后又看了一遍，发现 name 太多，自己都有点乱。最重要的是 ajax的顺序，在干嘛。
