ajax
1.定义
1.ajax不是新的技术,是javascript,xml,XMLHttpRequest(xhr)的结合体,完成异步提交功能.
2.同步提交:用户提交数据后,当前页面不可以操作;页面响应成功,才可以操作页面.
3.异步提交:用户提交数据后,还可以在当前页面上操作;和服务器响应是否成功,没有太大影响.
4.特点:从服务器端获取一小部分数据.
2.原理
用户请求交给xhr处理,然后xhr把请求提交给服务器,服务器响应数据给xhr,由xhr把数据接收回来,通过javascript设置数据到页面
3.xhr的创建和函数属性
1.创建xhr对象
function getXHR(){
//1.定义变量
var xhr;
//2.判断
if(window.XMLHttpRequest){
//现阶段所有的浏览器都支持的对象
xhr = new XMLHttpRequest();
}else{
//兼容IE5 IE6
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
2.open()打开连接
open("get/post","url",true);
3.send();发送请求
4.onreadystatechange:从创建xhr到响应数据成功,监听5中状态变化
5.readyState:获取状态
0.未初始化
1.初始化成功,发送请求
2.接收数据
3.解析数据
4.响应成功
6.status:获取响应状态码:200 404 405 500
7.responseText:接收服务器 响应的数据
使用ajax-异步验证用户名
<form action="" >
用户姓名:<input type="text"
name="name" id="name"
onblur="checkNameFun()"/>
用户密码:<input type="password" name="pwd" id="pwd"/>
<input type="submit" value="注册"/>
</form>
</body>
<script type="text/javascript">
//返回xhr对象
function getXHR(){
//1.定义变量
var xhr;
//2.判断
if(window.XMLHttpRequest){
//现阶段所有的浏览器都支持的对象
xhr = new XMLHttpRequest();
}else{
//兼容IE5 IE6
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
//name文本框失去焦点事件处理函数
function checkNameFun(){
//1.创建xhr对象
var xhr = getXHR();
//2.监听事件,处理事件
xhr.onreadystatechange=function(){
//判断状态是第五种,并且响应的状态码是200
if(xhr.readyState==4&&xhr.status==200){
alert(xhr.responseText);
}
};
//3.打开连接
var nameValue = document.getElementById("name").value;
xhr.open("get","${pageContext.request.contextPath}/user/checkName.do?name="+nameValue,true);
//4.发送请求
xhr.send();
}
</script>
//把json字符串转换成json对象
var obj = JSON.parse(strValue);
JQuery:
//使用jquery验证用户名是否存在
function checkNameFun(){
$.ajax({
//请求的url映射
url:"../user/checkName.do",
//传递到控制器的值
data:"name="+$("#name").val(),
//请求方式
type:"post",
//服务器响应数据的格式
dataType:"json",
//处理200状态码的响应
success:function(obj){
//alert(obj.state+","+obj.message);
$("#namespan").html(obj.message);
if(obj.state==0){
$("#namespan").css("color","red");
}else{
$("#namespan").css("color","green");
}
}
});
}