AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容，AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
1、XMLHttpRequest对象
IE5和IE6使用ActiveXObject对象
在使用之前需要先判断一下是否支持
|
1
2
3
4
5
6
7
|
var
xmlhttp;
if
(window.XMLHttpRequest){
xmlhttp =
new
XMLHttpRequst();
}
else
{
//IE5,IE6
xmlhttp =
new
ActiveXObject(
"Microsoft.XMLHTTP"
);
}
|
向服务器发送请求
xmlhttp.open("GET" , url , true);
xmlhttp.send();
GET POST请求如何区别？
1、GET一般用于获取/查询资源信息 ，不会对资源产生影响，如同查询数据库一样，不对更改数据，而POST一般用于更新资源信息。
2、表面现象，GET请求的数据是依附在url之后的，如/login.action?username=admin&password=123，如果有中文，则会把字符串用BASE64加密；而POST请求则是将请求数据放在HTTP的包体当中，无法从浏览器中看到。
3、GET请求最大字节数为1024（这里不准确，长度是更具url的长度定的，不同的浏览器和不同的操作系统对url的长度限制不同，但是都有限制），而POST请求理论上没有限制，与第二点有关。
4、JSP中GET请求获取参数使用request.getParameter("key")来获取，而POST请求使用的是表单form，Request.Form。
5、POST请求比GET请求安全，与第二点有关，GET请求是将数据直接展示在url上，可以直接看到。
注意事项！
1、GET比POST快，使用于大部分情况；
2、在以下几个场景，需要使用POST请求
1）无法使用缓存文件（需要更新服务器上的文件或者数据库）
2）向服务器发送大量数据，POST请求没有数据量限制
3）发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
完整的ajax程序：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<!DOCTYPE>
<html>
<head>
<title>ajax学习</title>
<script>
function
loadXMLDoc(){
/*ajax执行语句*/
var
xmlhttp;
if
(window.XMLHttpRequest)
{
//主流浏览器
xmlhttp =
new
XMLHttpRequest();
}
else
{
//IE6 , IE5浏览器
xmlhttp =
new
ActiveXObject(
"Microsoft.XMLHTTP"
);
}
//发送请求到服务器
xmlhttp.onreadystatechange=
function
(){
if
(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById(
"mydiv"
).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open(
"GET"
,
"/try/ajax/demo_get.php"
,
true
);
//get请求， url地址， 异步
xmlhttp.send();
//发送
}
</script>
</head>
<body>
<p>这一段文本是</p>
<div id=
"mydiv"
>
</div>
<br>
<br>
<input type=
"button"
onclick=
"loadXMLDoc()"
value=
"点击加载"
>
</body>
</html>
|
为了防止每次请求获取的都是缓存的结果，可以在url后面加上随机数，保证每次请求都不一样
|
1
2
|
xmlhttp.open(
"GET"
,
"/try/ajax/demo_get.php?t="
Math.Random() ,
true
);
xmlhttp.send();
|
根据上面分析GET和POST请求区别，可以在url后面加上请求的信息
|
1
2
|
xmlhttp.open(
"GET"
,
"/try/ajax/demo_get.php?username=admin&password=123"
,
true
);
xmlhttp.send();
|
POST请求则url后面没有请求信息
|
1
2
|
xmlhttp.open(
"POST"
,
"/try/ajax/demo_get.php"
,
true
);
xmlhttp.send();
|
POST请求提交表单信息，需要通过setRequestHeader来设置HTTP头。send时将请求信息send出去
|
1
2
3
|
xmlhttp.open(
"POST"
,
"/try/ajax/demo_get.php"
,
true
);
//请求， url地址， 异步
xmlhttp.setRequestHeader(
"Content-type"
,
"application/x-www-form-urlencoded"
);
xmlhttp.send(
"username=admin&password=123"
);
//发送
|
open方法异步标志， true？false?
XMLHttpRequest对应如果需要使用open()方法时， 参数asysnc必须为true！
ajax的异步原理是：
-
在等待服务器响应时执行其他脚本
-
当响应就绪后对响应进行处理
上面的ajax代码中，当asysnc为true时，在响应函数onreadstatechange事件中，当处于就绪状态时执行的方法。
|
1
2
3
4
5
6
7
|
xmlhttp.onreadystatechange=
function
(){
if
(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById(
"mydiv"
).innerHTML = xmlhttp.responseText;
}
}
|
服务器响应
1、获取来自服务器的相应之后，获取相应数据，使用XMLHttpRequst的responseText或者responseXML属性来获取响应数据。
responseText可以直接用于html页面显示
responseXML需要解析
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
xmlhttp.onreadystatechange=
function
(){
if
(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
//document.getElementById("mydiv").innerHTML = xmlhttp.responseText;
xmlDoc = xmlhttp.responseXML;
txt =
""
;
x = xmlDoc.getElementsByTagName(
"ARTIST"
);
for
(i=0 ; i<x.length;i++)
{
txt = txt + x[i].childNodes[0].nodeValue +
"<br>"
;
}
document.getElementById(
"mydiv"
).innerHTML = txt;
}
}
|
onreadystatechange()事件函数
当XMLHttpRequest对象的readyState改变时，会触发改事件
readyState存放着XMLHttpRequest的状态信息
从上图可以看出，onreadystatechange事件会被触发5次
1111
722
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
