现在的位置: 首页 > 综合 > 正文

第一次使用Ajax

2014年02月19日 ⁄ 综合 ⁄ 共 1581字 ⁄ 字号 评论关闭

ajax简介

    AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

    AJAX = 异步 JavaScript 和 XML。

    AJAX 是一种用于创建快速动态网页的技术。

    通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

 (以上摘自w3school) 

这是第一次我使用ajax的jsp源文件,包括ajax.jsp和check.jsp。

<!-- ajax.jsp-->
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>    
    <title>Ajax使用</title>    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type='text/javascript'>
		var req;
		function check(){
			var field = document.getElementById("user");
			var url = "check.jsp?id="+escape(field.value);
			if(window.XMLHttpRequest){
				req = new XMLHttpRequest();
			}else if(window.ActiveXObject){
				req = new ActiveXObject("Microsoft.XMLHTTP");
			}
			req.open("Get", url, true, null, null);
			req.onreadystatechange = callback;
			req.send(null);
		}
		
		function callback(){
			if(req.readyState ==  4){
				if(req.status == 200){
					document.getElementById("check").innerHTML = req.responseText;
				}
			}
		}
	</script>
  </head>
  
  <body >
    <form>
    	<table align='center'>
    	    <tr>
                <td>用户名</td>
                <td><input type='text' id='user' onblur='check()'/></td>
                <td id='check'></td>
            </tr>
    	</table>
    </form>
  </body>
</html>

下面是check.jsp

<%--check.jsp --%>
<%
	response.setCharacterEncoding("utf-8");
	response.setContentType("text/xml");
	response.setHeader("Cache-Control","no-store");
	response.setHeader("Pragma","no-cache");
	response.setDateHeader("Expires", 0);
	response.getWriter().write("OK ");
 %>

抱歉!评论已关闭.