首页 技术教程 实用代码 注册破解 正则表达式 网址导航 电子书籍

AJAX中XMLHttpRequest的封装

在AJAX编程中离不开对XMLHttpRequest对象的使用。XMLHttpRequest对象代表了浏览器和服务器之间的通讯,并可采用异步模式。浏览器通过XMLHttpRequest在后台发起请求,然后通过其属性onreadystatechange注册的回调函数来异步处理应答。编程步骤如下: 1. 创建XMLHttpRequest对象xhr; 2. 调用xhr的open方法打开资源; 3. 通过xhr的属性onreadystatechange注册回调函数; 4. 通过xhr的方法setRequestHeader设置相应请求头; 5. 调用xhr的send方法发起请求。 从上我们可以看到,编程步骤固定,在某些步骤中有些许的变化。由此我们可以联想到模板(template)和回调(callback)编程模式。在此处的回调依赖于xhr的状...
类别:网页编程 - JavaScript    查看:138    更新:2014-06-16

AJAX中跨域访问出现“没有权限”的错误

很多人在使用AJAX调用别人站点内容的时候,JS会提示"没有权限"错误,这是XMLHTTP组件的限制-安全起见 禁止访问非同域的网站,下面一个例子来访问http://www.google.cn function createobj() { if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { return new XMLHttpRequest(); } } function getWebPage(url) { var oBao=createobj(); var my_url=url oBao.open('get',my_url,false); oBao.onreadystatechange=function(){ if(oBao.readyState==4){ if(oBao.status==200){ var...
类别:网页编程 - JavaScript    查看:123    更新:2014-06-16

XMLHTTPRequest的属性和方法

设计AJAX时使用的一个重要的技术(工具)就是XMLHTTPRequest对象了。XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础。尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一步简化XMLHttpRequest对象的使用;但是,我们仍然很有必要理解这个对象的的属性和方法简介。1、XMLHTTPRequest对象什么是?最通用的定义为:XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。(这个功能正是AJAX的一大特点之一)来自MSDN的解释:XmlHtt...
类别:网页编程 - JavaScript    查看:143    更新:2014-06-14

Ajax应用程序中的数据交换

Ajax 核心 API(即所谓的 XMLHttpRequest)的唯一用途就是发送 HTTP 请求,在 Web 浏览器与服务器之间进行数据交换。Web 页面中运行的 JavaScript 代码,可以使用 XMLHttpRequest 将该请求参数提交至服务器端脚本,例如 Servlet 或 JSP 页面。调用的 Servlet/JSP 将发回一个响应,其中包含了一般用于不需刷新整个页面即可更新用户查看内容的数据。此种方法在性能和可用性方面均体现出了独有的优势,因为这将降低网络通信量,而且 Web UI 的使用几乎与桌面 GUI 一样。  但是,开发这种用户界面并不简单,因为您必须在客户端上使用 JavaScript、在服务器端上使用 Java(或等效语言)实施数据交换、验证以及处...
类别:网页编程 - JavaScript    查看:133    更新:2014-06-14

常见IE的Bug及其fix

Internet Explorer – Web程序员的毒药。在IE上开发时间中有超过60%的时间是花在和IE的bug进行搏斗,让你的开发生产率严重下降。下面是一个教程,告诉你9个IE上最常见的BUG以及如何解决它们。1. 居中布局创建一个CSS定义把一个元素放到中间的位置,可能是每一个Web开发人员都会做的事情。最简单的做法是为你的元素增加一个margin: auto; ,然而 IE 6.0 会出现很多奇怪的行为。让我们来看一个例子。 #container{ border: solid 1px #000; background: #777; width: 400px; height: 160px; margin: 30px 0 0 30px;} #element{background: #95CFEF; border: solid 1px #36F; width: 300px; height: 100px; margin: 30px...
类别:网页编程 - CSS技术    查看:171    更新:2014-06-06

ul在Firefox和IE下的不同表现

