（一）AJAX
（1）简介
- AJAX（Asynchronous Javascript And XML）
- 异步Javascript和XML
- 功能：在不更新页面的情况下，对网页的局部信息进行更新
- 比如：在注册用户时，遇到刚输入完成用户名，就提醒这个用户名已经被占用的情况；或者搜索引擎的提示功能，以及类似的实现
（2）使用步骤
- AJAX在Javascript脚本中使用，一个基本的demo：
//1.创建核心对象
xmlhttp = null;
if(window.XMLHttpRequest){
//firefox chrome
xmlhttp = new XMLHttpRequest();
} else if(window.ActiveXObject){
//ie
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.编写回调函数
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
alert(xmlhttp.responseText);
}
}
//3. 设置请求的方式和请求路径
xmlhttp.open("get","${pageContext.request.contextPath}/ajax1");
//4. 发送请求
xmlhttp.send();
- 创建核心对象
- 根据不同的浏览器创建不同的xmlhttp对象
（3）AJAX-API
- 属性
- onreadystatechange:检测到readyState状态改变的时候调用
- readyState:ajax核心对象的状态
- 0：核心对象创建
- 1：调用了open方法
- 2：调用了send方法
- 3：部分相应已经生成
- 4：相应已经完成
（4）jQuery下的AJAX
参考:http://www.runoob.com/jquery/jquery-ref-ajax.html
- jQuery AJAX方法
- $.get(url,params,function(){}) 使用AJAX的HTTP GET从服务器加载数据
- $.post(url,params,function(){}) 使用AJAX的HTTP POST从服务器加载数据
- $.ajax({name:value, name:value, … }) 用于执行AJAX方法
（二）AJAX检查用户名占用
- 需求：注册时用户在文本框上输入内容，失去焦点之后发送AJAX请求到后台
- 将查询的结果发回前台，如果用户名存在则不能提交表单
- 1.直接使用AJAX实现
- 2.使用JQuery下的AJAX方法实现
- jQuery实现：
<!--失去焦点之后检测用户名是否被占用-->
<script type="text/javascript">
$(function(){
$("input[name='username']").blur(function(){
//获取输入的值
var $username = $(this).val();
//alert($username);
$.get("/BasicDemo14/checkUsername4Ajax",{"username":$username},function(d){
//alert(d);
if(d == 1){
document.getElementById("username_msg").innerHTML="<font color='green'>用户名可以使用</font>";
} else if(d == 0){ //不能用
document.getElementById("username_msg").innerHTML="<font color='red'>用户名不能使用</font>";
document.getElementById("submitId").disabled = true;
}
});
});
});
</script>
（三）模拟搜索引擎
- 使用搜索引擎的时候输入内容时，按键弹起时，显示提示内容
- 使用jQuery下的AJAX实现
- 使用keyup函数
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
//文本框keyup时发送AJAX
$(function(){
$("#tid").keyup(function(){
//alert("!!!");
var $value = $(this).val(); //获取#tid文本框的值
if($value != null && $value.length != 0){
//每次清空div
$("#did").html("");
$.post("/BasicDemo14/searchKw","kw="+$value,function(d){ //这里向Servlet提交参数
var arr = d.split(",");
$(arr).each(function(){
//alert(this);
$("#did").append($("<div>" + this + "</div>"));
});
$("#did").show();
});
} else{
$("#did").hide();
}
});
});
</script>