实现Ajax的四种方法

总结实现Ajax的四种方法。

1.js实现

<form autocomplete="off">
    姓名：<input type='text' id='username'>
    <span id='uSpan'></span>
    <br>
    密码：<input type='password' id='password'>
</form>

<scrpit>
    document.getElementById('username').onblur = function(){
		//创建核心对象XMLHttpRequest
		let xmlHttp = new XMLHttpRequest();
		let username = document.getElementById('username').value;
		//打开链接
		xmlHttp.open("GET","http://localhost:8080/ajaxDemo/userServlet??username="+username,true);
		//发送请求
		xmlHttp.send();
		//处理响应
		xmlHttp.onreadystatechange = function(){
			//判断请求和响应是否成功
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
				document.getElementById('uSpan').innerHTML = xmlHttp.responseText;
			}
		}
	}
</script>

• 打开链接：open(method,url,async)
  method：请求类型GET或POST
  url：请求资源的路径
  async：true（异步）或flase（同步）
• 处理响应：onreadystatechange

2.jquery的GET方法实现 $.get()

$('#username').blur(function(){
		let username = $('#username').val();
		$.get(
			//请求的资源路径
			"http://localhost:8080/ajaxDemo/userServlet",
			//请求的参数
			"username="+username,
			//请求成功后调用回调函数
			function(data){
				//将响应的数据写进span标签
				$('#uSpan').html(data);
			},
			"text"
			);
	});

• $.get(url,[data],[callback],[type]);
  -type：返回数据类型，可以是xml、html、js、json、text等类型。

3.jquery的POST方法实现 $.post()

跟get方法没什么区别

$('#username').blur(function(){
		let username = $('#username').val();
		$.post(
			//请求的资源路径
			"http://localhost:8080/ajaxDemo/userServlet",
			//请求的参数
			"username="+username,
			//请求成功后调用回调函数
			function(data){
				//将响应的数据写进span标签
				$('#uSpan').html(data);
			},
			"text"
			);
	});

4.jquery的通用方式实现 $.ajax()

$('#username').blur(function(){
		let username = $('#username').val();
		$.ajax({
			//请求的资源路径
			url:"http://localhost:8080/ajaxDemo/userServlet",
			//是否异步
			async:true;
			//请求参数
			data:"username="+username;
			//请求方式
			type:"POST",
			//数据形式
			dataType:"text",
			//请求成功后调用的回调函数
			success:function(data){
				$('#uSpan').html(data);
			},
			//请求失败后调用的回调函数
			error:function(){
				alert('操作失败...');
			}
		});
	})

• type：get或post，默认是get。