Sjolzy'blog

先提下关于jQuery的$.Ajax 的async的作用,

官方的解释是

async Boolean Default: true
By default, all requests are sent asynchronous (e.g. this is set to true by default). If you need synchronous requests, set this option to false. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

async默认是true, 即为异步方式, $.Ajax执行后, 会继续执行ajax后面的脚步, 直到服务器端返回数据后, 触发$.Ajax里的success方法. 这时候执行的是两个线程.

我的出现闪屏的情况是:

$.ajax({
    type: "post",
    url: "index.php",
    data: { },
    async:false,

[代码] [JavaScript]代码

var Ajax={};
Ajax._xmlHttp = function(){ return new (window.ActiveXObject||window.XMLHttpRequest)("Microsoft.XMLHTTP");}
Ajax._AddEventToXHP = function(xhp,fun,isxml){
    xhp.onreadystatechange=function(){
        if(xhp.readyState==4&&xhp.status==200)
            fun(isxml?xhp.responseXML:xhp.responseText);
    }    
}
Ajax.get=function(url,fun,isxml,bool){
    var _xhp = this._xmlHttp();    
    this._AddEventToXHP(_xhp, fun || function(){} ,isxml);
    _xhp.open("GET",url,bool);
    _xhp.send(null);    
}

ajax请求的时候，IE出现拒绝访问的错误，同域名无跨域，调试了半天还是调试不出问题？

FF调试看到错误信息：

Error loading content (NS_ERROR_DOCUMENT_NOT_CACHED)

text/html (NS_ERROR_DOM_BAD_URI)

如果也遇到这种情况，实在想不出啥原因了的话，看看是不是http://和https://的互访。

利用Magento插件：SK_CartUpdate 可以很便捷的实现Magento Ajax更新购物车 的功能。见效果图：

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

使用Javascript库

ajax(动态网站静态化)的流行和巨大威力，让我们重新审视了Javascript的开发，也直接促使各种库的出现。对于普通的开发者，使用一些适合自己的Javascript库不仅可以避免ajax(动态网站静态化)应用上的浏览器兼容等问题，也使其开发更加的稳定和高效。这里列一些我知晓的轻量级的Javascript库：

YUI：YAHOO出品，组件丰富强大健壮稳定，是团队协作开发的首选。

JQuery：灵活、高效，其基于CSS3 和XPath的选择器语法引擎非常的强大和完整。

Prototype：是一个非常优雅的Javascript库，最经典的莫过于$符号了，DWR，JQuery都被它吸引了。在它基础上出现了script.aculo.us。

Mootools：核心语法和Prototype比较类似，但是用过之后才

如何在php中判断一个网页请求是ajax请求还是普通请求？你可以通过传递参数的方法来实现，例如使用如下网址请求：

/path/to/pkphp.com/script.php?ajax

在php脚本中使用如下方法判断：

if(isset($_GET['ajax'])) {

...这是一个ajax请求，然后...

}

else {

...这不是一个ajax请求，然后...

}

通过传递_GET参数的方法简单实现了网页请求的判断。但是如果需要这样的功能，这个方法可能就有弊端，功能需求如下：

1.通过ajax请求的网页与普通请求

在看文章前，先指定一个变量xhr，xhr代表ajax对象。

测试浏览器：ie为ie6，firefox为2，其他的未测试。统称ie6为ie，firefox2为ff。

基本的============================================

1，最经典的就是ie下的缓存问题了。
如果使用的是get，那么在ie下出现缓存问题。导致代码只执行一次。解决办法就是加时间戳或者随机数，使url变为唯一，这样就不会出现ie

下的缓存问题了，或者改为post提交。
xhr.open("get","xxxx.aspx?_dc="+new Date().getTime(),true);

2，ajax对象属性的大小写问题
在w3c浏览器，如ff中，对大小写是敏感。如
if(xhr.readystate==4)这种写法，在ie下是成立的，但是在ff下就行不通了，因为ie不区分大小写，ff是区分大小的。
标准写法为if(xhr.readyState==4)，同理还有属性 responseText，responseXML,status。
还有状态转换函数xhr.onreadystatechange，要注意全部为小写

1. load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。

url (String) : 请求的HTML页的URL地址。

data (Map) : (可选参数) 发送至服务器的 key/value 数据。

callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。

这 个方法默认使用 GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。

这个方法可以很方便的动态加载一些HTML文件，例如表单。

示例代码：

$(".ajax.load").load("http://www.cnblogs.com/QLeelulu/archive/2008/03/30/1130270.html .post",
		function (responseText, textStatus, XMLHttpRequest){
		this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0]	
		//alert(responseText);//请求返回的内容
		//alert(textStatus);//请求状态：success，error

1、编码
      编码比较常用的有： UTF-8， GBK， GB2312， ISO-8859-1，除了 iso-8859-1之外的其它三个编码都能很好的支持中文，但它们都兼容 ISO-8859-1的编码（就是说无论编码怎么改变，只要是 ISO-8859-1中的字符，永远不会出现乱码）。
      这四种编码中， GB2312是中国规定的汉字编码，也可以说是简体中文的字符集编码;GBK 是 GB2312的扩展 ,除了兼容GB2312外，它还能显示繁体中文，还有日文的假名;而 UTF-8虽然也支持中文，但却与GB码不兼容（编码值不同）。UTF-8使用的是可变长的 UNICODE编码，编码可能是 1位 16进制（即 ISO-8859-1中的字符，其编码也是相同的）也有可能是 2位或 3位的 16进制。 UTF-8的优点是：1、与CPU字节顺序无关 , 可以在不同平台之间交流。 2、容错能力高 , 任何一个字节损坏后 , 最多只会导致一个编码码位损失 , 不会链锁错误 (如 GB码错一个字节就会整行乱码 )，所以在国际化处理中基本都是建议使用 UTF-8作为编码。

2、文件的编码
      文件编码最常使用的有两种：ANSI和UTF-8，光看名字估计你都可以猜到了，ANSI就是我们保存文件时使用的默认编码，而UTF-8则需自己设置。对于编码的改变，我使用的工具是NOTEPAD和ECLIPSE，NOTEPAD使用最简单，只要打开文件后在另存为中选择相应的编码就行了，而且它对编码的支持非常好;而在ECLIPSE中，只要稍微设置一下就行了，打开首选项，然后选择：常规->内容类型(ContentType)，在右边选中你想改变保存编码的文件类型，然后在下方的缺省编码中改变其值，最后点击更新（UPDATE）按钮即可。

这里的方案是页面(page)是基于GBK(gb2312) 的编码格式

AJAX的中文情况,默认情况下,tomcat和weblogic的get和post请求的编码方案都不一样,不过前提都是要设置 request.setCharactorEncoding("UTF-8")如下面代码中,get方案是很烦琐的那种将得到的参数重新编码来实现 的|new String(request.getParameter("para name").getBytes("encoding name"))|而post方案是比较简单而方便的,也提倡使用这种方式,因为可以基于filter来管理编码
tomcat可以通过设置在server.xml里的Connector元素下设置URIencoding="gbk"参数来让get使用 post的方案(即get和post都使用request.setCharactorEncoding("UTF- 8"),request.getParameter("para name") )具体设置参考http://www.javaeye.com/topic/131542,不过在weblogic下无解(我个人还没发现如何实 现),weblogic好像在解析get参数后自己又用什么编码格式包装过......其实AJAX get根本没有普通请求get请求作为标签的作用,我们完全可以不使用get,而只使用post

测试用的jsp和servlet在下面,丢到一个项目里,在web.xml里配置servlet后运行可以看到效果,servlet的url- pattern是这个<url-pattern>/GetAndPostExample</url-pattern>

getAndPostExample.jsp

ajax返回中文乱码问题解决

使用ajax获取

服务

器数据返回给客户端，出现中文乱码。在之前的一个ajax应用中指定codepage=936，将所有页面编码都指定为GB2312即可解决。

这 次的应用中却无起作用了，经过多次的试验，客服端的编码应该绝对没有问题的。可以判断问题一定出在服务器端。稍微分析一下可知虽然服务器端指定了文件的编 码格式，但对于服务器输出流就成为了怀疑的

对象

。 由于使用MS SQL2000，采用unicode编码，所以返回数据给客户端将会出现unicode编码的中文在gb2312编码页面显示的问题。于是在服务器端输出 流加一个HEADER：ASP程序中加入

AJAX的中文乱码可以大概分为两中，第一种是向服务器端发送中文参数时 （xmlhttp.open(“get|post”,url,true)）,服务器端接收到的为乱码，这个也是我今天遇到的问题，没做处理之前，在IE里 是正常的，但是在Firefox里面就出现了乱码，我先把接收到参数输出到一个文本里，没有发现什么问题，郁闷了，然后我就把查询语句在输出来观察（我这 里是要从数据库里查出与参数相关的东西），终于发现问题，IE和Firefox输出的参数不一样，虽然汉字上都一样，但是和前后连接上有细小的区别，于是 认定了是编码问题，在网上查找了相关资料，都没能解决问题，但是得到一些启示，因为AJAX发送数据都是采用UTF-8编码的方式发送的，所以要在服务器 端进行编码转换（我这里页面是采用GB2312编码的，如果是采用UTF-8的话应该不会有这步的问题），所以我在服务器端进行了UTF-8转 GB2312，

$str=iconv("UTF-8","GB2312",$str);

然后测试，在Firefox上顺利解决了问题，以为大公告成了，可是再到IE下测试，发现IE又出现了问题，服务器端接收到的参数没值，这下就郁闷 了，突然看到发送头设置了setRequestHeader("Content-Type","application/x-www-form- urlencoded");，就找到问题所在了，然后就在发送那里进行了参数编码：

geturl=encodeURI(geturl);

       geturl=encodeURI(geturl); //两次也可以写

//*==============================================================================*/

//*   Ajax加载                                                                                                                                                             */

//* 语法：var objLoad=new AjaxLoad()                                                                                                                */

//*       objLoad.Loading(doAction,dataNode[,dataType[,callback[,fullShow]]]);                                               */

//*                                                                                                                                                                              */

//* 参数：                                                                                                                                                                 */

//*      -doAction[必需的]  执行URL                                                                                                                        */

//*      -dataNode[必需的]  显示获取内容的容器ID                                                                                              */

//*      -dataType[可选的]  数据类别[text|xml|body]，缺省值text                                                                         */ 

//*      -callback[可选的]  输出函数[函数对像]                                                                                                       */

//*      -fullShow[可选的]  显示模式: 缺省值false-单块模式,true-全屏模式                                                         */

//*                                                                                                                                                                              */

//*                                                                                                                                                                              */

//* 输出函数[callback]：                                                                                                                                         */

//*      可自定义输出函数来格式化所获取的数据，其格式请参加页尾objPrint()函数                                    */

//*                                                                                                                                                                              */

//*==============================================================================*/  

/*此处调用Charset.vbs来解决当dataType='body'时,xmlHttp.responseBody产生的乱码问题                        */

/*请保证Charset.vbs文件与本文件存放在同一路径当中                                                                                    */

var charsetPath=document.getElementsByTagName("script")[document.getElementsByTagName("script").length-1].src.split("?")[0];

charsetPath=charsetPath.replace("Ajax_Load.js","Charset.vbs");

document.write("<script type=\"text/vbscript\" src=\""+charsetPath+"\"></scr"+"ipt>");

//*==============================================================================*/ 

//*                           AjaxLoad begin                                                                                                                         */

//*==============================================================================*/  

function AjaxLoad(){

    /*初始化Ajax                                             */

 function InitAjax(){

  var Ajax=false;

  /*Microsoft*/

  try {

     Ajax = new ActiveXObject("Msxml2.XMLHTTP");

  } catch (e) {

     try {

1.创建xmlhttp对象时的问题。
创建xmlhttp对象在不同的浏览器中有不同的方法，在IE里好像只能用ActiveXObject创建，然而在Firefox等其他浏览器里就不行 了:(，但可以用XMLHttpRequest()函数创建，这样的不统一给程序员写程序带来了很大的难度，所以我认为在学习JS的过程中记录下这些不同 的地方很有必要，不然一个很有前途的程序很容易就会成为 "IE only" 的！！
下面是一个兼容的xmlhttp对象创建函数。以后就可以直接用这个函数创建xmlhttp对象，而不用担心兼容性问题了:D
[code]
function createAJAX()
{
var xmlhttp;
try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e1)
{
try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e2) { xmlhttp = null; }
}
if (!xmlhttp)
{
if (typeof XMLHttpRequest != "undefined") { xmlhttp = new XMLHttpRequest(); }
else return false;

使用 Ajax.Request 类 ,其实这个JS类不是系统自带的,而是网上的高人写的通用的JS类库,被广泛的使用,这个JS类为:prototype.js,下载:prototype.rar,开发手册下载:prototype.js开发手册.rar

--------------------------------------------------------------------------------

如果你不使用任何的帮助程序包，你很可能编写了整个大量的代码来创建 XMLHttpRequest 对象并且异步的跟踪它的进程，然后解析响应并处理它。当你不需要支持多于一种类型的浏览器时你会感到非常的幸运。

为了支持 AJAX 功能。这个包定义了 Ajax.Request 类。

假如你有一个应用程序可以通过 http://yoursever/app/get_sales?empID=1234&year=1998 与服务器通信。它返回下面这样的 XML 响应：

<?xml version="1.0" encoding="utf-8" ?>
<ajax-response>
 <response type="object" id="productDetails">
  <monthly-sales>
   <employee-sales>
    <employee-id>1234</employee-id>
    <year-month>1998-01</year-month>
    <sales>$8,115.36</sales>

很多时候，我们在网上注册个人信息，在提交完页面后，总得等待页面刷新来告诉我们注册是否成功，遇到网络差的时候，如果注册了一大串的东西，在经过漫长的等待页面刷新后，得到的确是“您的用户名已被使用”或XXXXXXX不合法，我想大家的心情一定特别不爽，今天就介绍个AJAX实现页面不刷新注册＋实时检测用户信息的简单注册程序，希望对大家有所帮助。好的，先看注册界面代码：

<table width="831" border="0" align="center" cellpadding="0" cellspacing="0">
   <tr style="display:none">
<td height="35" align="center" id="result"> </td>
   </tr>
</table>
<table width="100%" height="256" border="0" align="center" cellpadding="1" cellspacing="1">
   <tr>
       <td width="150" align="left" bgcolor="#FFFFFF">   · 用户名称:       </td>
       <td width="310" align="center" bgcolor="#FFFFFF">
      <input name="username" type="text" class="inputtext" id="username">
      
       <font color="#FF6633">*</font></td>
       <td align="left" bgcolor="#FFFFFF" id="check"> 4-16个字符，英文小写、汉字、数字、最好不要全部是数字。</td>
   </tr>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" c />
<title>评论系统</title>
<script src="main.js"></script>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="pllist">正在加载评论……
<script> loadDom();setTimeout("loadDom()",10000);</script>
</div>
<div style="width:240px;font-size:12px;text-align:center">
<fieldset><legend>评论</legend>
呢称：<input name="user" type="text" style="width:180px"/><input name="newsid" value="1" type="hidden"/>
内容：<textarea name="content" style="width:180px;height:80px"></textarea>
<input name="submit" value="我要评论" type="button" />
</fieldset>
</div>
<div style="font-size:12px;" id="msg"></div>
</body>
</html>

JS代码页(核心部分) main.js

1、PHP解决ajax中文乱码resopnseText中文乱码xmlhttp中文乱码

　　方案一：指定正确的编码

　　header("content-type: text/html;charset=gb2312");

　　方案二：全部统一为utf-8编码

　　测试地址：http://www.xinhengshui.com/bianmin/ip/lite

　　完整IP查询地址：http://www.xinhengshui.com/bianmin/ip

　　方案三：javascript的escape方法，基本中文字符转化成unicode格式提交，在服务器短使用java来模拟javascript的unescape方法还原成中文，进行处理。