文章简介:Ajax(Asynchronous JavaScript and XML),使用户在使用Web程序时,不用在来来回回的Post了,可以近乎实时的从客户端收到服务器返回的信息,而无需刷新,极大的非富了用户的操作体验。 |
Ajax(Asynchronous JavaScript and XML),使用户在使用Web程序时,不用在来来回回的Post了,可以近乎实时的从客户端收到服务器返回的信息,而无需刷新,极大的非富了用户的操作体验。
XMLHttpRequest对象是Ajax的核心对象
不同的浏览器,建立对象的方式不同这里以IE为例
var request = new ActiveXObject("Microsoft.XMLHTTP")
XMLHttpRequest对象的方法和属性:
open(request-type,url,asynch,username,password):建立到服务器的新请求。
request-type 发送请求的类型:get,post,head
url 要连接的url
asynch 可选参数,如使用异步连接为true,如使用同步连接为false,默认值为true
username 可选参数,如果需要身份验证,则可以在此指定用户名,无可选参数
password 可选参数,如果需要身份验证,则可以在此指定口令,无可选参数
send(content):向服务器发送请求。
content 要发送的内容
abort():退出当前请求。
readyState:提供当前 HTML 的就绪状态。
0:请求未初始化
1:请求已经建立,但是还没有发送(还没有调用 send())
2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)
3:请求在处理中,通常响应中已有部分数据可用了
4:响应已完成
status:提供当前HTML的状态码
401:未经授权
403:禁止访问
404:没找到访问页
200:正常
XMLHttpRequest对象的Head请求
取得Response的Header
request.getAllResponseHeaders();
request.getResponseHeader("Server");
request.getResponseHeader("Connection");
request.getResponseHeader("Date");
request.getResponseHeader("Content-Length");
request.getResponseHeader("Keep-Alive");
request.getResponseHeader("X-Cache");
request.getResponseHeader("Content-Type");
设置Request的Header
request.setRequest("Server") = "";
request.setRequest("Connection") = "";
request.setRequest("Date") = "";
request.setRequest("Content-Length") = "";
request.setRequest("Keep-Alive") = "";
request.setRequest("X-Cache") = "";
equest.setRequest("Content-Type") = "";
一、异步调用的程序示例
<script language="JavaScript">
var request = new ActiveXObject("Microsoft.XMLHTTP"); //建立XMLHttpRequest对象
function sendRequest()
{
url = "http://www.webjx.com/web_design.asp?Name=" + Value; //设置要发送的Url,发送的值为键值对
request.open("get",url,true); //调用open方法
request.onreadystatechange = showMessage; //设置服务器要回调的方法
request.send(null); //发送
}
function showMessage()
{
if(request.readyState == 4 && request.status == 200)
{
alert(request.responseText);
}
}
</script>
二、同步调用程序示例
<script language="JavaScript">
var request = new ActiveXObject("Microsoft.XMLHTTP"); //建立XMLHttpRequest对象
function sendRequest()
{
url = "http://www.webjx.com/web_design.asp?Name=" + Value; //设置要发送的Url,发送的值为键值对
request.open("get",url,false); //调用open方法
request.send(null); //发送
alert(request.responseText);
}
</script>
异步请求程序示例说明:程序首先建立了XMLHttpRequest对象,之后以异步的方法执行请求,onreadystatechange是在请求状态发生改变时,服务器要回调的客端方法,要在send()方法之前设置,在showMessage()方法里,当readState的状态为4且 status为200时,执行操作同步请求与异步请求的差别在于,同步请求时,客户端要行进等待,当服务器处理完请求后再在执行以下的程序,而异步请求不必如此,客户端的程序在请求发出之后就可以继续执行,而不必等待,直到服务器处理后,再回调用onreadystatechange注册的方法。
三、请求Head的程序示例
<script language="JavaScript">
var request = new ActiveXObject("Microsoft.XMLHTTP"); //建立XMLHttpRequest对象
function sendRequest()
{
url = "http://www.webjx.com/web_design.asp"; //要发送的Url
request.open("head",url,true); //调用open方法
request.onreadystatechange = showMessage; //设置服务器要回调的方法
request.send(null); //发送
}
function showMessage()
{
if(request.readyState == 4 && request.status == 200)
{
alert(request.getAllResponseHeaders()); //取得Header的值
}
}
</script> 这个方法与上一个方法的不同之处就在于open()方法的第一个参数是head,我们可以重写showMessage以取得相应的Head值
function showMessage()
{
if(request.readyState == 4 && request.status == 200)
{
alert(request.getResponseHeader("Server"));
alert(request.getResponseHeader("Connection"));
alert(request.getResponseHeader("Date"));
alert(request.getResponseHeader("Content-Length"));
alert(request.getResponseHeader("Keep-Alive"));
alert(request.getResponseHeader("X-Cache"));
alert(request.getResponseHeader("Content-Type"));
}
} 四、发送XML数据
XMLHttpRequest对象可向服务器发送XML格式的数据,但这样做会降低程序的响应速度,因为与普通的文本相比,XML格式的数据,要处理更多额外的东西,建议没有必要的情况下,不要使用XML
发送XML数据的程序示例
<script language="JavaScript">
var request = new ActiveXObject("Microsoft.XMLHttpRequest"); //建立XMLHttpRequest对象
function sendXmlRequest()
{
xml = ""; //XML数据
url = "http://www.webjx.com/web_design.asp"; //设置发送的Url
request.open("post",url,false); //调用open方法
request.setRequestHeader("Content-Type","text/xml"); //设置发送请求的头
request.send(xml);
//要执行的程序
}
</script>