Ajax的小贴士使用小结_AJAX相关

在使用Ajax过程中,有时候总会遇到一些难题,浏览器兼容、编码、IE下的特殊处理等等,偶尔会搞的人头昏脑胀哭笑不得,这里列一些小贴士,或许有些用。 

使用Javascript库 
       Ajax的流行和巨大威力,让我们重新审视了Javascript的开发,也直接促使各种库的出现。对于普通的开发者,使用一些适合自己的Javascript库不仅可以避免Ajax应用上的浏览器兼容等问题,也使其开发更加的稳定和高效。这里列一些我知晓的轻量级的Javascript库: 
1 YUI:YAHOO出品,组件丰富强大健壮稳定,是团队协作开发的首选。 
2 JQuery:灵活、高效,其基于CSS3 和XPath的选择器语法引擎非常的强大和完整。 
3 Prototype:是一个非常优雅的Javascript库,最经典的莫过于$符号了,DWR,JQuery都被它吸引了。在它基础上出现了script.aculo.us。 
4 Mootools:核心语法和Prototype比较类似,但是用过之后才知道什么叫简单轻巧和短小精悍。 

编码问题 
       通过XMLHttpRequest获取的数据,默认的字符编码是UTF-8,如果前端页面是GB2312或者其它编码,显示获取的数据就是乱码。通过XMLHTTPRequest,POST的数据也是UTF-8编码,如果后台是GB2312或者其他编码也会出现乱码。解决方法: 
1 统一到UTF-8。这也是国际化的必然趋势。 
2 输出通过XMLHttpRequest获取的文本文本时,在headers中增加文本声明(直接HTML声明没有作用)。如: 
PHP:header('Content-Type:text/html;charset=GB2312'); 
ASP:Response.Charset = "GB2312" 
JSP:response.setHeader("Charset","GB2312"); 
3 WWW服务器上强制声明。比如:apache下的配置: 
AddDefaultCharset GB2312
        这种情况主要是应对通过XMLHttpRequest访问的文件是静态文件,无法声明headers的情况下。 
静态页面一般都会经过Apache的deflate或gzip压缩,此时在上面情况下IE中,首次通过XMLhttpRequest获得的数据可以正常显示,但再获取数据显示时出现乱码,这次因为再次获取的数据来自缓存,可能由于浏览器解压缩的问题导致Apache设置的默认编码声明丢失。由于这种情况下一般是纯文本,可能还无法禁止缓存,可以设置XMLhttpRequest访问的文本文件不压缩来解决这个问题。 

4 非UTF-8页面通过XMLHttpRequest获取的文本文本输出前字符转码成unicode,或者编码直接是UTF-8,可以正常显示。如实例所示。

IE下的缓存问题 
由于IE的缓存处理机制问题,每次通过XMLHttpRequest访问动态页面返回的总是首次访问的内容,解决方法有: 

1 客户端通过添加随机字符串解决。如: 

复制代码 代码如下:

var url = 'http://dancewithnet.com/';  
url += '?temp=' + new Date().getTime();  
url += '?temp=' + Math.random(); 

2 在HTTP headers禁止缓存。如:
HTTP: 

复制代码 代码如下:

<meta http-equiv="pragma" content="no-cache" />  
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />  
<meta http-equiv="expires" content="Thu, 01 Jan 1970 00:00:01 GMT" />  
<meta http-equiv="expires" content="0" />  

PHP: 

复制代码 代码如下:

header("Expires: Thu, 01 Jan 1970 00:00:01 GMT");  
header("Cache-Control: no-cache, must-revalidate");  
header("Pragma: no-cache");  

ASP: 

复制代码 代码如下:

Response.expires=0  
Response.addHeader("pragma","no-cache")  
Response.addHeader("Cache-Control","no-cache, must-revalidate")  

JSP: 

复制代码 代码如下:

response.addHeader("Cache-Control", "no-cache");  
response.addHeader("Expires", "Thu, 01 Jan 1970 00:00:01 GMT"); 

IE下的reponseXML问题 
使用responseXML时,IE下只能接受.xml为后缀的XML文件,如果不能以.xml文件为结尾的,则需要如下处理: 
1 在服务器端声明是xml文件类型。如: 
PHP:header("Content-Type:text/xml;charset=utf-8"); 
ASP:Response.ContentType = "text/xml"; 
JSP:response.setHeader("ContentType","text/xml"); 
2 利用responseText获取,然后封装成XML。 
3 在AJAX应用上,JSON和JsonML是XML非常好的替代品。

