Ajax入门(与Java服务器交互)(一)

前端之家收集整理的这篇文章主要介绍了Ajax入门(与Java服务器交互)(一)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

AJAX即“Asynchronous JavaScript and XML(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户

工作方式简析

传统的前台后台交互的方式为:前台向服务器发送请求,服务器处理完请求后再将数据返回到前台页面,在服务器处理请求过程中,用户必须等待服务器的响应,在这段时间内用户不能干别的事情。而采用Ajax技术后,当用户前台页面向服务器发送请求时,并不影响用户的其它操作,用户还可以浏览页面其它的内容或进行其它操作,这种方式并不打断用户的体验。举例说明:当我们在某论坛进行帐号注册时,传统方式可能是当我们填写完所有信息后,一起发送给服务器进行验证,如果出错,在返回该页面。使用Ajax后,并不需要这样。我们可以每填写一项,就可以发送给服务器,服务器判断是否合法,在返回信息。在服务器处理过程中,我们不必等代,可以填写下面的选项,而不必等待上面信息验证后才能填写下面信息。

图解普通方式:

图解Ajax的工作方式:


Ajax与服务器交互步骤

第一步:创建XMLHttpRequest对象

第二步:注册回调函数

第三步:设置连接信息

第四步:向服务器发送数据

第五步:接收服务器返回数据

实例演示

前台页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Ajax测试</title>
		<script type="text/javascript">
		<!--
			var xmlHttp;
			function createXmlHttp(){
				if(window.XMLHttpRequest) {
					//针对 Firefox,Chrome,Opera,Safari,IE7,IE8
					xmlHttp = new XMLHttpRequest();
				} else if(window.ActiveXObject) {
					//针对IE6,IE5
					xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
			}
			function verify() {
				var username = document.getElementById("username").value;
				
				//第一步:创建XMLHttpRequest对象
				createXmlHttp();
				
				//第二步:注册回调函数
				xmlHttp.onreadystatechange = callBack;
				
				//第三步:设置连接信息
				xmlHttp.open("GET","servlet/AjaxServlet?username="+username,true);
	
				//第四步:向服务器发送数据
				xmlHttp.send(null);
			}
			
			function callBack() {
				//第五步:接收服务器返回数据
				//判断对象的是否交互完成
				if(xmlHttp.readyState == 4) {
					//判断Http的交互是否成功
					if(xmlHttp.status == 200) {
						//获取服务器返回数据
						//获取服务器输出的纯文本格式
						var responseText = xmlHttp.responseText;
						//将数据显示页面
						var usernameMsg = document.getElementById("usernameMsg");
						usernameMsg.innerHTML = responseText;
					}
				}
			}
		-->
		</script>
    </head>
    <body>
    	<form method="post" action="servlet/AjaxServlet">
    		用户名:<input type="text" name="username" id="username" /><span id="usernameMsg"></span><br/>
			<input type="button" value="测试" onclick="verify();"  />
		</form>
    </body>
</html>

代码解析

xmlHttp.open()方法参数:

参数一:表示Http的请求方式,get或post方式,按照HTTP规范,该参数要大写;否则,某些浏览器(如Firefox)可能无法处理请求。
参数二:请求URL的地址,get方式的参数在url中(本例采用get方式,以后会讲解post方式)
参数三:采用同步还是异步交互方式,true为异步方式

GET 还是 POST方式?

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

然而,在以下情况中,请使用 POST 请求:

  • 无法使用缓存文件(更新服务器上的文件数据库
  • 向服务器发送大量数据(POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

xmlHttp.readyState的状态参数:

0:请求未初始化
1:服务器连接已建立
2:请求已接收
3:请求处理中
4:请求已完成,且响应已就绪


服务器端代码

package com.zyh.first;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxServlet extends HttpServlet {

	private static final long serialVersionUID = -4985183154715703715L;

	public AjaxServlet() {
		super();
	}

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

	public void doPost(HttpServletRequest request,IOException {
		
		//1.取参数
		//2.检查参数是否有问题
		//3.校验操作
		//4.ajax返回相应数据

		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		
		String old = request.getParameter("username").trim();
		if(null==old || "".equals(old)) {
			out.println("<strong>用户名不能为空!</strong>");
		} else {
			if("zyh".equals(old)) {
				out.println("<strong>用户名[" + old + "],已存在!</strong>");
			} else {
				out.println("<strong>用户名[" + old + "],不存在!</strong>");
			}
		}
		
		out.flush();
		out.close();
	}

}
原文链接:https://www.f2er.com/ajax/165946.html

猜你在找的Ajax相关文章