最近研究了下ajax，贴出来分享下
AJAX (异步 javascript 和 XML) 是个新产生的术语，专为描述javascript的两项强大性能，这两项强大性能是：
1.无需重新装载整个页面便能向服务器发送请求.
2.对XML文档的解析和处理．
发送HTTP请求：
首先创造一个类实例
try{
request = new XMLHttpRequest();
}catch(trymicrosoft) {
try{
request = new ActiveXObject("Msxml2.XMLHTTP");
}catch(othermicrosoft){
try{
request = new ActiveXObject("Microsoft.XMLHTTP");
}catch (failed) {
request = false ;
}
}
}
得到响应后就用这句：
request.onreadystatechange = loginCallBack;
这里指出要用那个JS函执行，这里是loginCallBack函数，这里的函数无需括号也无需参数。
在定义了如何处理响应后,就要发送请求了。可以调用HTTP请求类的open()和send()方法，如下所示：
request.open("get",url,true);
request.send(null);
open()的第一个参数是HTTP请求方式 - GET，POST，HEAD 或任何服务器所支持的您想调用的方式。这个参数最好大写，某些浏览器(如Firefox)可能无法处理请求。
第二个参数是请求页面的URL.由于自身安全特性的限制,该页面不能为第三方域名的页面.同时一定要保证在所有的页面中都使用准确的域名,否则调用出错。
第三个参数设置请求是否为异步模式。如果是TRUE, javascript函数将继续执行，而不等待服务器响应。
如果第一个参数是post，send方法可以传递参数格式跟我们WEB开发是浏览器地址一回事，多个可以用&连接：？？=？？&？？=？？（用问号表示下）。
function loginCallBack(){
if(request.readyState == 4 )
if (request.status == 200 ){
var mess = request.responseText;
}
}
这里首先函数检查请求的状态，如果是4，就意味着一个完整的服务器响应已经收到了，可以处理该响应。
readyState的值如下:
0 (未初始化)
1 (正在装载)
2 (装载完毕)
3 (交互中)
4 (完成)
然后，函数会检查HTTP服务器响应的状态值，是200表示状态完整。
当这两个当满足后就可以处理数据了，取得数据的方式有两种：
request.responseText
request.responseXML
第一种是以文本字符串的方式返回服务器的响应；
第二种是以XMLDocument对象方式返回响应。
下面来看例子：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
</head>
<body>
<script type="text/javascript" language="javascript">
function gotoSubmit(){
getRequest();//获得请求
if(!request){
alert("该浏览器不支持XMLHttpRequest!");
return false;
}
request.onreadystatechange = loginCallBack;
var url = "index.jsp";
request.open("post",url,false);
//request.open("get",url,true);
request.send(null);
}
function getRequest(){
try{
request = new XMLHttpRequest();
}catch(trymicrosoft) {
try{
request = new ActiveXObject("Msxml2.XMLHTTP");
}catch(othermicrosoft){
try{
request = new ActiveXObject("Microsoft.XMLHTTP");
}catch (failed) {
request = false ;
}
}
}
}
function loginCallBack(){
if(request.readyState == 4 )
if (request.status == 200 ){
var mess = request.responseText;
}
}
</script>
<span
style="cursor: pointer; text-decoration: underline"
onclick="gotoSubmit()">
gotoSubmit
</span>
</body>
</html>
跑起工程后在这个页面上点击gotoSubmit，会弹出index.jsp页面的所有内容。
来看看处理xml文件，处理的xml文件如下：
<?xml version="1.0" ?>
<name>
laoding
</name>
上面代码要改的地方有两个，第一把url换成这个xml文件的路径，第二个地方是弹出信息的地方：
var mess=request.responseText;
alert(mess);
把这两句换成：
var xmldoc = request.responseXML;
var root_node = xmldoc.getElementsByTagName('name').item(0);
alert(root_node.firstChild.data);
再执行程序就会看到效果了，好了，到此结束了，眼睛痛回去休息。
posted on 2008-12-02 20:20
老丁 阅读(257)
评论(0) 编辑 收藏 所属分类:
ajax