2、打开已新建的ajax.html文件，引入jquery文件并修改title标签内容。
3、在标签中，插入一个div标签，并在div标签中插入一个table。
4、接着在项目中的data文件夹下，新建user.json文件。
5、打开user.json文件，添加json格式数据。
6、在标签中，jquery初始化函数，调用ajax()方法读取json文件数据，返回成功后，将数据渲染加到table中。
7、再添加一个style标签，利用元素选择器设置表格样式。
8、保存代码并运行页面文件，打开浏览器查看效果，即可看到一个表格。
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 +="×tamp="+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>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）