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

html-css015

在html5中,多线程worker和异步ajax有什么区别,第1张

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

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

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

//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还是会自动提交