1．缺少一个没有标准之争、没有back和history的浏览器 
 
Ajax取消了back按钮，即对浏览器后退机制的破坏。后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作，这是ajax所带来的一个比较严重的问题。作为一个WEB的用户，我们已经习惯了有 back按钮，这几乎是每个用户共同的习惯，AJAX下点击链接是不Redirect页面，所以不存在后退和前进了，同样，没有后退和前进也就无存找浏览历史纪录了。back和history存在的根本就是url的改变，在AJAX下人们发现不改url也同样能达到内容改变这个酷酷的特点。
用过Gmail的知道，Gmail下面采用的ajax技术解决了这个问题，在Gmail下面是可以后退的，但是，它也并不能改变ajax的机制，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。但是，虽然说这个问题是可以解决的，但是它所带来的开发成本是非常高的，和ajax框架所要求的快速开发是相背离的。这是ajax所带来的一个非常严重的问题。
 
2．对搜索引擎的支持不好 
3．安全问题
ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。
 
4．语言问题
I)   编写复杂、容易出错 (javascript本是是个轻量级的小东西，现在被强迫重用起来，负担可想而知)
javascript本是是个轻量级的小东西，现在被强迫重用起来，负担可想而知。javascript对OOP的支持很少，这就限制了javascript代码的可重用可封装等等，从Google Mpa还是其他一些应用中能看到的都是无数的<script src="..."></script>这样的文件包含，这些除了让程序员头昏的更快点，一点好处都没有。更可怕的是在javascript中竟然没有一款顺手的Debug软件，很多写js的老手到今天还是用最原始的alert("")来调试，splinetech JavaScript HTML Debugger 算是一个看起来还像个样子的调试器吧，可惜不是免费的，几十大刀让我这种穷人只能望而生叹了。
不容易调试（是个很大的缺点）
 
II)  冗余代码更多了 （层层包含js文件是AJAX的通病，再加上以往的很多服务端代码现在放到了客户端）
III) 破坏了Web的原有标准 
 
Ajax适用场景
　　1.表单驱动的交互
　　2.深层次的树的导航
　　3.快速的用户与用户间的交流响应
　　4.类似投票、yes/no等无关痛痒的场景
　　5.对数据进行过滤和操纵相关数据的场景
　　6.普通的文本输入提示和自动完成的场景
Ajax不适用场景
　　1.部分简单的表单
　　2.搜索
 　3.基本的导航
　　4.替换大量的文本
　　5.对呈现的操纵
优缺点都有什么：
1、最大的一点是页面无刷新，用户的体验非常好。
2、使用异步方式与服务器通信，具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
ajax的缺点
1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、不容易调试。
 
 
 ajax 后退：
作者的目的是要让select选择框做的选择，在浏览器中科院前进和后退。
<html>

<head>

<script language="JavaScript" type="text/JavaScript">

function reportOptionValue()

{

  var myForm = document.make_history;

  var mySelect = myForm.change_year;

  return mySelect.options[mySelect.selectedIndex].value;

}

function setOptionValue(value)

{

  var myForm = document.make_history;

  var mySelect = myForm.change_year;

  mySelect.options[value-1].selected = true;

}

</script>

</head>

<body>

<form name=make_history>

  <select name=change_year>

    <option value="year_1">Year 1</option>

    <option value="year_2">Year 2</option>

  </select>

</form>

</body>

</html>

I'll first tackle requirement 1: Create a history of states. As mentioned above, the requirement consists of the following three steps:

  1. Create history
    1. Save meaningful state
    2. Generate a corresponding URI
    3. Push the URI onto the browser stack

The state I want to save is every change to the select box. Therefore I'll create a new URI that includes the select box state information.

To remain compliant with Internet standards, I'll use the fragment identifier part of the URI. As stated in the IETF RFC 3986, " ...Fragment identifiers have a special role in information retrieval systems as the primary form of client-side indirect referencing, <...> the fragment identifier is separated from the rest of the URI prior to a dereference, and thus the identifying information within the fragment itself is dereferenced solely by the user agent, regardless of the URI scheme...."

Using the fragment identifier, I can create an "Ajax-URI," composed of a client-side and a server-side part, separated by the hash ("#") sign.

JavaScript provides the window.location() function to update the browser's history and address with a URI. In addition, you can directly access the fragment identifier with window.location.hash().

In the following snippet, you can see how I have extended the code with an onchange event handler on the select box that updates the browser history and address bar with an "Ajax-URI":

有以下改变：

function makeHistory(newHash)

{

  window.location.hash = newHash;

}


 <select name=change_year 

                        

onchange=

      "return makeHistory(reportOptionValue())">
  1. Restore history
    1. Detect URI change
    2. Recreate the state from a URI

