交互那些事(一)

交互一直以来都是前端的重中之重,前端的职能在我看来有一大部分就是向后台调取数据并且将数据展示在前台页面,交互可以说是前端er的基本功,必须可以保证在不出错的前提下越来越快,而如何向后台调取数据呢,首先必须先说说ajax

记得刚刚学习ajax的时候每天还在攻克各种各样难缠的效果,那个时候就想着的是写出越来越炫的效果,但当你真的学过ajax之后就发现交互的魅力远远大于效果

---

现在网上大多的页面基本上都是动态的,公司每天只是需要通过后台管理系统更新信息而前端页面就会跟着改变,而这一切都得益于ajax的出现,言归正传就让大家和我一起领略一下ajax

---

1.ajax的核心是XMLHttpRequest对象,大家都知道js其实就是对象的语言,在对象中调用来调用去,而在这个xhr对象上也绑定的各种各样的方法供人们调用

首先我给大家介绍几个常用的其余的大家自己拓展

        a.xhr.open(type,url,asyn)这是ajax开始的第二步,type为get或post,url是你所请求的后台地址,asyn是是否为异步,异步为true,不建议使用false不过现在好像已经不能用了

同步和异步的区别:就像去饭店吃饭,同步就是一个一个排队,只有一个服务员,而异步就是一起来,有多个服务员,放在我们当前环境下就是,同步就是我请求时页面不可以进行其他操作,就像form表单,而异步就可以在无刷新情况下进行请求并且进行DOM操作

---

    b.xhr.send(),在get方式中,open的url会进行传参,而post方式中会对发送的数据进行处理,如果传送的是字符串,则发送时需要加xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");然后在通过send传参向后台传送数据

    c.接收 首先需要明白的是ajax是需要响应的,只有当xhr的状态码和服务器状态码都成功是才可以接收成功,推荐两个函数

        (1)xhr.onreadystatechange

        (2)xhr.onload

二者作用一样,但用第一个更为严谨

以下是我自己封装的ajax

---

这只是ajax,前端交互的方式有许多种,欲知后事如何,且听下回分解!