关于ajax,我曾经学过,那个时候只是纯粹的学,像学javascript一样,今天又看了一次黑马老师的视频很不错。
ajax的主要在,客户端和服务端进行响应的时候起到不刷新界面的作业,这个主要归功于XMLHttpRequest这个对象的open,send方法。
ajax是Asynchronous javascript and xml 叫做异步js和xml。
举个简单的用到ajax的例子。
用户进行注册信息时候,里面要填账号,账号这个可是唯一的哦,不可能同一个账号可以搞2个密码登录对吧;注册信息的填写也是相当多的,有账号,密码,邮箱,手机号等等,填写的内容一般都是form表单提交的,在通过action传给servlet进行与后台校验,这样就不可避免的页面进行跳转,一旦一名url改变或者再次刷新,里面的数据就没有,所以为了好的用户体验就学要ajax技术了。
ajax的流程:用户填写注册信息---点击触发事件----调用javascript函数-----通过XMLHttpResponse这个对象进行与后台交互,从而不会使页面跳转。
用户注册信息:- <form action="">
- 用户名:<input type="text" name="username" id="name" /> <br />
- 密码:<input type="password" name="password" />
- <input type="button" value="提交" onclick="chackName()"/>
- </form>
复制代码 javascript代码:- <script type="text/javascript">
- var xmlHttp;
- function init(){
- if (window.XMLHttpRequest) {
- return new XMLHttpRequest();
- } else {
- return new ActiveXObject("Microsoft.XMLHTTP");
- }
- }
- function chackName() {
- //1.生成XMLHttpRequest对象
- xmlHttp = init();
- //4.调用onreadystatechange 使用回调函数
- /*
- readyState属性表示AJAX当前的状态有:
- 0表示未初始化,还没有调用open函数
- 1表示正在加载。open方法已被调用
- 2表示已加载完毕。send已被调用
- 3.表示交互中。服务器正在响应
- 4完成。
- 每次的状态值改变都会触发回调函数
- */
- xmlHttp.onreadystatechange = callback;
- //2.与服务器进行连接
- var name = document.getElementById("name").value;
- // alert(name);
- var url = "servlet/chackname?username=" + name;
- xmlHttp.open("GET",url, true);
- //3.发送数据
- //若用的是get方法,则传递null,若要想send中传递数据,则必须是post方法
- xmlHttp.send(null);
- }
- function callback() {
- if(xmlHttp.readyState == 4) {
- if(xmlHttp.status == 200) {
- var data = xmlHttp.responseText;
- alert("data =" + data);
- }
- }
- }
- </script>
复制代码 一旦能进入servlet就好办了,所以要做好web开发,数据库一定要学习好。。。。。。。。。。。。。。。。。。
如果是pose请求想服务器发送数据,需要设置:xmlHttp.setResquestHeader("Content-Type", "application/x-www-form-unencoded");必须放在open方法后面,才符合url编码格式。
另外一个有用的设置
<div id="div"></div>
通过document.getElementById("div").innerHTML = "ss";
可以显示<div id="div">ss</div>
|