一.Ajax简介
Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。利用Ajax技术通过对XMLHttpRequest对象的操作可以实现网站页面的局部刷新,增强用户体验。成功应用:Google Maps,Google Suggest。
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
//XMLHttpRequest对象的建立及应用(Ajax核心)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
var xmlhttp;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
try
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
}catch(e)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
try
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}catch(e)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
try
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
xmlhttp = new XMLHttpRequest();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}catch(e)
{}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
xmlhttp.onreadystatechange = function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//事件处理语句
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
xmlhttp.open();
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
xmlhttp.send();
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
二。Javascript基本语法
a) 变量用var声明,变量类型可变。数据类型: Undefined、Null、Boolean、String、Number、Object。其他和C语言语法基本一样。
b) if语句、条件运算符(?:)、switch语句、while语句、for语句。
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
with(object){
Statements;
}
for(var p in obj){…}
c) 函数定义:函数可像变量一样传递。
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
//函数定义
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
var test = function([arguments])
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//函数代码
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
function test([arguments])
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//函数代码
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
d) 内部函数:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
//eval函数执行Javascript代码
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
var a = 1;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
alert("a"); //显示a
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
alert(eval("a")); //显示a的值,结果为1
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
//parseInt和parseFloat函数将字符串转换为数字
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
parseInt("1.23"); //返回1
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
parseFloat("5"); //返回5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
parseFloat("1.23"); //返回1.23
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
//escape和unescape函数进行URL编码和解码
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
escape("我爱JavaScript"); //返回%u6211%u7231JavaScript
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
unescape("%u6211%u7231JavaScript"); //返回我爱JavaScript
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
//isNaN判断变量是否数字,isFinite判断变量是否无穷大
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
三.对象及表单
Date对象:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
var obj = new Date();
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
obj.getFullYear();
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
obj.getMonth();
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
obj.getDay();
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
obj.getDate();
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
obj.getHours();
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
obj.getMinutes();
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
obj.getSeconds();
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
Math对象:
Document对象:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
document.write("hello world.");
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
document.title;//返回或设置文档标题
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
document.URL;//返回或设置文档地址
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
document.referrer;//当前页面的来源页面地址
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
document.getElementById("id");
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
var newDoc = document.open("text/html","replace");
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
var txt = "<html><body>sometext</body></html>";
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
newDoc.write(txt);
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
newDoc.close();
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
document.anchors;//返回文档书签标记(<a name>)组成数组
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
document.anchors[0].innerHTML;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
document.images;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
document.cookie;//返回或设置cookie
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
document.forms;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
document.links;//返回文档中所有链接(<a href>)组成数组
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
document.domain;//返回或设置文档域名
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
document.lastModified;//返回文档最后一次修改日期
Event对象:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
event.type;//事件类型
event.clientX;//窗口的X坐标
event.clientY;
event.button;//鼠标按键
event.keyCode;//键盘按键
event.screenX;//屏幕X坐标
event.screenY;
event.x;//元素的X坐标,Mozzilla为layerX
event.y;
event.shiftKey;
event.altKey;
event.ctrlKey;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
window对象:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
window.status="状态栏信息";
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
window.resizeBy(-100,-100);//改变窗口大小
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
window.scrollBy(100,100);
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
setTimeout("timedCount()",1000);
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
clearTimeout(t);
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
window.location="http://www.g.cn";
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
window.location.reload(true);//从服务器载入,反之为缓存,默认false
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
window.location.hash = "#chapter1";//更改url为 url+#chapter1
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
window.location.search = "?sort=book&id=123";//更改url查询字符串
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
window.location.href = "http://www.baidu.com";
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
window.location.replace(url);//替换浏览器历史列表当前页面,安全性高网站中很有用
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
Navigator对象:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
navigator.appName;//浏览器正式名称
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
navigator.appVersion;//浏览器版本号
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
Array对象:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
var objArray = new Array();
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
var objArray = [];
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
var objArray = [new Date(),"abc",1234];
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
//使用多维数组
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
var arr = new Array(4);
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
for(var i=0;i<4;i++)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
arr[i] = new Array(6);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
//数组对象的方法
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
[1,2,3,4].toString();//result: "1,2,3,4"
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
["a","b","c"].contact("d","e","f");//result: ["a","b","c","d","e","f"]
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
[1,2,3,4].join("|");//result: "1|2|3|4"
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
[1,2,3,4].pop();//result: [1,2,3]
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
[1,2,3,4].push("a","b");//result: [1,2,3,"a","b"]
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
[1,2,3,4].reverse();//result: [4,3,2,1]
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
[1,2,3,4].shift();//result: [2,3,4]
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
[1,2,3,4,5].slice(1,4);//result: [2,3,4]
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
[1,2,3,4].unshift("a","b");//result: ["a","b",2,3,4]
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
String对象:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
"hello".length;//result: 5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
"hello,jack".indexOf("hello");// result: 0
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
"abcabc".indexOf("a",1);// result: 3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
"abcabc".lastIndexOf("b");// result:4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
"abc".charAt(1);// result: "b"
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
"abc".charCodeAt(0);// result: 97
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
"abcabc".slice(1,4);// result: "bca"
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
"a,b,c,d".split(",");// result: ["a","b","c","d"]
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
"a,b,c,d".split(",",2);// result: ["a","b"]
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
"a,b,c".split("");// result: ["a",",","b",",","c"]
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
"ab,c".split();// result: ["ab,c"]
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
"abcdef".substr(1,3);// result: "bcd",3为串长度
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
var str = "abc".replace("a","b");// result: str="bbc",原串不变
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
str.match(/"d+/);// 判断是否为数字,括号内为正则表达式
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
"aabcabcabc".search(/abc/g); // result: 显示索引值1
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
"abc".toUpperCase();// result: "ABC"
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
"ABc".toLowerCase();// result: "abc"
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
var str = "abc".contact("def","ghi");// result: str = "abcdefghi",参数个数不限
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
History对象:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
history.go(-1);
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
history.go();//仅刷新当前页面
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
history.back();
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
history.forward();
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
四. 事件机制
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
//事件的绑定
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
document.onclick = function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//事件处理程序
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
//attachEvent和addEventListener方法绑定事件处理程序
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
function func()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//语句
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
if(element.addEventListener)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
element.addEventListener("onclick",func,false);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
}else
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
element.attachEvent("click",func,false);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
//IE中event是全局变量,非IE浏览器需显示调用实现兼容
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
evt = evt ? evt : window.event;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
五. Ajax基础框架之DOM(Document Object Module)模型简述
文档结点:元素、属性、文本 (顺序1.2.3)。
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
//引用结点:
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
document.getElementById();
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
document.getElementsByTagName();
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
document.childNodes[0];
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
element.firstChild;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
element.lastChild;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
element.parentNode;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
element.nextSibling;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
element.previousSibling;//兄弟结点
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
node.nodeName; //获取结点名称
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
node.nodeType; //获取结点类型
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
node.nodeValue; //获取结点值(元素:null、属性:undefined、文本:文本内容)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
node.hasChildNodes();//判断结点是否有子结点(ture|false)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
node.tagName//返回元素节点的标记名称
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
node.setAttribute(name,value); //设置属性值
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
node.getAttribute(name); //获取属性值
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
node.innerHTML; //处理文本结点
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
//改变文档层次结构
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
document.createElement("div");
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
document.createTextNode("this is a test.");
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
parentElement.appendChild(name);
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
parentNode.insertBefore(newNode,referenceNode);
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
insertAt(parentNode,newNode,index);
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
parentNode.replaceChild(newNode,oldNode); //取代子结点
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
node.cloneNode(isIncludeChildren); //复制结点
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
parentNode.removeChild(childNode); //删除结点
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
六. Ajax应用实例
七. Ajax常见问题
P.S.根据《征服Ajax Web2.0开发技术详解》整理,做了一些删减,提取其中个人觉得有用的知识。希望大家提出建议,我只是想弄一个简单入门教程。我希望这个教程无需太多的文字,更多的只是例子,避免枯燥的概念,紧扣重点。