1 <html>
2 <head>
3 <title></title>
4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
5 <script type="text/javascript">
6 var xmlhttp;
7 function submit(){
8 //1.创建XMLHttpRequest对象
9 if(window.XMLHttpRequest){
10 //建立IE7,IE8,FireFox,Mozilla,Safari,Opera对象
11 xmlhttp=new XMLHttpRequest();
12 if(xmlhttp.overrideMimeType){
13 xmlhttp.overrideMimeType("text/xml");
14 }
15 }else if(window.ActiveXObject){
16 //建立IE5,IE6对象
17 var activexName=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML.2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];
18 for(var i=0;i<activexName.length;i++){
19 try{
20 xmlhttp=new ActiveXObject(activexName[i]);
21 break;
22 }catch(e){}
23 }
24 }
25 //无法创建对象
26 if(xmlhttp===undefined || xmlhttp===null){
27 alert("当前浏览器不支持创建XMLHttpRequest对象,请更换浏览器");
28 return;
29 }
30
31 //2.注册回调方法,监听是否成功
32 xmlhttp.onreadystatechange=callback;
33
34 //固定用法,获取文本框中用户输入的内容
35 var userName=document.getElementById("UserName").value;
36
37 //3.使用open方法设置和服务器端交互的基本信息
38 xmlhttp.open("POST","AJAX",true);
39
40 //POST方式交互所需要增加的代码,用于查询响应中的某个字段的值
41 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
42
43 //4.设置发送的数据,开始和服务器端交互
44 xmlhttp.send("name=" + userName);
45 }
46
47 function callback(){
48 //5.判断和服务器端的交互是否完成,和服务器端是否返回了正确的数据
49
50 if(xmlhttp.readystate===4 && xmlhttp.status===200){
51
52 //获得字符串形式的响应数据
53 var message=xmlhttp.responseText;
54
55 //获得xml形式的响应数据
56 //使用的前提是,服务器端需要设置content-type为text/xml
57 //var domXml=xmlhttp.responseXML;
58
59 //固定用法,向div标签中填充文本内容的方法
60 var div=document.getElementById("message");
61 div.innerHTML=message;
62 }
63 }
64 </script>
65 </head>
66 <body>
67 <input type="text" id="UserName"/>
68 <input type="button" onclick="submit()" value="校验用户名"/>
69 <br/>
70 <div id="message"></div>
71 </body>
72 </html>
时间： 2024-12-27 07:36:45