var xmlhttp ;
function CreateXMLHttp(){
try{
xmlhttp = new XMLHttpRequest(); //创建 XMLHttpRequest 对象,除 IE 外的浏览器都支持此方法。
}
catch (e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");//新版本IE 创建 IE 兼容对象(Msxml2.XMLHTTP)
}
catch (e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //老版本IE创建IE兼容对象(Microsoft.XMLHTTP)
}
catch (failed){
xmlhttp = false; //如果失败则保证 request 的值仍然为 false。
}
}
}
return xmlhttp;
}
Ajax请求函数:
function sendRequest(){
var url = "http://127.0.0.1:8080/ch19_1/ajaxServlet?action=send";
CreateXMLHttp(); //创建Ajax对象函数的调用
if(xmlhttp){
xmlhttp.open("GET",url, true);
xmlhttp.onreadystatechange = getResult; //返回结果处理函数的调用
xmlhttp.send(null);
}
}
function getResult(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
var type = xmlhttp.responseXML.getElementsByTagName("type_name");
var str=new Array();
for(var i=0;i< type.length;i++){
str[i]=type[i].firstChild.data;
document.all['td'].innerHTML+=str[i]+"";
}
}
}
XMLHttpRequest 对象的三个重要的属性:
onreadystatechange 属性---存有处理服务器响应的函数
readyState 属性---存有服务器响应的状态信息。每当 readyState 改变时,onreadystatechange 函数就会被执行。
responseText 属性---通过 responseText 属性来取回由服务器返回的数据
这里要注意xmlhttp.readyState 的状态值,不同的值代表不同的状态:
0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建(未调用open()之前)或已被 abort() 方法重置
1 Open open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。
2 Send Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。
3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。
4 Loaded HTTP 响应已经完全接收。
例子1:
客户端脚本:
<html>
<body>
<script type="text/javascript">
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.myForm.time.value=xmlHttp.responseText
;
}
}
xmlHttp.open("GET","time.jsp",true)
;
xmlHttp.send(null)
;
</script>
<form name="myForm">
用户: <input type="text" name="username" onkeyup="ajaxFunction();" />
时间: <input type="text" name="time" />
</form>
</body>
</html>
服务器端脚本:time.jsp
<%
response.expires=-1
response.write(time)
%>
Expires 属性可设置在页面缓存失效前页面被缓存的时间(分钟)。Response.Expires=-1 指示页面不会被缓存。
例子2:
Get请求和Post请求的区别:
1.使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来
2.使用Get请求发送数据量小,Post请求发送数据量大
3.get请求需注意缓存问题,post请求不需担心这个问题
4.post请求必须设置Content-Type值为application/x-form-www-urlencoded
5.发送请求时,因为get请求的参数都在url里,所以send函数发送的参数为null,而post请求在使用send方法时,却需赋予其参数
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function btn_get_click() {
var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
var username = document.getElementById("txt_username").value;
var age = document.getElementById("txt_age").value;
//添加参数,以求每次访问不同的url,以避免缓存问题
xmlHttp.open("get", "Server.aspx?username=" + encodeURIComponent(username)
+ "&age=" + encodeURIComponent(age) + "&random=" + Math.random());
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById("result").innerHTML = xmlHttp.responseText;
}
}
//发送请求,参数为null
xmlHttp.send(null);
}
function btn_post_click() {
var xmlHttp = window.XMLHttpRequest ?new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
var username = document.getElementById("txt_username").value;
var age = document.getElementById("txt_age").value;
var data = "username=" + encodeURIComponent(username)+ "&age=" + encodeURIComponent(age);
//不用担心缓存问题
xmlHttp.open("post", "Server.aspx", true);
//必须设置,否则服务器端收不到参数
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById("result").innerHTML = xmlHttp.responseText;
}
}
//发送请求,要data数据
xmlHttp.send(data);
}
</script >
</head>
<body>
<label for="txt_username">
姓名:</label>
<input type="text" id="txt_username" />
<br />
<label for="txt_age">
年龄:</label>
<input type="text" id="txt_age" />
<br />
<input type="button" value="GET" id="btn_get" onclick="btn_get_click();" />
<input type="button" value="POST" id="btn_post" onclick="btn_post_click();" />
<div id="result">
</div>
</body>
</html>