Ajax与JavaScript基础-优快云博客

Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。利用Ajax技术通过对XMLHttpRequest对象的操作可以实现网站页面的局部刷新，增强用户体验。成功应用：Google Maps，Google Suggest。

//XMLHttpRequest对象的建立及应用（Ajax核心）

var xmlhttp;

try{

xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

}catch(e){

try{

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}catch(e){

try{

xmlhttp = new XMLHttpRequest();

}catch(e){}

}

xmlhttp.onreadystatechange = function(){

//事件处理语句

}

xmlhttp.open();

xmlhttp.send();

二。Javascript基本语法

a) 变量用var声明，变量类型可变。数据类型： Undefined、Null、Boolean、String、Number、Object。其他和C语言语法基本一样。

b) if语句、条件运算符（?:）、switch语句、while语句、for语句。函数定义：函数可像变量一样传递。内部函数：

//eval函数执行Javascript代码

var a = 1;

alert("a"); //显示a

alert(eval("a")); //显示a的值，结果为1

//parseInt和parseFloat函数将字符串转换为数字

parseInt("1.23"); //返回1

parseFloat("5"); //返回5

parseFloat("1.23"); //返回1.23

//escape和unescape函数进行URL编码和解码

escape("我爱JavaScript"); //返回%u6211%u7231JavaScript

unescape("%u6211%u7231JavaScript"); //返回我爱JavaScript

//isNaN判断变量是否数字，isFinite判断变量是否无穷大

对象： Document对象：

Math

Math.random();

document.write("hello world.");

document.title;//返回或设置文档标题

document.URL;//返回或设置文档地址

document.referrer;//当前页面的来源页面地址

document.getElementById("id");

var newDoc = document.open("text/html","replace");

var txt = "<html><body>sometext</body></html>";

newDoc.write(txt);

newDoc.close();

document.anchors;//返回文档书签标记（<a name>）组成数组

document.anchors[0].innerHTML;

document.images;

document.cookie;//返回或设置cookie

document.forms;

document.links;//返回文档中所有链接（<a href>）组成数组

document.domain;//返回或设置文档域名

document.lastModified;//返回文档最后一次修改日期

Event对象：

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;

window对象：Navigator对象：

window.status="状态栏信息";

window.resizeBy(-100,-100);//改变窗口大小

window.scrollBy(100,100);

setTimeout("timedCount()",1000);

clearTimeout(t);

window.location="http://www.g.cn";

window.location.reload(true);//从服务器载入，反之为缓存，默认false

window.location.hash = "#chapter1";//更改url为 url+#chapter1

window.location.search = "?sort=book&id=123";//更改url查询字符串

window.location.href = "http://www.baidu.com";

window.location.replace(url);//替换浏览器历史列表当前页面，安全性高网站中很有用

navigator.appName;//浏览器正式名称

navigator.appVersion;//浏览器版本号

Array对象：

var objArray = new Array();

var objArray = [];

var objArray = [new Date(),"abc",1234];

//使用多维数组

var arr = new Array(4);

for(var i=0;i<4;i++){

arr[i] = new Array(6);

}

//数组对象的方法

[1,2,3,4].toString();//result: "1,2,3,4"

["a","b","c"].contact("d","e","f");//result: ["a","b","c","d","e","f"]

[1,2,3,4].join("|");//result: "1|2|3|4"

[1,2,3,4].pop();//result: [1,2,3]

[1,2,3,4].push("a","b");//result: [1,2,3,"a","b"]

[1,2,3,4].reverse();//result: [4,3,2,1]

[1,2,3,4].shift();//result: [2,3,4]

[1,2,3,4,5].slice(1,4);//result: [2,3,4]

[1,2,3,4].unshift("a","b");//result: ["a","b",2,3,4]

String对象：

"hello".length;//result: 5

"hello,jack".indexOf("hello");// result: 0

"abcabc".indexOf("a",1);// result: 3

"abcabc".lastIndexOf("b");// result:4

"abc".charAt(1);// result: "b"

"abc".charCodeAt(0);// result: 97

"abcabc".slice(1,4);// result: "bca"

"a,b,c,d".split(",");// result: ["a","b","c","d"]

"a,b,c,d".split(",",2);// result: ["a","b"]

"a,b,c".split("");// result: ["a",",","b",",","c"]

"ab,c".split();// result: ["ab,c"]

"abcdef".substr(1,3);// result: "bcd",3为串长度

var str = "abc".replace("a","b");// result: str="bbc",原串不变

str.match(/"d+/);// 判断是否为数字，括号内为正则表达式

"aabcabcabc".search(/abc/g); // result: 显示索引值1

"abc".toUpperCase();// result: "ABC"

"ABc".toLowerCase();// result: "abc"

var str = "abc".contact("def","ghi");// result: str = "abcdefghi",参数个数不限

History对象：

history.go(-1);

history.go();//仅刷新当前页面

history.back();

history.forward();

四． 事件机制

//事件的绑定

document.onclick = function(){

//事件处理程序

}

//attachEvent和addEventListener方法绑定事件处理程序

function func(){

//语句

}

if(element.addEventListener){

element.addEventListener("onclick",func,false);

}else{

element.attachEvent("click",func,false);

}

//IE中event是全局变量，非IE浏览器需显示调用实现兼容

evt = evt ? evt : window.event;

五． Ajax基础框架之DOM（Document Object Module）模型简述

文档结点：元素、属性、文本 (顺序1.2.3)。

//引用结点：

document.getElementById();

document.getElementByTagName();

document.childNodes[0];

element.firstChild;

element.lastChild;

element.parentNode;

element.nextSibling;

element.previousSibling;//兄弟结点

node.nodeName; //获取结点名称

node.nodeType; //获取结点类型

node.nodeValue; //获取结点值(元素：null、属性：undefined、文本：文本内容)

node.hasChildNodes();//判断结点是否有子结点(ture|false)

node.tagName//返回元素节点的标记名称

node.setAttribute(name,value); //设置属性值

node.getAttribute(name); //获取属性值

node.innerHTML; //处理文本结点

//改变文档层次结构

document.createElement("div");

document.createTextNode("this is a test.");

parentElement.appendChild(name);

parentNode.insertBefore(newNode,referenceNode);

insertAt(parentNode,newNode,index);

parentNode.replaceChild(newNode,oldNode); //取代子结点

node.cloneNode(isIncludeChildren); //复制结点

parentNode.removeChild(childNode); //删除结点

with(object){

Statements;

}

for(var p in obj){…}

//函数定义

var test = function([arguments]){

//函数代码

}

function test([arguments]){

//函数代码

}

三.对象及表单

Date对象：

var obj = new Date();

obj.getFullYear();

obj.getMonth();

obj.getDay();

obj.getDate();

obj.getHours();

obj.getMinutes();

obj.getSeconds();

AJAX笔记整理