正文
ajax与html5的简单介绍
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
Ajax在HTML5价值到底在哪里？
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页面。
相关问答
Q1: 在html5中，多线程worker和异步ajax有什么区别
多线程是属于并发范畴,而异步是数据请求方式的范畴,与同步相对。从具体使用场景来说，耗CPU的任务可以移到worker中处理，ajax主要是IO费时间，为了保证不让代码阻塞，所以异步处理，等数据到达时再通知程序。这是在html5中的变通方法，因为ajax是比较早实现的，而worker是比较新的一个概念，可以说worker的功能是覆盖ajax的，只是由于HTML的不断发展自然出现了这样的问题。
在其它语言中，一般费时任务都放在其它线程中，以避免阻塞主线程。而不管它是费CPU还是费IO。
总之，这都是HTML的错。你大可以把网络请求也放在worker中处理，但不幸的是，支持worker的浏览器并不多。
Q2: HTML5相对于以前的web技术AJAX，最大的改变或不同是什么？
web前端开发：主要是通过html/css，js，ajax，DOM等前端技术，实现网站在客服端的正确显示及交互功能。可分为：网页重构，js功能开发。随着HTML5的到来，RIA时代正在开启，web前端的应用功能将会更加灵活。最大的好处就是可实现客服端的更加友好的用户体验而不会对服务器带来过重的负担。
而web开发，个人觉得未免说得太宽范了点，一般主要指后台的程序开发方面，会用到PHP或ASP，mysql或mssql，ajax等，主要是服务器端的脚本语言及数据库技术，这也是网站保证正常动作，技术方面最核心的部分。
Q3: 在html5前端开发中ajax在项目中重要不
你好 AJAX还是比较重要的，因为用AJAX可以实现不刷新网页的情况下和后端进行数据传输，例如评论或文章的点赞功能就需要用AJAX传到后台，还有注册用户名的时候可以在用户名输入完成的时候把用户名传到后台验证是否存在，除了我说的这两个地方外还有很多地方会用到AJAX，所以还是有必要学一下AJAX的，而且AJAX也不难，如果只是学会使用的话，不用1小时就可以学会使用了，当然 如果要弄懂原理和数据处理的话还是需要下点功夫才行，如果用jQuery的话AJAX会更简单一些。希望我的回答能够帮助到你，如果还有什么疑问可以继续追问。
Q4: 当使用ajax技术时，哪一个html5特性能够提高用户使用"后退"和"前进"功能的体验
History 对象从 HTML4 开始引入，HTML5 中增加了 pushState, replaceState 两个方法，和 popstate 事件。下面作一些简单的介绍。
1. pushState()方法
pushState() 的作用是往历史记录的堆栈中压入一条记录，该方法有三个参数：
state object —— 一个对象，用于保存状态信息，当 popstate 事件被触发时，popstate 事件对象的 state 属性会包含相应的 state object 的拷贝。state object 的容量很小（Firefox 中强制为 640k），如果需要储存较大的数据，建议使用 localStorage 或 sessionStorage。
title —— 即被压入的历史记录的页面的标题，该属性暂时被所有浏览器忽略，实际开发时可以填空字符或一个简短的标题。
url —— 新的历史记录的地址，可以是相对路径或绝对路径，若为相对路径则以当前 url 为基址。
2. replaceState()方法
replaceState() 方法与 pushState() 方法类似，参数与 pushState() 也相同，但 replaceState() 方法会修改当前的历史记录而并非创建新的记录，因此在需要更新当前历史记录的 state object 或 URL 时，使用该方法会更加合适。
3. popstate 事件
popstate 事件会在激活的历史记录发生变化（如前进、后退、调用 pushState 或 replaceState 方法）时触发在 window 对象上。如上面所描述，如果被激活的历史记录由 pushState 创建或是被 replaceState 修改，则 popstate 事件的状态属性将包含相应的 state object 的拷贝，开发者可以在 popstate 的回调中调用这些之前保存在 state object 中的信息。
值得注意的是，Chrome 会在打开页面（包括第一次打开页面）以及页面刷新时产生 popstate 事件而 Firefox 则不会，这会为开发带来一些麻烦，但下面会给出解决方案。
Q5: 如何使用 Ajax 或者 HTML5 技术实现网页的拖拽加载
在Web开发中，我们要实现拖放效果，需要借助Javascript。今天让我们使用Html5实现它：
先看html核心代码:
div
p把黄色小方块拖入到红色大方框中/p
/div
div id="item" draggable="true"
/div
div id="drop"
/div
draggable属性是html5新增加的，它有三个值true,false,auto. true是可以拖，false是不可以，auto由用户浏览器是否支持而定。更多请可以参考官方文档.
加上一点儿样式:
style type="text/css"
#drop
{
width: 300px;
height: 200px;
background-color: #ff0000;
padding: 5px;
border: 2px solid #000000;
}
#item
{
width: 100px;
height: 100px;
background-color: #ffff00;
padding: 5px;
margin: 20px;
border: 1px dashed #000000;
}
*[draggable=true] {
-moz-user-select:none;
-khtml-user-drag: element;
cursor: move;
}
*:-khtml-drag {
background-color: rgba(238,238,238, 0.5);
}
/style
然后我们来看javascript:
function listenEvent(eventTarget, eventType, eventHandler) {
if (eventTarget.addEventListener) {
eventTarget.addEventListener(eventType, eventHandler,false);
} else if (eventTarget.attachEvent) {
eventType = "on" + eventType;
eventTarget.attachEvent(eventType, eventHandler);
} else {
eventTarget["on" + eventType] = eventHandler;
}
}
// cancel event
function cancelEvent (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
// cancel propagation
function cancelPropagation (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
window.onload=function() {
var target = document.getElementById("drop");
listenEvent(target,"dragenter",cancelEvent);
listenEvent(target,"dragover", dragOver);
listenEvent(target,"drop",function (evt) {
cancelPropagation(evt);
evt = evt || window.event;
evt.dataTransfer.dropEffect = 'copy';
var id = evt.dataTransfer.getData("Text");
target.appendChild(document.getElementById(id));
});
var item = document.getElementById("item");
item.setAttribute("draggable", "true");
listenEvent(item,"dragstart", function(evt) {
evt = evt || window.event;
evt.dataTransfer.effectAllowed = 'copy';
evt.dataTransfer.setData("Text",item.id);
});
};
function dragOver(evt) {
if (evt.preventDefault) evt.preventDefault();
evt = evt || window.event;
evt.dataTransfer.dropEffect = 'copy';
return false;
}
