注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

php 王建

php之路

 
 
 

日志

 
 

php ajax操作事例  

2011-07-17 09:53:42|  分类: php类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

一:在各种浏览器下面进行创建XMLHTTPRequest对象(支持各种浏览器),代码如下:

下面定义个方法create进行创建对象,用if语句进行判断

<script language="javascript">

var xmlhttp;

function create(){

//var xmlhttp;

//判断是否支持控件

if(window.ActiveXObject){

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

}else if(window.XMLHttpRequest){

xmlhttp=new XMLHttpRequest();

}

//return xmlhttp;

}

</script>

四:DOM解析xml事例研究:

Xml文件(将以下代码保存为17-2.xml)

<?xml version="1.0" encoding="UTF-8"?>

<members>

            <西游记>

            <member>孙悟空</member>

            <member>猪八戒</member>

            <member>唐三藏</member>

            <member>沙和尚</member>

            </西游记>

            <封神榜>

            <member>杨戬</member>

            <member>哪咤</member>

            <member>黄天化</member>

            <member>黄振子</member>

            </封神榜>

            <三国演义>

            <member>关云长</member>

            <member>张继德</member>

            <member>赵子龙</member>

            <member>马梦琪</member>

            </三国演义>

            <水浒传>

            <member>林冲</member>

            <member>武松</member>

            <member>鲁智深</member>

            <member>李玉</member>

            </水浒传>

</members>

处理页面加上ajax,将以下的代码保存为17-2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>操作xml内容</title>

<script language="javascript">

var xmlhttp;

var type;

function create(){

//var xmlhttp;

//判断是否支持控件

if(window.ActiveXObject){

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

}else if(window.XMLHttpRequest){

xmlhttp=new XMLHttpRequest();

}

//return xmlhttp;

}

function process(type1){

  create();

  type=type1;

  xmlhttp.open("GET","17-2.xml",true);

  xmlhttp.onreadystatechange=handle;

 

  xmlhttp.send(null);

}

function handle(){

if(xmlhttp.readyState==4){

if(xmlhttp.status==200){

 if(type=="all"){

   var xmlDoc=xmlhttp.responseXML;

   var result;

   result=xmlDoc.getElementsByTagName("member"); //获取所有人物

   output("所有的人物是:",result);

  }else{

          //选择具体的时候

       var xmlDoc=xmlhttp.responseXML;

   var m_node;

   m_node=xmlDoc.getElementsByTagName(type)[0];

   result=m_node.getElementsByTagName("member"); //获取指定人物

       output(type+"中的人物",result); 

 }

}

 }

}

/*输出*/

function output(title,content){

var out=title;

var current_name=null;

for(var i=0;i<content.length;i++){

current_name=content[i];

out=out+"<br />"+current_name.childNodes[0].nodeValue;

   }

document.getElementById("people").innerHTML=out;

}

</script>

</head>

<body>

<input type="button" value="查看全部的人物" onclick="process('all')">

<input type="button" value="查看西游记人物" onclick="process('西游记')">

<input type="button" value="查看三国演义人物" onclick="process('三国演义')">

<input type="button" value="查看封神榜人物" onclick="process('封神榜')">

<input type="button" value="查看水浒传人物" onclick="process('水浒传')">

<div id="people">此处显示你选择的人物</div>

</body>

</html>

五:DOM动态的编辑页面的内容

以下列出了常用的方法和属性

方法名

说明

createElemenr()

创建元素

createTextNode(text)

为文档对象创建文本节点

appendChild()

添加新的子节点

insertBefore(new,target)

插入新的节点,该节点位于target之前

 

事例:动态的添加下拉框代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>动态更新select框的option选项</title>

<script language="javascript">

function change(obj1,obj2){

t1=document.getElementById("s1"); //获得第一个下拉框

t2=document.getElementById("s2");//获得第二个

//alert(t1.selectedIndex);

if(obj1=="s1"){

     //当是左边的下拉框的时候

 result=t1.childNodes;

 i=2*t1.selectedIndex+1;

 temp=result[i];

 t1.removeChild(temp);

 t2.appendChild(temp);

}

}

</script>

</head>

<body>

<p>点击左边的列表选项将会出现在右边的下拉框中</p>

<select id="s1" size="10" style="width:100px;" onclick="change('s1','s2')">

<option vlaue="0">北京</option>

<option vlaue="1">上海</option>

<option vlaue="2">天津</option>

<option vlaue="3">河南</option>

<option vlaue="4">南京</option>

<option vlaue="5">无锡</option>

<option vlaue="6">上海</option>

</select>

<select id="s2" size="10" style="width:100px"></select>

</body>

</html>

 

 

事例动态为对象设置及删除属性

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>DOM设置元素的属性</title>

<script language="javascript">

function f1(){

var div1=document.getElementById("mydiv");

var obj=document.getElementById("title");

obj.setAttribute("color","red");

obj.setAttribute("size","5");

}

</script>

</head>

<body>

<select id="s2" size="10" style="width:100px"></select>

<br /><br /><br />

<font id="title">使用DOM访问元素的属性</font>

<input type="button" value="为文本添加属性" onclick="f1()">

<div id="mydiv"></div>

</body>

</html>

 

 

 

动态的编辑页面显示的内容

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>动态的编辑页面显示的内容</title>

<script language="javascript">

function myreturn(id){

return document.getElementById(id);

}

function edit(){

var content1=myreturn("content"); //获得第一个div

var content2=myreturn("e_content"); //获取隐藏的那个div的

var inputvalue=myreturn("input1");

//var text=content.childNodes[0].nodeValue;

    var text=content1.innerHTML;

//alert(text);

content1.style.display="none";  //让第一个层隐藏起来

content2.style.display="";//让第二个层显示起来

inputvalue.setAttribute("value",text);//为输入文本框添加属性值,把div的值给文本框

}

//当点击确定按钮的时候

function decide(){

var content1=myreturn("content"); //获得第一个div

var content2=myreturn("e_content"); //获取隐藏的那个div的

var inputvalue=myreturn("input1"); //得到文本框

//获取输入的内容

var text=inputvalue.value;

//把文本框的值赋给div

//content1.innerHTML=text;

//content1.style.display="block";   

   //content2.style.display="none";

content1.removeChild(content1.childNodes[0]);

 var flag=document.createDocumentFragment();   //必须创建一个文档片段,否则除了IE其余的浏览器不会识

//创建文本

var child_t=document.createTextNode(text);

flag.appendChild(child_t);

content1.appendChild(flag);

content1.style.display="block";   

content2.style.display="none";

}

//取消的时候

function cancel(){

var content1=myreturn("content"); //获得第一个div

var content2=myreturn("e_content"); //获取隐藏的那个div的

content1.style.display="block";

content2.style.display="none";

}

</script>

</head>

<body>

点击以下的内容进行编辑<br />

<div id="content" style="display:'';position:absolute;left:10px;top:40px;cursor:pointeronclick="edit()">

此处内容可以进行编辑

</div>

<div id="e_content" style="display:none;position:absolute;left:10px;top:40px;">

<form>

<input type="text" id="input1" value=""><br />

<input type="button" value="确定" onclick="decide()" id="input1">

<input type="button" value="取消" onclick="cancel()">

</form>

</div>

</body>

</html>

  评论这张
 
阅读(101)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018