时间: 2024-09-29 19:20:13

Ajax的小贴士使用小结_AJAX相关的相关文章

Ajax的小贴士使用小结

在使用Ajax过程中,有时候总会遇到一些难题,浏览器兼容.编码.IE下的特殊处理等等,偶尔会搞的人头昏脑胀哭笑不得,这里列一些小贴士,或许有些用. 使用Javascript库         Ajax的流行和巨大威力,让我们重新审视了Javascript的开发,也直接促使各种库的出现.对于普通的开发者,使用一些适合自己的Javascript库不仅可以避免Ajax应用上的浏览器兼容等问题,也使其开发更加的稳定和高效.这里列一些我知晓的轻量级的Javascript库:  1 YUI:YAHOO出品,

Ajax基础详解教程(一)_AJAX相关

什么是Ajax? 在研究ajax之前首先让我们先来讨论一个问题 --什么是Web 2.0 .听到 Web 2.0 这个词的时候,应该首先问一问 "Web 1.0 是什么?" 虽然很少听人提到 Web 1.0,实际上它指的就是具有完全不同的请求和响应模型的传统 Web.比如,到 hdu.edu.cn 网站上点击一个按钮.就会对服务器发送一个请求,然后响应再返回到浏览器.该请求不仅仅是新内容和项目列表,而是另一个完整的 HTML 页面.因此当 Web 浏览器用新的 HTML 页面重绘时,可

使用HTML5中postMessage知识点解决Ajax中POST跨域问题_AJAX相关

由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级的通信等.常规的几种解决方法: (1) document.domain+iframe: (2) 动态创建script: (3) iframe+location.hash: (4) flash. postMessage是HTML5为解决js跨域问题而引入的新的API,允许多个iframe/window跨域通信. HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口

SpringMVC环境下实现的Ajax异步请求JSON格式数据_AJAX相关

一 环境搭建 首先是常规的spring mvc环境搭建,不用多说,需要注意的是,这里需要引入jackson相关jar包,然后在spring配置文件"springmvc-servlet.xml"中添加json解析相关配置,我这里的完整代码如下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schem

登录超时给出提示跳到登录页面(ajax、导入、导出)_AJAX相关

一.一般页面登录超时验证,可以用过滤器filter,如下: package com.lg.filter; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import javax.servlet.ServletRequ

AJax与Jsonp跨域访问问题小结_AJAX相关

####JavaScript的AJax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML) 设计AJax使用的一种重要技术是XMLHttpRequest对象. 创建XMLHttpRequest对象的方式: xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // IE浏览器支持的创建方式 xmlhttp = new XMLHTTPRequest(); // F

Ajax的内部实现机制、原理与实践小结_AJAX相关

一.Ajax是什么 AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),Ajax不是一个技术,它实际上是几种技术,每种技术都有其独特这处,合在一起就成了一个功能强大的新技术.作为创建交互式网页应用的网页开发技术,它有以下特点: 使用XHTML+CSS来表示信息 使用JavaScript操作DOM(Document Object Model)进行动态显示及交互 使用XML和XSLT进行数据交换及相关操作 使用XMLHttp

AJAX下的请求方式以及同步异步的区别小结_AJAX相关

请求方式,分为GET与POST: GET 最为常见的HTTP请求,普通上网浏览页面就是GET.GET方式的参数请求直接跟在URL后,以问号开始.(JS中用window.location.search获得).参数可以用encodeURIComponent进行编码,使用方式: var EnParam = encodeURIComponent(param); URL只支持大约2K的长度,即2048字符数:使用GET进行AJAX请求时候会缓存导致出现的页面不是正确的,一般方法加random参数值:aja

$.ajax传JSON数据到后台的注意事项小结_AJAX相关

复制代码 代码如下: $.ajax({ url: "../Services.ashx", type: "POST", //data: { 'data': { 'typename': JSON.stringify(typename) }, 'operationType': '2' }, data: { 'data': typename, 'operationType': '2','nowheight':nowheight,'nowarea':nowarea }, su