局部刷新Ajax

　　1.1.1  Ajax的由来:

　　如下注册界面

　　

　　 界面在注册的时候,需要用户输入的信息有很多,假如我们将所有的数据都录入后,在点击会员注册按钮,然后将整个页面数据进行提交,此时如果该用户名已经被占用,那么我们就需要用户重新进行输入,这时候就会造成极差的用户体验,此时应该有一个正确的需求:

• 　　输入完用户名后,直接在用户名后边完成是否重复,是否可用的验证
•        在验证用户名是否可用的同时,又不能影响我后续数据的输入

　　此时,可以想象到,传统的servlet已经无法解决我们的需求,需要一个新的技术来解决这个问题-------AJAX.

　　也就是说从此处,我们可以基本总结出一些

　　1.2.1  ajax的基本特点:

1. 1. 1. 　局部刷新,不用刷新整个页面,所以数据量小,
      2. 异步请求

　　　　　　此时,再加上一点就是,自动发送请求,同样是使用HTTP协议进行数据传输

　　1.3.1 企业为什么特别喜欢ajax？

　　　　数据量小，请求和响应速度快，用户体验好

　　　　钱。企业的通信费用，是按照流量计算，那么数据量越小，越省钱。

　　

　　AJAX的运行原理图:

　　

　　

　　1.3.1  快速入门

　　　　API文档：参W3CSCHOOL

　　　　

　　　　

　　　　获取XMLHttpRequest对象（ajax核心对象，ajax引擎）

　　　　 代码演示:

　　　　　　<script type="text/javascript">

　　　　　　　　//获取ajax核心对象的方法

　　　　　　　　function getXHR() {

　　　　　　　　　　var xmlhttp;

　　　　　　　　　　if (window.XMLHttpRequest) {

　　　　　　　　　　　　// code for IE7+, Firefox, Chrome, Opera, Safari

　　　　　　　　　　　　xmlhttp = new XMLHttpRequest();

　　　　　　　　　　} else {

　　　　　　　　　　　　// code for IE6, IE5

　　　　　　　　　　　　xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

　　　　　　　　　　}

　　　　　　　　　　return xmlhttp;

　　　　　　　　}

　　　　　　　　alert(getXHR());

　　　　　　</script>

　　　　向服务器发送请求——使用open方法和send方法

　　　　　　发送请求代码测试：

　　　　　　//测试使用ajax核心对象，发送请求

　　　　　　function test1(){

　　　　　　　　var xhr = getXHR();

　　　　　　　　xhr.open("get","/day18/ajax?username=张三",true);

　　　　　　　　xhr.send();

　　　　　　}

　　　　　　test1();

　　

　　获取响应

　　　　　　//测试设置ajax等待服务器响应

　　　　　　function test3(){

　　　　　　　　//获取核心对象

　　　　　　　　var xhr = getXHR();

　　　　　　　　//设置等待服务器响应

　　　　　　　　xhr.onreadystatechange=function(){

　　　　　　　　//4: 请求已完成，且响应已就绪,200: "OK"

　　　　　　　　if (xhr.readyState==4 && xhr.status==200){

　　　　　　　　　　 var data=xhr.responseText;

　　　　　　　　　　  alert(data);

　　　　　　　　 }

　　　　　　  }

　　　　　　//发送请求

　　　　　　xhr.open("get","/day18/ajax?username=张三",true);

　　　　　　xhr.send();

　　　　　}

　　　　　　test3();