`
郑睿9
  • 浏览: 161824 次
  • 性别: Icon_minigender_2
  • 来自: 浙江
社区版块
存档分类
最新评论

AJAX初步接触

AjaxServletJavaScriptXML浏览器 
阅读更多

 AJAX，即Asynchronous JavaScript And XML，是一种异步JavaScript和XML技术。AJAX的核心技术理念在于使用XMLHttpRequest对象发送异步请求。

 

 

AJAX用到的技术有：

javascript:实现客户端的数据发送和界面更新，是AJAX实现的编程语言;

XMLHttpRequest：浏览器内置的用以进行异步数据发送和接收的对象，是AJAX核心对象;

 Css+div:用户界面更加友好;

 DOM模型：AJAX常见的技巧就是使用js响应dom组件事件或更新;

 Xml:XML仅是一种传输数据的格式，在ajax应用中常以xml格式在c/s间交换数据;

 Html:基础

 

  使用AJAX三部曲：

  首先，创建XMLHttpRequest对象；

  其次，编写回调机制；

  最后，发送请求。

  下面我就用一个简单的示例来说明AJAX运行机制。

   第一步，创建XMLHttpRequest对象

//定义request对象
var request;
//创建request对象
function createHttpRequest(){
	if(window.ActiveXObject){
		request=new ActiveXObject("Microsoft.XMLHTTP");}
	else if(window.XMLHttpRequest){
		request=new XMLHttpRequest();
		}
	else{
		alert("AJAX is not supported by your Browser!");}
}

 

    第二步，绑定回调方法

//判定request是否创建成功并且浏览器处于OK的状态
//编写回调机制
//绑定
function processName(){
	if((request.readyState==4)&&(request.status==200)){
		alert("服务器返回的是："+request.responseText);
		document.getElementById("nameerror").innerHTML=request.responseText;
		}
}

 

   第三步，发送请求

  

//发送异步请求
function checkName(){
	//创建request对象
	createHttpRequest();
	//回调机制
	request.onreadystatechange=processName;
	//向servlet发送request请求
	//第一个参数是发送请求方式   ：post与get
	//第二个参数是要发送到的servlet
	//第三个参数是判断是同步还是异步请求。若true，异步；若false，则同步
	request.open("POST","CheckNameServlet",true);
	request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	//传送参数
	var username=document.getElementById("username").value;
	request.send("username="+username);	
}

 

   JSP界面

  

<body>
<div>
<form name="userinfoForm" action="CheckLoginUserinfo.action" method="post">
<table>
<tr>
<td>用户：<input type="text" name="username" id="username" onBlur="checkName();" /></td>
</tr>
<div id="nameerror" style="color:blue">
</div>
<tr>
<td>密码：<input type="password" name="pwd" id="pwd" size="20" /></td>
</tr>
<div id="pwderror" style="color:yellow">
</div>
<tr>
<td><input class="buttons" type="submit" value="注册" /></td>
<td>
<input class="buttons" type="reset" value="重置" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

 

   后台检测输入的用户名是否为netjva的代码

 

package cn.netjava.servlet;

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;

/**
 * Servlet implementation class CheckNameServlet
 */
public class CheckNameServlet extends HttpServlet {
       
	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=gbk");
		PrintWriter out=response.getWriter();
		String username=request.getParameter("username");
		if(!username.equals("netjava")){
		out.println("用户名不正确！");	
		}
	}

}

 

 当鼠标焦点离开用户名输入框时，就会调用checkName函数，当用户输入名不为netjava，在界面上输出显示用户名不正确。

 

分享到：
| 8月4号日志
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics