ajax 初识 w3cschool

来源：互联网发布：手机淘宝自定义模块编辑：程序博客网时间：2024/05/17 01:03

处理数据的三种方式

text :

xmlhttp.responseText

xml: xmlhttp.responseXML

json: javascript的原生对象，通过eval函数转换，eval("("+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, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlhttp=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);}

1 0