In Step 1, I updated the URI client side through the window.location.hash() function. The call does not result in a server roundtrip or a page refresh. Instead, I need to handle the URI change the Ajax way (client side).

I'll first add a polling function that will regularly check the URI in the browser history. I'll register pollHash() in the onload event of the page and then re-execute it every 1,000 milliseconds.

The polling function will call the function handleHistory(), which checks whether the URI has changed since the previous check. I do this using the global variable expectedHash.

The final piece is to determine whether the URI has changed because of the event handler on the select box or because the end user clicked the back button. I do this by setting expectedHash accordingly in the event handler of the select box.

完整代码：

<html>

<head>

<script language="JavaScript" type="text/JavaScript">

var expectedHash = "";

function makeHistory(newHash)

{

  window.location.hash = newHash;

expectedHash = window.location.hash;

  return true;

}

function reportOptionValue()

{

  var myForm = document.make_history;

  var mySelect = myForm.change_year;

  return mySelect.options[mySelect.selectedIndex].value;

}

function setOptionValue(value)

{

  var myForm = document.make_history;

  var mySelect = myForm.change_year;

  mySelect.options[value-1].selected = true;

  return true;

}

function handleHistory()

{

  if ( window.location.hash != expectedHash )

  {

    expectedHash = window.location.hash;

    var newoption = expectedHash.substring(6);

    setOptionValue( newoption );

  }

  return true;

}

function pollHash() {

  handleHistory();

  window.setInterval("handleHistory()", 1000);

  return true;

}

</script>

</head>

<body language="JavaScript"

onload="return pollHash()">

<form name=make_history>

  <select name=change_year

    onchange="return makeHistory(reportOptionValue())">

    <option value="year_1">Year 1</option>

    <option value="year_2">Year 2</option>

  </select>

</form>

</body>

</html>

参考：http://www.oracle.com/technetwork/articles/entarch/ajax-back-button2-083351.html

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

一篇类似：

Tons of websites are now using ajax to dynamically load content into a page instead of reloading the entire page.  This gives a much better experience for the user, and it just feels much more seamless than traditional websites do.  However, people often run into issues with ajax because it doesn't update the url.  This means that the user cannot bookmark the page or use the back button like they normally would.  However, with some clever javascript, we can still make everything work as they expect.There are several elements that we need to solve to address these issues.  Let's start with getting the url to change, so that each ajax "page" has a unique url.

You may already know that there is a javascript variable "document.location" that allows you to change the url.  However, when using ajax, if we change this variable, it will cause the entire page to reload (just like before).  So instead of modifying "document.location", we need to modify "document.location.hash".  This variable is commonly used for internal page links.  If there is a table of contents on a page and clicking on an item jumps you down to that section on the page, that is using the hash.  This will help us too because changing the hash doesn't trigger a page load.  This method is also often used for Flash websites to store bookmarks to specific pages.

So when our ajax request returns, we just set "document.location.hash" equal to some unique value that we can check later.  See the example below:

  1. Load example.com
  2. Click something to trigger ajax request for content
  3. document.location.hash = "newpage"
  4. New url is example.com#newpage

So now we have a unique url, but that url doesn't really have any meaning for the actual page.  Loading that url doesn't actually get us the content that we want.  To solve that, we need to add some javascript that gets executed on page load.  The checkHash function below should be executed on page load.  It will grab the hash from the url, check to make sure it is a new page, and then call another function, loadPage, which will just take the hash string and trigger an ajax request for the appropriate page.  The loadPage function is custom code that you will need to write as it will be specific to the data you are trying to swap out with ajax.

var recentHash = "";
var checkHash = function() {
  var hash = document.location.hash;
  if (hash) {
    hash = hash.substr(1);
    if (hash == recentHash) {
      return;
    }
    recentHash = hash;
    loadPage(hash);
  }
}

With that function in place, bookmarking of pages will now work, but we need to add one more small thing to get the back button to work too.  On page load we need to execute the following code:

setInterval(checkHash, 1000);

This code tells the page to run the checkHash function once every second.  This will make it so that when the user hits back in their browser this function will see the new url and trigger the ajax request for the new content.

That is it.  You now have a fancy ajax loading page that still supports all of the common browser behaviors.

