最近ajax热潮似乎风靡全球，
开发的时候也不免遇到这种要避免刷新的页面，
ajax自然成了首选，看了一下后ajax想深入还是挺复杂的，
但是仅仅用来做一些小的功能，上手是再简单不过了。
其实简单的说，一个最简单的完整的ajax应用仅仅包括：
1.创建XMLHTTP对象（主要为了兼容浏览器）
2.发送变量，请求页面
3.定义XMLHTTP发送请求后onreadystatechange事件
4.获取返回页面值
5.无刷新更改本页面的显示
说起来没什么用，不如看看代码：
//这个代码就是用来创建兼容浏览器的XMLHTTP
function createRequestObject()
{
var xmlhttp;
var browser = navigator.appName;
if (browser == “Microsoft Internet Explorer”) {
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
else {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
//产生一个全局的xmlhttp
var http = createRequestObject();
//这个就是事件触发的入口
function sndReq(sid, id)
{
var url = “getdata.jsp?dataindex=” + id;
//打开一个你需要获取数据的页面
http.open('get', url);
//这边的handleResponse就是当获取返回数据时所要做的事件
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse()
{
if (http.readyState == 4) {
//这边就是返回页面的内容
var response = http.responseText;
if (response != “”) {
//想修改页面上的什么显示就在这边修改吧。
}
}
}
应该说是相当简单的更接近于一个模板，套用一下就可以完成了，
那么这边需要说名的一些东西是：
1.如果你想通过POST传递变量，那么你需要做一些修改
var postStr = “a=a&b=b”;
//
function sndReq()
{
var url = “getdata.jsp”;
//打开一个你需要获取数据的页面
http.open('post', url);
//设置POST的http头类型
http.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//这边的handleResponse就是当获取返回数据时所要做的事件
http.onreadystatechange = handleResponse;
//把变量放入send的参数中
http.send(postStr);
}
2.如果你的返回量中包含中文，那么保证返回页面编码为utf-8。
3.XMLHTTP的open方法可以直接读取xml
xmlHttp.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword)
其中：
bstrMethod: 连接方式，可用的有GET, POST, PUT, or PROPFIND
bstrUrl: 服务器的url
varAsync（可选）: 调用是否异步，默认为true（调用立即返回）
bstrUser（可选）：用户名，如果url需要验证时附上
bstrPassword（可选）：密码，
如果url需要验证时附上open()方法可以直接打开一个xml文档，
并通过xmlHttp的responseXML来读取相应的节点。如下例：
xmlHttp.open("GET","http://localhost/books.xml", false);
xmlHttp.send();
var book = xmlhttp.responseXML.selectSingleNode("//book[@id='bk101']");
好了，暂时就这么多了，完成一些简单的应用是没什么问题的！
0 Comments.