追逐WEB项目---------AJAX基础----------随想随写

欧阳凯少

2016-06-12

AJAX(Asynchronous Javascript and xml)
1.定义：是一种创建交互式网页应用的网页开发技术；
通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，

对网页的某部分进行更新；传统的网页如果需要更新，必须重载整个页面；(摘自百科)
2.实例解析：

--------------》效果图：

追逐WEB项目---------AJAX基础----------随想随写

解释：局部刷新技术给用户带来了极大地方便，用户不需要再输入所有信息然后点击提交，最后得知那条信息输入的不对，

必须重新输入；

--------------》实现步骤：

1.在jsp中调用使用了AJAX技术的方法 reg（）

<html>
<body>




   <!--省略代码-->
    <tr>
    <td style="width:110px">注册码</td>
    <td style="width:300px"><input name="register" type="text" class="logintext" style="border-color:#de9852;color:#000;"/>
    </td>
    <td style="width:150px"><input name=""  type="button" class="scbtn1" value="验证注册码" style="width:150px" onclick="reg()"/></td>
    <td style="width:300px"><span id="tip0"></span></td>
    </tr>
   <!--省略代码-->
</body>
</html>

2.在Javascript中写 reg（）

//===================================================================
//方法:AJAX,验证注册码
//===================================================================
function reg()
{
	//0.获取表单域的值ֵ
	var reg=document.getElementsByName("register");
	var register=reg[0].value;
	
	
//1.创建XMLHttpRequest对象
	if(window.XMLHttpRequest)//ie7以上版本、火狐、遨游、搜狗等
	{
		
		xmlhttp=new XMLHttpRequest();
		
	}else if(window.ActiveXObject)//IE7.0以下版本
	{
		
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		
	}
	
	
	if(xmlhttp)
	{
		
		//2.设置回调函数
		
		xmlhttp.onreadystatechange=call;
		//3.设置与服务器端连接信息
		//method:提交给服务器端方式,GET或者POST
		//url：服务器端页面
		//async:同步交互还是异步交互   true：表示异步
		xmlhttp.open("POST", "servlet/ValidatorRegisterServlet", true);
		xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		
		//4.向服务器发送请求
		xmlhttp.send("register="+register);
		
	}
	}

3.在Javascript中写回调函数

//5.编写回调函数
function call()
{
	if(xmlhttp.readyState==4 )
	{
		if(xmlhttp.status==200)
		{
	var text=xmlhttp.responseText;
	var s=document.getElementById("tip0");
	
	s.innerHTML="<font color=red>"+text+"</font>";

		
		}
	}
	}

4.servlet进行数据处理（这里使用的是假数据，没有与数据库的注册码对比）

response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		
		//从注册页面获取注册码
		String register=request.getParameter("register");
		//判断注册码是否正确
		if("123456".equals(register))
		{
			out.println("该注册码可用!");
			
		}else
		{
			out.println("该注册码不可用!");
		}
		out.flush();
		out.close();

ajax web技术 web开发