包含html5与ajax的词条

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

如何用html5自带验证但是用ajax提交

//H5自带的验证是比较简单的验证，不完美，只适合比较简单的验证。具体使用方法如下：

//需求：用户名：不能为空，长度在6至12之间，内容为英文

//HTML

input type="text" id="user" required minlength=6 maxlength=12 pattern="^[a-zA-Z]+$"

//js

var user = document.getElementById("user");

user.onblur = function(){

if(user.validity.valueMissing){

user.setCustomValidity("用户名为空.");

}else if(user.validity.tooShort){

user.setCustomValidity("用户名过短.");

}else if(user.validity.tooLong){

user.setCustomValidity("用户名过长.");

}else if(user.validity.patternMismatch){

user.setCustomValidity("用户名输入错误.");

}

//required属性：验证是否为空

//pattern属性：匹配正则

//validity属性：是H5底层的逻辑提供，原本已经存在的。元素通过elem.validity获得validityState对象

//例如可以获得的对象有：valueMissing 验证是否为空返回true或false

//再例如：patternMismatch 验证是否匹配正则同样返回 true或false

怎么使用ajax提交？

你可以将我上面的代码封装成一个check方法，用来检查表单内容是否正确，在用户点击提交按钮的时候不是直接submit表单，而是触发一个表单提交前验证方法check，验证通过后，将表单中的元素获取到，保存在一个变量中下面以jquery的ajax为例：

var jsonData={'userName':user.value}

$.ajax({

url:'接口地址'，

type：'post',

dataType:'json',

data:jsonData,

success:function(data){

//发送成功后的回调，data包含成功时后台返回的数据

error:function(res){

//发送失败时的回调，res包含失败时的后台返回的数据

}

})

//特别要注意一点的是如果要用ajax发送数据，就不要将提交按钮的type设置为submit，否则form还是会自动提交

当使用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 则不会，这会为开发带来一些麻烦，但下面会给出解决方案。

在html5中，多线程worker和异步ajax有什么区别

多线程是属于并发范畴,而异步是数据请求方式的范畴,与同步相对。从具体使用场景来说，耗CPU的任务可以移到worker中处理，ajax主要是IO费时间，为了保证不让代码阻塞，所以异步处理，等数据到达时再通知程序。这是在html5中的变通方法，因为ajax是比较早实现的，而worker是比较新的一个概念，可以说worker的功能是覆盖ajax的，只是由于HTML的不断发展自然出现了这样的问题。

在其它语言中，一般费时任务都放在其它线程中，以避免阻塞主线程。而不管它是费CPU还是费IO。

总之，这都是HTML的错。你大可以把网络请求也放在worker中处理，但不幸的是，支持worker的浏览器并不多。

HTML5相对于以前的web技术AJAX，最大的改变或不同是什么？

web前端开发：主要是通过html/css，js，ajax，DOM等前端技术，实现网站在客服端的正确显示及交互功能。可分为：网页重构，js功能开发。随着HTML5的到来，RIA时代正在开启，web前端的应用功能将会更加灵活。最大的好处就是可实现客服端的更加友好的用户体验而不会对服务器带来过重的负担。

而web开发，个人觉得未免说得太宽范了点，一般主要指后台的程序开发方面，会用到PHP或ASP，mysql或mssql，ajax等，主要是服务器端的脚本语言及数据库技术，这也是网站保证正常动作，技术方面最核心的部分。