1、ajax asynchronous javascript and xml,为了解决传统的 web应用当中“提交-等待-提交”模式而产生的一种 技术，其实质是通过javascript调用浏览器内置的一个 特殊对象(XmlHttpRequest)向服务器异步发送请求， 服务器以xml或者文本的形式返回数据给XmlHttpRequest, ，然后，通过javascript从XmlHttpRequest中获取数据， 更新页面。在整个过程当中，页面无刷新。 2、ajax编程 step1 获得XmlHttpRequest对象。 ie与其它浏览器不一样，其它浏览器都可以用 new XmlHttpRequest()获得，而ie要使用ActiveXObject。 function getXmlHttpRequest(){ var xmlHttpRequest = null; if ((typeof XMLHttpRequest) != 'undefined') { xmlHttpRequest = new XMLHttpRequest(); } else { // IE xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp'); } return xmlHttpRequest; } step2 使用XmlHttpRequest发送请求。 1)发送get请求 var url="some.do?name=zs"; xhr.open("get",url,true); get:表示请求方式，可以大写。 url:请求的地址，后面可以添加参数 true:异步请求。 xhr.send(null); 2)发送post请求 var url="some.do"; xhr.open("post",url,true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send("name=zs"); step3 服务器处理请求，返回数据 step4 使用回调函数来处理服务器返回的数据 var url="some.do"; xhr.open("get",url,true); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ var text = xhr.reponseText;//返回的是文本 var xml = xhr.responseXML;//返回的是xml数据 //使用返回的数据更新页面 document.getElementById('a1').innerHTML=text; } }; xhr.send(null); //get方式，参数要加在url后面 //post方式，参数要加在send()里 3、XmlHttpRequest对象 readyState属性：XmlHttpRequest与服务器通讯的状态。 0(创建完毕) ：XmlHttpRequest对象已经创建好， 但没有调用open方法。 1(初始化):XmlHttpRequest没有调用send()方法。 2(发送):XmlHttpRequest开始发送数据给服务器。 3(获取数据):XmlHttpRequest，正获取服务器返回的数据 4(获取数据完毕):此时，可以通过XmlHttpRequest获得服务器 返回的所有数据。 reponseText属性：服务器返回的文本。 responseXML属性：服务器返回的xml数据。 onreadystatechange属性：用来设置回调函数，即 处理服务器返回的数据。 status属性：返回服务器的状态码(200,500,404)。
1 <%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> 2 <html> 3 <head> 4 <title>Insert title here</title> 5 <style> 6 #d1{ 7 width:400px; 8 height:200px; 9 margin-top:30px; 10 margin-left:40px; 11 border 1px solid black; 12 background-color:#cccccc; 13 padding-left:30px; 14 padding-top:30px; 15 } 16 </style> 17 <script type="text/javascript"> 18 function getXmlHttpRequest(){ 19 var xmlHttpRequest = null; 20 //初始化xmlHttpRequest对象 21 if ((typeof XMLHttpRequest) != 'undefined') { 22 // FF 23 xmlHttpRequest = new XMLHttpRequest(); 24 } 25 else { 26 // IE 27 xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp'); 28 } 29 return xmlHttpRequest; 30 } 31 function f1(value){ 32 var xhr = getXmlHttpRequest(); 33 xhr.open("post","getProduct",true); 34 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 35 xhr.onreadystatechange = function(){ 36 if(xhr.readyState == 4){ 37 var s2 = document.getElementById('s2'); 38 var txt = xhr.responseText; 39 var arr = txt.split(";"); 40 for(i=0;i<arr.length;i++){ 41 var str = arr[i].split(":"); 42 var op = new Option(str[0],str[1]); 43 s2.options[i] = op; 44 } 45 } 46 } 47 xhr.send("catalog=" + value); 48 } 49 </script> 50 </head> 51 <body style="font-size:30pt;"> 52 <div id="d1"> 53 <select style="150px;" name="s1" id="s1" 54 onchange="f1(this.value);"> 55 <option value="car"> 56 汽车 57 </option> 58 <option value="ryp"> 59 日用品 60 </option> 61 </select> 62 <select style="150px;" name="s2" id="s2"> 63 </select> 64 </div> 65 </body> 66 </html>
1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 <html> 4 <head> 5 <title>Insert title here</title> 6 <script type="text/javascript"> 7 function getXmlHttpRequest(){ 8 var xmlHttpRequest = null; 9 if ((typeof XMLHttpRequest) != 'undefined') { 10 xmlHttpRequest = new XMLHttpRequest(); 11 } 12 else { 13 // IE 14 xmlHttpRequest = 15 new ActiveXObject('Microsoft.XMLHttp'); 16 } 17 return xmlHttpRequest; 18 } 19 function test(){ 20 var req = getXmlHttpRequest(); 21 alert(req); 22 } 23 function valiusername(){ 24 var xhr = getXmlHttpRequest(); 25 var url = "valiusername.do?username=" + document.getElementById('username').value; 26 xhr.open("get",encodeURI(url),true); 27 xhr.onreadystatechange=function(){ 28 if(xhr.readyState == 4){ 29 if(xhr.status == 200){ 30 var txt = xhr.responseText; 31 var s1 = document.getElementById('username_msg'); 32 s1.innerHTML = txt; 33 }else{ 34 var s1 = document.getElementById('username_msg'); 35 s1.innerHTML='system error'; 36 } 37 }else{ 38 var s1 = document.getElementById('username_msg'); 39 s1.innerHTML = 'checking...'; 40 } 41 }; 42 xhr.send(null); 43 } 44 45 function valiusername2(){ 46 var xhr = getXmlHttpRequest(); 47 xhr.open("post","valiusername.do",true); 48 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 49 xhr.onreadystatechange=function(){ 50 if(xhr.readyState == 4){ 51 var txt = xhr.responseText; 52 document 53 .getElementById("username_msg").innerHTML=txt; 54 }else{ 55 document 56 .getElementById("username_msg").innerHTML='正在验证...'; 57 } 58 } 59 xhr.send("username=" + document.getElementById("username").value); 60 61 } 62 63 </script> 64 </head> 65 <body style="font-size:30pt;"> 66 <form action="regist.do" method="post"> 67 username:<input type="text" name="username" onblur="valiusername2();" id="username"/> 68 <span style="color" id="username_msg"></span> 69 <br/> 70 age:<input type="text" name="age"/><br/> 71 <input type="submit" value="confirm"/> 72 </form> 73 </body> 74 </html>