ajax 增加功能

function createXHR(){

var xmlHttp

try{

xmlHttp = new XMLHttpRequest()

}catch(e){

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")

}

return xmlHttp

}

function Ajax(url,method,arg){

this.xmlHttp = createXHR()

var reg = /[Gg][Ee][Tt]/

if(reg.test(method)){

this.method = "GET"

this.arg = null

}else{

this.method = "POST"

this.arg = arg

}

if(url.indexOf("?")>-1){

url +="&timestamp="+new Date().getTime()

}else{

url +="?timestamp="+new Date().getTime()

}

this.url = url

this.xmlHttp.open(this.method,this.url,true)

if(this.method=="POST"){

this.xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

}

this.xmlHttp.send(this.arg)

return this.xmlHttp

}

function String(str){

this.string = str

this.length = str.length

}

String.prototype.toUpper = function (index,length){

var str = ''

if(typeof(length)=='undefined'){

var length = this.length-index

}

for(var i=0i<this.lengthi++){

if(i==index||--length>0){

str +=this.string[i].toUpperCase()

}else{

str +=this.string[i]

}

}

return str

}

function JS (data) {

if(typeof(data)=='undefined'){

return this

}

this.dom = this.get(data)

return this

}

JS.prototype.loadOver = function(func){

this.dom = window

this.addEvent('load',func)

}

JS.prototype.addEvent = function(name,func){

var reg = /^(on)/

if(reg.test(name)){

var ie_name = name

var ff_name = name.replace('on','')

}else{

var ie_name = 'on'+name

var ff_name = name

}

if(window.addEventListener){

this.dom.addEventListener(ff_name,eval(func),true)

}else{

this.dom.attachEvent(ie_name,eval(func))

}

}

JS.prototype.getForms = function () {

var oInputs = this.dom.getElementsByTagName("input")

var oSelects = this.dom.getElementsByTagName("select")

var oTextarea = this.dom.getElementsByTagName("textarea")

var data = ''

for(var i=0i<oInputs.lengthi++){

if(oInputs[i].type=='checkbox'||oInputs[i].type=="radio"){

if(oInputs[i].checked==true){

data +="&"+oInputs[i].name+"="+oInputs[i].value

}

}else{

data +="&"+oInputs[i].name+"="+oInputs[i].value

}

}

for(var j=0j<oSelects.lengthj++){

data+="&"+oSelects[j].name+"="+oSelects[j].value

}

for(var m=0m<oSelects.lengthm++){

data +="&"+oSelects[m].name+"="+oSelects[m].value

}

return data

}

JS.prototype.getChildNodes = function(){

if(navigator.appName.indexOf('Microsoft')>-1){

return this.dom.childNodes

}else{

var children = []

var j = 0

for(var i=0i<this.dom.childNodes.lengthi++){

if(this.dom.childNodes[i].tagName!='undefined'){

children[j++] = this.dom.childNodes[i]

}

}

return children

}

}

JS.prototype.Style = function(data){

if(data.indexOf("")){

var style_arr = data.split("")

}else{

var style_arr = [data]

}

for(var i=0i<style_arr.lengthi++){

if(style_arr[i]=='') continue

var style_one_arr = style_arr[i].split(":")

style_one_arr[0]=style_one_arr[0].toLowerCase()

if(typeof(style_one_arr[1])=="undefined") continue

if(style_one_arr[0].indexOf("-")>-1){

var name = style_one_arr[0]

while(name.indexOf("-")>-1){

var index = name.indexOf("-")

name = name.replace("-","")

var s = new String(name)

name = s.toUpper(index,1)

}

style_one_arr[0] = name

}

eval("this.dom.style."+style_one_arr[0]+"=style_one_arr[1]")

}

//*******************

}

function stopLink(obj){

if(typeof(obj)=='undefined'){

var Links = document.getElementsByTagName("a")

}else if(typeof(obj)=='string'){

var Links = document.getElementById(obj).getElementsByTagName("a")

}else {

var Links =obj.getElementsByTagName("a")

}

for(var i=0i<Links.lengthi++){

Links[i].onclick = function(){return false}

}

}

