AJAX与Servlet的相关使用

最新推荐文章于 2022-03-18 15:03:55 发布

爆米花机枪手

最新推荐文章于 2022-03-18 15:03:55 发布

阅读量1.4k

点赞数

分类专栏： AJAX 文章标签： servlet AJAX javascript

本文链接：https://blog.csdn.net/qqHJQS/article/details/38795409

版权

AJAX 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

使用AJAX大多数还是与servlet有关系的，尝试了好多次，感觉这种写法比较好！（不喜勿喷）

以检测用户名是否存在为例：

首先创建jsp页面;代码如下

  <body>
    用户名:<input type="text" id="username"/><br>
    <div id="checkdiv"> </div>
    <input type="button" id="button" value="按钮" οnclick="check()"/>
  </body>

然后编写javasc页面：

<script type="text/javascript">
   var xmlhttp;
    //获取
	  function createXmlHttp() {
	    //根据window.XMLHttpRequest对象是否存在使用不同的创建方式
	    if (window.XMLHttpRequest) {
	       xmlHttp = new XMLHttpRequest();                  //FireFox、Opera等浏览器支持的创建方式
	    } else {
	       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式
	    }
	  }
  
  function check(){
 
 	var name = document.getElementById("username").value;
 	createXmlHttp();                        //创建XmlHttpRequest对象
	xmlHttp.onreadystatechange = checkName;
	xmlHttp.open("GET", "test?username=" + name, true);
	xmlHttp.send(null);
  }
  function checkName(){
  			if (xmlHttp.readyState == 4) {
		        var value = xmlHttp.responseText;                        //取得地区信息
		
		        //当地区信息包含数据时将信息写回到文本框中
		     document.getElementById("checkdiv").innerHTML=value;
		    }
  }
</script>

创建AJAX可以使用这样的步骤：

1、创建全局变量xmlHttp;

2、编写初始化方法createXmlHttp(),什么时候需要用到xmlHttp,直接createXmlHttp();

3、调用onreadystatechange方法;

4、编写收到servlet传来值的方法;

Servlet按照正常创建即可

如有乱码问题可以再servlet中补充这样的代码：

response.setContentType("text/html;charset=UTF-8");
request.setCharacterEncoding("utf-8");

test文件的内容为：

public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=UTF-8");
		request.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		String name = request.getParameter("username");
		if(name.equals("wxc")){
			out.println("用户名已存在");
		}else{
			out.println("用户可以使用");
		}
	}

创建好文件，发布到服务器上便可运行：

就是这样。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。