3．安全问题
III) 破坏了Web的原有标准
1.表单驱动的交互
2.深层次的树的导航
3.快速的用户与用户间的交流响应
4.类似投票、yes/no等无关痛痒的场景
5.对数据进行过滤和操纵相关数据的场景
6.普通的文本输入提示和自动完成的场景
Ajax不适用场景
1.部分简单的表单
2.搜索
3.基本的导航
4.替换大量的文本
5.对呈现的操纵
2、使用异步方式与服务器通信，具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
ajax的缺点
1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、不容易调试。
<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:
- Create history
- Save meaningful state
- Generate a corresponding URI
- 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())">
- Restore history
- Detect URI change
- 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:
- Load example.com
- Click something to trigger ajax request for content
- document.location.hash = "newpage"
- 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.