ajax通讯如何获取用户名,Ajax概述和判断用户名是否存在的简单代码练习

在本代码中主要体现，Ajax实现了部分位置的刷新。不需要重新刷新网页，重新请求服务器。下面用过代码来对Ajax更深的认识

这里需要创建，一个jsp文件(显示登录界面)，js文件(对Ajax的主要设置)，一个servlet(主要用作和数据库连接和逻辑的控制)

1.在web中创建一个Lession7jsp页面，jsp中主要写了登录页面的用户名和密码和按钮

AJAX学习-用户登录

//对后面js页面进行调用。

用户名：

密码：

2.在web中新建一个叫js的文件夹，在js文件夹里面新建Lession.js文件。Ajax的设置都是JS中设置的，所以这个js文件就是Ajax学习的精髓和重点了。

/window.onload的意思是，页面加载就会显示这个方法

window.onload = function() {

//获取jsp页面中的用户名标签的name

var nameObj = document.getElementById("user")

//nameObj.onblur:进行绑定，当失去焦点时，就会调用下面的函数

nameObj.onblur = function () {

//获得标签的name属性的值，以此来获取浏览器输入的内容

var name = this.value;

/*alert(name);*/

//第一步：初始化XMLHttpRequest,创建异步对象，因为其他浏览器和老版本的IE浏览器创建对象的过程不一样，所有这里需要判断

//(第一步对AJAX初始化，在网上搜索有好多，不用可以把这一步的代码背下来，理解即可)

var xmlhttp;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

//第二步：指定回调函数，并对服务器的交互状态进行判断

//onreadystatechange是AJAX对象的一个属性，因为Ajax是异步处理的，所以需要一个这样的回调

xmlhttp.onreadystatechange=function(){

//readyState对服务器的状态，status是HTTP的状态

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

//这里用到了JSON知识点，主要实现了把serlvt页面的数据传给js

//所以，这里的数据是servlt里传过来的。

var obj = eval("("+xmlhttp.responseText+")");// eval()获取返回值

if (obj.flag==0){

document.getElementById("span").innerText="用户名可用";

}else if (obj.flag==1) {

document.getElementById("span").innerText="用户名已经存在！";

}

}

}

//第三步：用open("1","2","3")连接服务器 ,

// 1里面放post或者get，2里面放的是servlet在web.xml中定义的。3：true代表异步处理

xmlhttp.open("post","/ServletXml?name="+name,true);

//第四步：向服务器发送请求，

xmlhttp.send(null);

}

}

3.在src中新建servlet，我这个项目连接了mysql数据库，如果没有数据库，可以直接把里面的数据写死了。这两个可以选择一个测试。

例如：1.

@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {

String uname= request.getParameter("uname");//利用JDBC检索uname是否在用户表中存在

PrintWriter out =response.getWriter();//向客户端输出响应结果

out.print("{‘flag‘:1}");

}

例如2.我的是动态连接数据库的。

packagecom.wgh;importjavax.servlet.ServletException;importjavax.servlet.annotation.WebServlet;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjava.io.IOException;importjava.io.PrintWriter;import java.sql.*;

@WebServlet(name= "ServletXml")public class ServletXml extendsHttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {

String name= request.getParameter("name");

System.out.println(name);

PrintWriter pw=response.getWriter();

String[] str= new String[10];//进行数据库链接，查询数据库中用户名是否存在的操作

try{

Class.forName("com.mysql.jdbc.Driver");

String url= "jdbc:mysql://localhost:3306/z_shop";

String username= "root";

String pwd= "root";

Connection conn=DriverManager.getConnection(url,username,pwd);

String sql= "select count(*) FROM td_name where Username=? ";

PreparedStatement ps=conn.prepareStatement(sql);

ps.setString(1,name);

ResultSet rs=ps.executeQuery();

rs.next();

System.out.println(rs.getInt(1));if (rs.getInt(1)==0) {

pw.print("{‘flag‘:0}");

}else{

pw.print("{‘flag‘:1}");

}

}catch(ClassNotFoundException e) {

e.printStackTrace();

}catch(SQLException e) {

e.printStackTrace();

}

System.out.println(name);

}protected void doGet(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {

doPost(request,response);

}

}

最后记得在web.xml文件中进行注册哦！

ServletXml

com.wgh.ServletXml

ServletXml

/ServletXml

注意：

1.本项目中用的JSON知识点，是需要导JSON的jar包的哦，

2.在src中Servle一定要放在包中，默认包可能不识别。

如果有错的地方请多多包含。代码我运行过，可以起来的。