function Windows(id,width,height,position){

var div = document.getElementById(id)

if(div!=null){

document.body.removeChild(div)

}

this.width = width

this.height = height

var dwidth = parent.document.body.clientWidth

var dheight = parent.document.body.clientHeight

this.window = document.createElement("div")

this.body = document.createElement("div")

this.header = document.createElement("div")

with(this.header.style) {

padding = "2px 0 2px 5px"

}

this.title = document.createElement("div")

this.close = document.createElement("div")

this.header.appendChild(this.title)

with(this.title.style){

display = "inline-block"

float = "left"

height = "25px"

width = this.width-30 +"px"

}

with(this.close.style){

display ="inline-block"

float = "right"

height = "14px"

width = "14px"

margin = "2px"

fontFamily = "Arial"

fontWeight = "bold"

textAlign = "center"

border = "1px #ffffff solid"

verticalAlign = "middle"

// paddingBottom = "-5px"

}

var win = this

this.close.innerHTML = "X"

var c = new JS(this.close)

c.addEvent("click",function(){win.closeWin()})

c.addEvent("onmouseover",function(){c.Style("border:1px solid #0066eebackground:#E6E6FAcursor:pointer")})

c.addEvent("mouseout",function(){c.Style("border:1px solid #F0FFF0")})

this.header.appendChild(this.close)

//this.window = document.createElement("div")

new JS (this.window).Style("border:1px solid #B0E0E6background:#F0FFF0")

new JS (this.header).Style("background:#F0FFF0border-bottom:1px solid #B0E0E6height:20pxfont-weight:boldcolor:#666666padding-top:5px")

new JS (this.body).Style("background:#F0FFF0")

this.window.appendChild(this.header)

this.window.appendChild(this.body)

this.window.id = id

with(this.window.style){

width = this.width + "px"

height = this.height + "px"

}

if(position=="center"){

with(this.window.style){

left = parseInt((dwidth-this.width)/2) + "px"

top = parseInt((dheight-this.height)/2) + "px"

position = "absolute"

border = "2px solid #B0E0E6"

}

}

document.body.appendChild(this.window)

}

Windows.prototype.setTitle = function (title){

this.title.innerHTML = title

}

Windows.prototype.setBody = function (html,url,arg,func){

if(html!=null){

this.body.innerHTML = html

return true

}

var ajax = new Ajax(url,"post",arg)

var win = this

ajax.onreadystatechange = function (){

if(ajax.readyState==4){

if(ajax.status==200){

win.body.innerHTML = ajax.responseText

if(typeof(func)!="undefined"){

eval(func)

}

}

}

}

}

Windows.prototype.closeWin = function (i){

if(typeof(i)=="undefined"){

var i = 5

}

var f = i*20

var o = f/100

with(this.window.style){

filter = "alpha(opacity="+f+")"

opacity = o

}

if(i==0){

this.window.parentNode.removeChild(this.window)

return true

}

i--

var win = this

setTimeout(function(){win.closeWin(i)},100)

//filter:alpha(opacity=20)opacity:0.2

}

JS.prototype.get = function (data) {

if (typeof(data)=='string') {

var reg = /^#.*/

if(reg.test(data)){

return document.getElementsByName(data.replace("#",""))

}

if(data.indexOf(' ')>-1){

data = data.replace(/\s+/,' ')

var arr = data.split(' ')

if(arr[1].indexOf('<')>-1&&arr[1].indexOf('>')>-1){

// var name = arr[1].replace(/^<.*>$/,)

var name = arr[1].replace("<","").replace(">","")

return document.getElementById(arr[0]).getElementsByTagName(name)

}else{

return document.getElementsById(arr[0]).getElementsByName(arr[1])

}

}else{

return document.getElementById(data)

}

}else{

if(typeof(data)=='object'){

return data

}

}

}

以上代码你只要另存为一个JS文件即可。

以下是html页面的代码(还需要新建一个php文件):

如有不明白 Hi me

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">

<!-- <link href="inc/style.css" rel="stylesheet">-->

<script src="test.js"></script>

<script>

function showWin(){

var win = new Windows('user_detail',400,300,'center')//函数原型 Windows(id,width,height,position)

win.setTitle('dddd')//函数原型 setTitle(title)

win.setBody(null,'ajax.php') //函数原型 setBody(html,ajax_url,ajax_arg,callback_after_ajax)

}

</script>

</head>

<body>

<div id="photo" onclick="showWin()">

dddddd

</div>

</body>

</html>

关于AJAX交互过程的优化，我觉得REQUEST步骤上可做的工作不多。

大部分优化是对SERVER端的处理，以及CALLBACK后的DOM *** 作。

你的思路没有问题，5秒请求一次肯定会增加服务器的负荷。个人觉得可以在SERVER端设置一个标志变量，用程序级的变量实现多用户共享，每当你的数据表条目发生变化时对其进行设置。这样，在AJAX请求时就不需要去专门查询数据库了，只需要判断标志变量然后决定后续 *** 作就可以了。

ajax是实现异步加载功能，如果页面不想整一页刷新，局部刷新得到结果就可以使用ajax，跟后台服务器产生交互并得到返回值然后呈现在前台表示，一般的分页，或者查询，或者标签，很多很多地方都可以使用ajax，极大的方便了程序员开发以及提高了用户体验

---