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="width: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="width: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>
浙公网安备 33010602011771号