ajax缺点以及解决办法的更多相关文章

  1. Java并发编程之CAS第三篇-CAS的缺点及解决办法

    Java并发编程之CAS第三篇-CAS的缺点 通过前两篇的文章介绍,我们知道了CAS是什么以及查看源码了解CAS原理.那么在多线程并发环境中,的缺点是什么呢?这篇文章我们就来讨论讨论 本篇是<凯 ...

  2. Chrome不支持本地Ajax请求，解决办法

    Chrome不支持本地Ajax请求,当我在.html文件中访问.json文件时就会出现这个问题,就是说这个时候不能加载这个.html文件. 解决方式 打开Chrome快捷方式的属性中设置: 右击Chr ...

  3. ajax跨域解决办法

    在使用jquery的ajax作请求时,http://127.0.0.1:8080,类似这样的一个本地请求,会产生跨域问题, 解决办法一: jsonp: var url= "http://12 ...

  4. AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法?

      AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法? 分类: web前端面试题2013-07-20 22:40 630人阅读 评论(0) 收藏 举报 目录(? ...

  5. Ajax提交参数的值中带有html标签不能提交成功的解决办法（ASP.NET）

    最近在公司做资源及文章上传功能遇到一个小问题,被坑了好半天. 该功能就类似利用富文本编辑器发布信息,但是用Ajax提交数据,因此提交参数值中不可避免的含有html标签. 在本地运行代码一直没问题,总是 ...

  6. [AJAX]ajax在兼容模式下失效解决办法

    使用jQuery,用ajax实现局部刷新功能,在火狐,360急速浏览器高速模式下,ie8,9都能正常运行,但切换到兼容模式下无效,解决办法有两种关闭浏览器兼容性视图,二是引入json2.js文件 这里 ...

  7. Ajax缓存解决办法（转载）

    项目有时要用一些Ajax的效果,因为比较简单,也就没有去用什么Ajax.NET之类的东西,手写代码也就实现了.. 第二天,有人向我报告错误:说是只有第一次读取的值正常,后面的值都不正常:我调试了一下 ...

  8. jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法

    jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法   在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们 ...

  9. Ajax在IE浏览器会出现中文乱码解决办法

    在AJAX浏览器来进行发送数据时,一般它所默认的都是UTF-8的编码. Ajax在IE浏览器会出现中文乱码的情况!解决办法如下 <script type="text/javascrip ...

随机推荐

  1. html5 canvas 一个漫天飞雪的效果

    很棒的下雪效果 代码奉上 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  2. Vue.js 学习示例

    本篇和大家分享的是学习Vuejs的总结和调用webapi的一个小示例:快到年底了争取和大家多分享点东西,希望能对各位有所帮助:本章内容希望大家喜欢,也希望各位多多扫码支持和推荐谢谢: » Vuejs ...

  3. 关于淘宝的数据来源,针对做淘宝客网站的淘宝api调用方法

    上次写了个淘宝返利模式的博客,直接被移除首页,不知道何故啊.可能是真的跟技术不太刮边. 众所周知,能够支撑一个网站运营的最基础不是程序写的多么好.也不是有多么牛X的运营人员,最主要的是数据,如果没有数 ...

  4. 博客终于开通了happy

    HelloWorld! 在我不懈的申请下,我的博客终于在第4次申请后成功开通了! 作为一个毕业两年的码农,现在才开始想要记录一些东西,似乎有点晚 -_-! 希望多年以后可以在这看到我长长的足迹!

  5. ui的设计原则

    部分网页设计原则 规划目录结构时应当遵循的几个原则: 1.不要将所有文件都存放在根目录下; 2.按栏目内容分别建立子目录; 3.在每个主目录下都建立独立的images目录; 4.目录的层次不要太深; ...

  6. 跨域(cross-domain)访问 cookie （读取和设置）

    Passport 一方面意味着用一个帐号可以在不同服务里登录,另一方面就是在一个服务里面登录后可以无障碍的漫游到其他服务里面去.坦白说,目前 sohu passport 在这一点实现的很烂(不过俺的工 ...

  7. HP-UX磁带备份错误收集

    磁带备份命令: make_tape_recovery -Av  默认备份至/dev/rmt/0mn. 如果有多个磁带机,那么需要使用下面命令 make_tape_recovery -Av -a /de ...

  8. JIRA官方：JIRA项目跟踪

    问题无处不在 使用JIRA来捕捉任何类型的问题——从软件缺陷到新特性到需求和故事到任务和活动项.你可以很方便地定义自己的问题类型以匹配团队工作需要. 自定义工作流 一个项目跟踪工具不应该决定你的工作方 ...

  9. 数据结构--队列之C数组实现

    队列是一种限定操作的线性表,它只能在表的一段插入,另外一段取出.所以也称为先进先出数据结构(FIFO---First In First Out) C代码如下: #include<stdio.h& ...

  10. uitableview 优化

    1. http://www.cocoachina.com/ios/20150602/11968.html 最近在微博上看到一个很好的开源项目VVeboTableViewDemo,是关于如何优化UITa ...