总结AJAX相关JS代码片段和浏览器模型

在.net开发中,充分利用免费控件是好事情，但是如果不能修改控件达到自己的需求，就要动用JS大法了，前提是研究好浏览器模型 的各种对象的方法属性。尤其是熟悉CSS+HTML就会做的很酷。就JS语言本身来说要求不高。

　　1、动态删除Table 里面内容技巧，不需要写太多代码，一行：

tb.removeNode(true)

　　2、动态增加行,除了CreateElement方法，还可以这样比较短小：

＜table id=tb1＞＜/table＞
＜SCRIPT＞
function addTable(){
　var row1 = tb1.insertRow(); 
　var cell1=row1.insertCell();
　var cell2=row1.insertCell();
　cell1.innerText="灰豆宝宝";
　cell2.innerText="超级大笨狼"
}
＜/SCRIPT＞ 
＜INPUT TYPE = "button" VALUE = "AddTable" onclick = "addTable()"＞

　　3、在DIV中动态增加Table

＜SCRIPT＞
function addTable(){
　var tb1 = document.createElement("table";
　tb1.border="1px";
　var row1 = tb1.insertRow(); 
　var cell1=row1.insertCell();
　var cell2=row1.insertCell();
　mydiv.appendChild(tb1);
　cell1.innerText="wanghr100";
　cell2.innerText="panyuguang962"
}
＜/SCRIPT＞
＜BODY＞
＜div id=mydiv style="width:400;height:300;"＞＜/div＞
＜INPUT TYPE = "button" VALUE = "AddTable" onclick = "addTable()"＞

　　4、在DIV中删除Table，简单只要Div.innerHTML=""就可以。

　　以上是部分实用相对短小的代码，当然有其他各种办法实现，不过一般都比上面的长，比如组合使用DIV对象的insertAdjacentHTML 方法等，在不同需要下使用不同方法，前提是研究好浏览器模型 的各种对象的方法属性。尤其是熟悉CSS+HTML就会做的很酷。就JS语言本身来说要求不高。

　　以下是以Document对象为例，相关方法有：

Method Description 
attachEvent 
createAttribute 
createComment 
createDocumentFragment 
createElement 
createEventObject 
createStyleSheet 
createTextNode 
detachEvent 
getElementById 
getElementsByName 
getElementsByTagName 
mergeAttributes
recalc 
write 
writeln

　　以DIV对象为例相关方法有：

addBehavior 
appendChild 
applyElement 
attachEvent 
clearAttributes
cloneNode 
contains 
detachEvent
getAdjacentText 
getAttribute 
getAttributeNode 
getElementsByTagName 
hasChildNodes 
insertAdjacentElement 
insertAdjacentHTML 
insertAdjacentText 
insertBefore
mergeAttributes 
normalize
removeAttribute 
removeAttributeNode 
removeBehavior 
removeChild 
removeExpression 
removeNode 
replaceAdjacentText 
replaceChild 
replaceNode 
setActive 
setAttribute 
setAttributeNode 
setExpression

赞 (0)

相关推荐

  • 关于Ajax技术原理的3点总结

    ajax:Asynchronous Javascript and XML   异步Javascript 和XML. 是一种创建交互式网页应用的网页开发技术. 1.0 优势:         1.1 通过异步模式,提升了用户体验.         1.2 优化了浏览器与服务器之间的传输,减少了不必要的数据往返,减少了带宽占用.         1.3 Ajax引擎在客户端运行,承担了一部分本来由服务器承担的共组,从而减少了大用户量下的服务器负载. 2.0 工作原理 Ajax核心是Javascrip

  • 关于ajax对象一些常用属性、事件和方法大小写比较常见的问题总结

    最近比较空闲,于是抽个时间整理些关于ajax方法的东东.在项目中经常发现ajax板块好多问题都是属性,方法,事件大小写不区分问题,最终导致了程序运行出现麻烦. 下面是ajax对象的一些常用属性,事件和方法 1)标准的ajax对象的属性有readyState,status,responseText,responseXML 2)非标准ajax对象属性,针对IE浏览器的,有responseBody,2进制数据流.如果不考虑浏览器兼容,这个属性+VBScript能很好的解决乱码问题. Visual Ba

  • ajax 入门基础之 XMLHttpRequest对象总结

    XMLHttpRequest 提供客户端同http服务器通讯的协议 一:创建 IE : http_request = new ActiveXObject("Msxml2.XMLHTTP"); http_request = new ActiveXObject("Microsoft.XMLHTTP"); 非IE: http_request = new XMLHttpRequest(); 二:onreadystatechange 指定当readyState属性改变时的事件

  • ajax中文乱码的各种解决办法总结

    由于XMLHTTP采用的是Unicode编码上传数据,而一般页面采用的是gb2312,这就造成显示页面时产生乱码.而当在获取页面时的XMLHttp返回的是utf-8编码,这就造成了显示产生乱码. 有一种解决办法就是使用encodeURIComponent加上修改 Content-Type 为 application/x-www-form-urlencoded" 来把数据统一编码成 url 格式,当然,也可以指定编码,如:"application/x-www-form-urlencode

  • 初学者必看的Ajax总结篇

    初学者必看的Ajax总结篇

    一.Ajax简介.优劣势.应用场景以及技术 Ajax简介 : Asynchronous Javascript And XML (异步的JavaScript和XML) 它并不是一种单一的技术,而是有机利用一系列交互式网页应用相关的技术所形成的结合体 AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 优点: 页面无刷新,用户体验好. 异步通信,更加快的响应能力. 减少冗

  • Ajax与JSON的一些学习总结

    Ajax与JSON的一些学习总结

    1.1.1 摘要 Ajax技术的核心是XMLHttpRequest对象(简称XHR),可以通过使用XHR对象获取到服务器的数据,然后再通过DOM将数据插入到页面中呈现.虽然名字中包含XML,但Ajax通讯与数据格式无关,所以我们的数据格式可以是XML或JSON等格式. XMLHttpRequest对象用于在后台与服务器交换数据,具体作用如下: 在不重新加载页面的情况下更新网页 在页面已加载后从服务器请求数据 在页面已加载后从服务器接收数据 在后台向服务器发送数据 1.1.2 正文 XMLHttp

  • ajax问题总结 比较全

    基本的============================================ 1,最经典的就是ie下的缓存问题了. 如果使用的是get,那么在ie下出现缓存问题.导致代码只执行一次.解决办法就是加时间戳或者随机数,使url变为唯一,这样就不会出现ie 下的缓存问题了,或者改为post提交. xhr.open("get","xxxx.aspx?_dc="+new Date().getTime(),true); 2,ajax对象属性的大小写问题 在w3

  • ajax原理总结附简单实例及其优点

    在工作中用了Ajax N多次了,也看过一些相关方面的书籍,也算是认识了它,但是一直没有认真总结和整理过相关的东东,失败! 近有闲情,将之总结如下: [名称] Ajax是Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. 详情请移步Ajax: A New Approach to Web Applications [原理] 简单一些,就是通过使用XmlHttpRequest对象向服务器发送异步请求,获取返回的数据,并使用Javascript和DOM操作页面

  • ajax请求get与post的区别总结

    get如果请求url没有变化,取出缓存,提高效率:请求会缓存到浏览器中,可以通过历史记录查看用户信息,安全性低: post传送变化的数据显示,变动性访问: get通过url地址传送数据,数据量不能超过1024byte: post作为http消息的实体内容传送到服务器中,传送数据量可以很大: get传送数据要经过encodeURIComponent编码,防止乱码. get方式,服务器端用Request.QueryString获取变量的值: post方式,服务器端用Request.Form获取提交的

  • 使用ajax异步提交表单的几种方法总结

    这里介绍三种常用的提交方式 方式一 手工收集所有的用户输入,封装为大的"k1=v1&k2=v2-"键值对形式,使用$.post(url, data,fn)把数据提交给服务器 $.ajax({ type:'post', url:'Notice_noTipsNotice', data:'k1=v1&k2=v2...', cache:false, dataType:'json', success:function(data){ } }); 方式二 单序列化:$('#myfor

随机推荐