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");
				}			
			}
		});
	}

验证用户名：jquery与ajax