一ajax的基本原理
1 创建XmlHttpRequest对象。
2 创建请求。
3 根据监控的readyState值的变化实现当服务器返回数据时调用回调函数。
4 发送请求
5 接收服务器返回的数据(该步骤可以和会和步骤3合并)
二ajax使用基本流程
ajax的使用主要是实现上面的原理图。
1 创建XMLHttpRequest对象，由于这段代码是固定的夜视第一步，所以我们一般将其封装为一个函数createXMLHttpRequest();
function createXMLHttpRequest(){
var request;
if(window.XMLHttpRequest){//火狐
request= new XMLHttpRequest();
}else if{
request = new ActiveXObject("Msxml2.XMLHTTP");//IE
}
return request;
}2 使用XMLHttpRequest对象创建请求
var req=createXMLHttpRequest();
req.open("get"，"testAjaxServlet");3 监视response状态，写回调函数处理服务器返回的数据
(1)服务端响应
(2)XMLHttpRequest的readyState
req.onreadystatechange=function(){
if(req.ready==4){
var result=request.responseTest;//得到服务端返回的数据
document.getElementById("div2").innerHTML=result;//js操作DOM将数据写到页面对象中，实现局部刷新
}
}注：上述代码仅仅是一个实例，说明了在什么状态下接受数据，显示数据
4 使用XMLHttpRequest对象发送请求
req.send(null);//如果不写null，火狐会报错
三ajax的传参方式和接受数据的方式
注：由于开发需要，传参方式和接受数据的形式会不同，接下来重点讨论
1 两种传参方式post和get
get方式：更简单也更快，并且在大部分情况下都能用，容易被缓存(因为是小数据)
post方式：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
2 ajax接受数据的方式
(1)普通文本数据
req.responseTest得到返回的文本数据
(2)XML数据
1)处理
a)服务端
response.setContentType("test/xml;charset=utf-8");//通过ajax写xml数据最好使用utf-8
response.getWriter().println（"<resume><name>朱元璋</name></resume>"）;b)客户端
req.responseXML.getElementsByTagName("name")[0].firstChild.data;2)评价
a)优势
1 xml数据通用。有很多编辑、解析工具
2 xml标记有属性、以及xml命名空间等，从而写出非常通用的程序。
b)劣势
1 js解析xml的难度较大，尤其是在浏览器差异方面。
2 xml数据经常有冗余现象。
(3)JSON(javascript object native)
1)处理
a)servlet中
sb.append("{name:‘朱元璋‘,age:‘32‘,job:‘皇帝‘}");
sb.append("[{age:1,name:‘a‘},{age:2,name:‘b‘},{age:3,name:‘c‘}]");//作为对象数组返回b)浏览器端
var a=req.responseTest;
eval("var c="+a);//利用eval函数将返回的文本转化成js对象2)评价
a)优势
1 解析容易，经过eval执行后直接解析为js对象，不需要经过其他中间步骤
2 可以表达比较复杂的数据组织关系
3 甚至可以通过json方式直接执行服务器端传来的js函数
b)劣势
1 xml属性和命名空间不能直接处理
四ajax实例
1搜索殷勤预览功能
2 google suggest功能
3 ajax三级联动
4 拖曳效果实现购物车
5 ajax树结构
6 ajax面板效果
五ajax类库的封装
工具类：AjaxUtil.js
var AjaxUtil = {
// 基础选项
options : {
method : "get", // 默认提交的方法,get post
url : "", // 请求的路径 required
params : {}, // 请求的参数
type : ‘text‘, // 返回的内容的类型,text,xml,json
callback : function() {
}// 回调函数 required
},
// 创建XMLHttpRequest对象
createRequest : function() {
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");// IE6以上版本
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");// IE6以下版本
} catch (e) {
try {
xmlhttp = new XMLHttpRequest();
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} catch (e) {
alert("您的浏览器不支持Ajax");
}
}
}
return xmlhttp;
},
// 设置基础选项
setOptions : function(newOptions) {
for ( var pro in newOptions) {
this.options[pro] = newOptions[pro];
}
},
// 格式化请求参数
formateParameters : function() {
var paramsArray = [];
var params = this.options.params;
for ( var pro in params) {
var paramValue = params[pro];
paramsArray.push(pro + "=" + paramValue);
}
return paramsArray.join("&");
},
// 状态改变的处理
readystatechange : function(xmlhttp) {
// 获取返回值
var returnValue;
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
switch (this.options.type) {
case "xml":
returnValue = xmlhttp.responseXML;
break;
case "json":
var jsonText = xmlhttp.responseText;
if(jsonText){
returnValue = eval("(" + jsonText + ")");
}
break;
default:
returnValue = xmlhttp.responseText;
break;
}
if (returnValue) {
this.options.callback.call(this, returnValue);
} else {
this.options.callback.call(this);
}
}
},
// 发送Ajax请求
request : function(options) {
var ajaxObj = this;
// 设置参数
ajaxObj.setOptions.call(ajaxObj, options);
// 创建XMLHttpRequest对象
var xmlhttp = ajaxObj.createRequest.call(ajaxObj);
// 设置回调函数
xmlhttp.onreadystatechange = function() {
ajaxObj.readystatechange.call(ajaxObj, xmlhttp);
};
// 格式化参数
var formateParams = ajaxObj.formateParameters.call(ajaxObj);
// 请求的方式
var method = ajaxObj.options.method;
var url = ajaxObj.options.url;
if ("GET" === method.toUpperCase()) {
url += "?" + formateParams;
}
// 建立连接
xmlhttp.open(method, url, true);
if ("GET" === method.toUpperCase()) {
//发送请求
xmlhttp.send(null);
} else if ("POST" === method.toUpperCase()) {
// 如果是POST提交，设置请求头信息
xmlhttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
//发送请求
xmlhttp.send(formateParams);
}
}
};使用实例
function findUser() {
var userid = $("userid").value;
if (userid) {
AjaxUtil.request({
url:"servlet/UserJsonServlet",
params:{id:userid},
type:‘json‘,
callback:process
});
}
}
function process(json){
if(json){
$("id").innerHTML = json.id;
$("username").innerHTML = json.username;
$("age").innerHTML = json.age;
}
else{
$("msg").innerHTML = "用户不存在";
$("id").innerHTML = "";
$("username").innerHTML = "";
$("age").innerHTML = "";
}
}
function $(id) {
return document.getElementById(id);
}
本文出自 “程序思考” 博客，请务必保留此出处http://3821274.blog.51cto.com/3811274/1366032
原文：http://3821274.blog.51cto.com/3811274/1366032