Ajax原理与快速入门案例

最新推荐文章于 2021-01-08 11:10:54 发布

真是个小傻瓜

最新推荐文章于 2021-01-08 11:10:54 发布

阅读量305

点赞数

CC 4.0 BY-SA版权

分类专栏：突发奇想文章标签： Ajax Java

本文链接：https://blog.youkuaiyun.com/sinat_40692412/article/details/81195256

突发奇想专栏收录该内容

2 篇文章

订阅专栏

本文介绍了Ajax的基本概念和工作原理，包括异步与同步的区别，以及Ajax在局部更新网页内容方面的优势。通过实例展示了如何使用Ajax进行GET和POST请求，并提供了Ajax校验用户名是否可用的案例。详细讲解了Ajax请求的创建、发送、接收响应数据的过程，并给出了相关的JavaScript代码示例。同时，提到了在学习过程中遇到的错误和解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

花了一天时间通过视频的学习自己做的笔记，留个印象。。。。

具体自己写的源代码(百度网盘)：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 校验用户名是否可用：

页面设计：

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

设置数据库：

c3p0设置：

<?xml version="1.0" encoding="UTF-8"?>

<c3p0-config>

<default-config>

<property name="driverClass">com.mysql.jdbc.Driver</property>

<property name="jdbcUrl">jdbc:mysql://127.0.0.1/stu</property>

</default-config>

<named-config name="oracle">

<user-overrides user="master-of-the-universe">

</user-overrides>

</named-config>

</c3p0-config>

当然得引入util：

demo3.jsp:jsp页面显示

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;

}

function checkUserName(){

//获取输入框的值

var name=document.getElementById("name").value;

//1.创建对象

var request=ajaxFunction();

//2.发送请求

request.open("POST","CheckUserNameServlet",true);

request.onreadystatechange=function(){

if (request.readyState==4 && request.status==200){

/* alert(request.responseText); */

var data=request.responseText;

if(data==1){

//alert("用户名已存在");

document.getElementById("span01").innerHTML="<font color='red'>用户名已存在！</font>";

}else

{//alert("用户名不存在");

document.getElementById("span01").innerHTML="<font color='green'>用户名未存在！</font>";

}

request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

request.send("name="+name);

}

</script>

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 <clinit>

信息: 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，浪费我这么多时间。根本没有错。。。