ul是一个很常用的标签,但是因为它在Firefox和IE下的不同表现,让人觉得它是个很难以控制的标签。  ul在Firefox下有个padding值, 却没有margin值;而在IE下正好相反,ul有个margin值, 却没有padding值.  在Firefox下,ul的list-style默认是处于内容的外边缘的。当然可以通过css可以将list-style置为内容的内边缘。  通过权衡得到适合两个浏览器的设置:padding:0; margin:0; list-style:inside;。还可以将ul设置为padding:0; margin:0; list-style:none;,然后给li添加背景图片,也是很不错的选择。<style type="text/css">body{font-size:12px; margin:20px; line-height:18px;}ox{width:200px; background-colo...
类别:网页编程 - CSS技术    查看:147    更新:2014-06-06

css中的position定位和z-index属性

由于平时不太用到,所以过去写css的时候对于position属性的absolute、 relative值理解比较模糊,对于z-index的层叠更是摸不着头脑,除了理解的因素外,各个浏览器的不同解析结果也是一个大问题。今天仔细阅读了一下css文档,总算是对盒模型的浮动、定位有了比较深刻的理解。我们在实践中很有可能遇到这样的问题:1、做一个横向导航,然后鼠标经过之后出现下拉菜单,那么这个下拉菜单的位置控制就是一个关键;2、我们想在一个正常的页面布局中放入几个浮在页面上的气泡提示,这时既不想让气泡提示破坏正常的文档布局,又不想气泡提示的定位在不同的浏览器中到处乱飘。3、当我们在一句正常的文本中插入一个小图标的话,一般会使用<img />标签...
类别:网页编程 - CSS技术    查看:149    更新:2014-06-06

将XHTML+CSS页面转换为打印机页面

在以前,为Web页面创建一个打印机友好的版本意味着要设计一个布局和格式都经过修改的单独页面,这样才能够在打印的时候获得令人满意的效果。现在,通过使用结构化的XHTML和CSS,你可以实现同样的效果而只用花费少得多的精力。  从屏幕显示到打印效果  大多数的Web页面都是设计适用于在计算机屏幕上观看的。然而,有的时候用户需要将某些页面打印出来,也许就是为了保留一个长期的记录,或者将其用作方便的离线参考资料。  现在的麻烦是,让Web页面在计算机彩色屏幕上看起来引人注目和五彩缤纷的很多特性,都无法在打印版的Web页面上表现出相同的效果——尤其当打印机是黑白的时候。在被降级为灰度打印的时候,彩色的...
类别:网页编程 - CSS技术    查看:153    更新:2014-06-06

IE6.0,ie7.0与Firefox的CSS兼容性

1.DOCTYPE 影响 CSS 处理2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行  3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中  4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width  5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式,值得注意的是,一定要将xxxx !important 这句放置在另一句之上  6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制...
类别:网页编程 - CSS技术    查看:167    更新:2014-06-05

XHTML的标签嵌套规则

下面是一份在 HTML 4 Strict 和 XHTML 1.0 Strict 下必须遵守的标签嵌套规则,比如你不能在 <a> 里面再嵌入一个 <a> 这样的约定。说明:1. 为了方便读者阅读,本文中的标签使用了大写(根据 XHTML 的规则,元素名必须小写,比如 <html> 而不应是 <HTML>)。2. 小写的单词表明一组或一系列 HTML 标签。3. 每一项条目(标签)后都跟随一组标签列表,如果没有这个列表,那么表明该条目(标签)内部不允许包含任何标签。这意味着该条目内部只能包含纯文本内容(#PCDATA,见下文)。如果注明 (empty),这意味着该条目内部不允许包含任何形式的内容。对于 flow,inline,block,OBJECT 和...
类别:网页编程    查看:178    更新:2014-06-05

IE和Firefox在JS方面的兼容性

1.document.formName.item(”itemName”) 问题说 明:IE下,可以使用document.formName.item(”itemName”)或 document.formName.elements["elementName"];Firefox下,只能使用 document.formName.elements["elementName"].解决方法:统一使用document.formName.elements["elementName"].2.集合类对象问题说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.解决方法:统一使用[]获取集合类对象.3.自定义属性问题说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获...
类别:网页编程 - JavaScript    查看:169    更新:2014-06-05

RegExp对象的方法和属性

RegExp对先看整个字符串是不是匹配,如果没有发现匹配,先去掉最后字符串中的最后一个字符,并再次尝试,如果还没有发现匹配,那么再次去掉最后一个字符,这个过程会一直重复下去直到发现匹配或不剩任何字符串,上面的简单量词都是贪婪量词。test():判断某个字符串是否匹配指定的模式 exec():返回一个数组,数组中的第一个条目是第一个匹配,其他的是反向引用 match():返回一个包含在字符串中的所有匹配的数组 search():返回在字符串中出现的第一个匹配的位置 replace():用另一个字符串来替换某个字符串中的所有匹配 split():将字符串分割成一系列子串并通过一个数组将它们返回 global:表示g是否被设置 ignoreCase:表示i是否被设置 mu...
类别:网页编程 - JavaScript    查看:134    更新:2014-06-03

Firefox中childNodes的问题

先看两个对象: 对象一: <div id="test1"><!--第一个遍历对象,节点之间留有空格和回车--> <div>Test Content</div> <div>Test Content</div> <div>Test Content</div> </div>对象二: <div id="test2"><!--第二个遍历对象,除注释外,节点间无空格回车--><div>Test Content</div><div>Test Content</div><div>Test Content</div></div>用IE和Firefox运行如下代码: var test1 = document.getElementById('test1'); var test2 = document.getElementById('test2'); var childs1 = test...
类别:网页编程 - JavaScript    查看:155    更新:2014-06-03

Firefox中的XML DOM

 现在我们来看看Firefox中的XML DOM实现,Firefox的开发人员采用更为标准的方法,将其作为JavaScript实现的一部分。Mozilla确保所有基于Gecko的浏览器的所有平台都支持XML DOM。 Firefox中创建一个XML DOM,需要调用document.implementation对象的createDocument()方法。该方法接受三个参数:第一个参数是包含文档所使用的命名空间URI的字符串;第二个参数是包含文档根元素名称的字符串;第三个参数是要创建的文档类型(也称为doctype)。如果要创建空的DOM文档,则代码如下所示:var oXmlDom = document.implementation.createDocument("", "", null);前两个参数是空字符串,第三个...
类别:网页编程 - JavaScript    查看:147    更新:2014-06-03

firefox与IE中对javascript和CSS的区别

1. document.formName.item("itemName") 问题 说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"]; Firefox下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formName.elements["elementName"].2.集合类对象问题 说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象. 解决方法:统一使用[]获取集合类对象.3.自定义属性问题 说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获...
类别:网页编程    查看:143    更新:2014-06-03

em与px的区别以及em特点和应用

一直也搞不清楚px与em之间的关系和特点,看过95%的中国网站需要重写CSS以后后确实收获很大。平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用。因为 1. IE无法调整那些使用px作为单位的字体大小; 2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位; 3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。 px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册) em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册) 任意...
类别:网页编程    查看:75    更新:2014-06-03