<style type="text/css">
.tishi{
color: red;
}
</style>
<script type="text/javascript">
function getAjax(){
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}
xhr.open("get", "getAjax03", true);
xhr.onreadystatechange = function(){
var jsonObj;
if(xhr.readyState==4){
jsonObj = JSON.parse(xhr.responseText);//可以将json字符串转换成json对象，用在前台js中。
alert("json对象："+jsonObj);
alert("json字符串"+xhr.responseText);
alert("json字符串，使用stringify(jsonObj)"+JSON.stringify(jsonObj));//可以将json对象转换成json对符串 ，用在action中(java代码中)。
alert("姓名："+jsonObj.name);
alert("性别："+jsonObj.sex);
}
}
xhr.send(null);
}
function checkName(){
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}
xhr.open("get", "getAjax03?userName="+document.getElementById('userName').value+"", true);
var jsonObj;
var jsonStr;
var jiaoyan = document.getElementById("userName").value; //用于获取到输入框的值
var jiaodian = document.getElementById("userName"); //用于设置默认焦点，注意与上面一行的差别。
alert("jiaoyan:"+jiaoyan);
if(jiaoyan===""||jiaoyan===undefined){
alert("用户名不能为空");//判断是否为空;
jiaodian.focus(); //设置默认焦点,把默认焦点设置为注册用户名的input中。
}
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
jsonStr = xhr.responseText;
alert("jsonStr:"+jsonStr);
jsonObj = JSON.parse(jsonStr);
var userName = jsonObj.userName;
document.getElementById("span").innerHTML=userName;
//注意上面的innerHTML属性,而不是.value属性,切记,给页面上的span标签设置值。
}
}
xhr.send(null);
}
</script>
<body> 失去焦点值：<input type="text" onclick="getAjax()" id="a" /></br> 注册名:<input type="text" onblur="checkName()" id="userName" /><span class="tishi" id="span"></span></br> 密码:<input type="text" onblur="checkPassWord()" id="password" /></br> </body>
下面是Java代码：
public class GetAjax03 extends HttpServlet{
@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
JSONObject jsonObj = new JSONObject();
jsonObj.put("name", "weiyongle");
jsonObj.put("sex", "nan");
System.out.println("jsonObj:"+jsonObj);
String userName = request.getParameter("userName");
System.out.println("userName:"+userName);
if(userName.equals("weiyongle")){
jsonObj.put("userName", userName+"已经注册，请修改注册名");
}else{
jsonObj.put("userName", userName+"可以正常注册");
}
out.print(jsonObj);
System.out.println("jsonObj:"+jsonObj);
out.close();
}
}
下面是web.xml
<servlet> <servlet-name>getAjax</servlet-name> <servlet-class>com.wyl.web.GetAjax03</servlet-class> </servlet> <servlet-mapping> <servlet-name>getAjax</servlet-name> <url-pattern>/getAjax03</url-pattern> </servlet-mapping>