ajax(Asynchronous JavaScript and XML).
先看段代码,然后再分析这段代码:
jsp页面:
<span style="white-space:pre"> </span><body>
<span style="white-space:pre"> </span> <label for="txt_username">
<span style="white-space:pre"> </span> 姓名:</label>
<span style="white-space:pre"> </span> <input type="text" id="txt_username" />
<span style="white-space:pre"> </span> <br />
<span style="white-space:pre"> </span> <label for="txt_age">
<span style="white-space:pre"> </span> 年龄:</label>
<span style="white-space:pre"> </span> <input type="text" id="txt_age" />
<span style="white-space:pre"> </span> <br />
<span style="white-space:pre"> </span> <input type="button" value="GET" id="btn" οnclick="btn_click();" />
<span style="white-space:pre"> </span> <div id="result">
<span style="white-space:pre"> </span> </div>
<span style="white-space:pre"> </span></body>
js代码:
<script type="text/javascript">
function btn_click(){
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open(get,"index.do?username="+username+"&password="+password, true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
document.getElementById("result").innerHTML=xhr.responseText;
}
}
xhr.send(null);
}
</script>
现在来分析这段代码,ajax只能写在JavaScript中,因为ajax需要在不刷新页面的情况下执行某种动作,只能用JavaScript来执行动作。
在JavaScript代码中,首先获取XMLHttpRequest对象。
XMLHttpRequest对象可以再不向服务器提交整个页面的条件下,实现页面的局部刷新。XMLHttpRequest对象是AJAX的核心。
XMLHttpReuest现在以获取浏览器的全面支持,但是不同版本浏览器获取的方式不同,所以获取是要判断不同的浏览器版本。
xhr.open(get,"index.do?username="+username+"&password="+password, true);
xhr.open(method,url,async);规定请求的类型、URL 以及是否异步处理请求。
类型:get和post方式。
那什么时候使用get?什么时候使用post?
大多数情况下,get比post请求更加高效,快捷。
当出现以下情况是推荐使用post请求。
1、传输的数据量过大时,用get传输显得过去不清楚,或者超出了get的传输范围时。
2、跳过浏览器缓存。有些浏览器在短时间能请求相同地址时,浏览器不会真的访问服务器重新进行请求,会调用浏览器的缓存。如果你想跳过缓存时,推荐使用post。用get也是可以,只要在URL后面添加个随机数就行,但显得比较繁琐
3、出现未知字符时,推荐使用post。
如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
xmlhttp.open("POST","ajax_test.asp",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Bill&lname=Gates");
setRequestHeader:向请求添加 HTTP 头。header: 规定头的名称value: 规定头的值.
在send中添加数据。
xhr.onreadystatechange=function()
当XMLHttpRequest对象的状态发生改变时,调用这个方法,执行动作。
if(xhr.readyState==4 && xhr.status==200)
属性 | 描述 |
---|---|
onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
status | 200: "OK" 404: 未找到页面 |
document.getElementById("result").innerHTML=xhr.responseText;
xhr对象有两种返回方法:responseText()和responseXML()。
前一种只能返回字符串或者是json格式,后者接收的是xml格式的信息。
下面介绍json和xml的解析方式。
function loadXMLDoc(url)
{
var xmlhttp;
var txt,xx,x,i;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
txt=txt + "<tr>";
xx=x[i].getElementsByTagName("TITLE");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("ARTIST");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('txtCDInfo').innerHTML=txt;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
json的解析方式:暂时先不讲,等会修改后再说,