ajax 初识 w3cschool

处理数据的三种方式

xmlhttp.responseText

ajax.html

<form method="get">
<input type="text" name="name" id="name" onchange="checkUserAjax();"/> <br/>
<div id="msg"></div>
<input type="text" name="age" id="age" /><br />
</form>

check.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String name = request.getParameter("name");
System.out.println("xxx  " + name);

String msg = "success";
if("admin".equals(name)){
msg = "fail";
}
out.print(msg);
%>

ajax.js

function $(id){
return document.getElementById(id);
}

function createXHR(){
var xmlhttp = null;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}

function checkUserAjax(){
// 1
var name = $("name").value;
var xmlhttp = createXHR();

//2

xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var str = xmlhttp.responseText;
$("msg").innerHTML = str;
//$("statuMsg").innerHTML=xmlhttp.responseText;
if(str=="fail"){
$("name").focus();
}

}
}

xmlhttp.open("GET", "check.jsp?name="+name, true);
xmlhttp.send();

//alert(xmlhttp.responseText);
}