**1.传统javascript使用ajax方式：**
XMLHttpRequest对象：所有现代浏览器均支持XMLHttpRequest对象，XMLHttpRequest用于在后台与服务器交换数据。
~~~js
function getInfo()
{
var xmlhttp;
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}else{ // IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var str = xmlhttp.responseText;
alert(str);
}
}
xmlhttp.open("GET","/url",true);
xmlhttp.send();
}
~~~
使用 A JAX 的过程可以类比平常我们访问网页过程
- 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器
var xmlhttp=new XMLHttpRequest();
- 打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址
xmlhttp.open("GET","/url",true);
- 通过连接发送一次请求 —— 相当于回车或者点击访问发送请求
xmlhttp.send();
- 指定 xhr 状态变化事件处理函数 —— 相当于处理网页呈现后的操作
> xmlhttp.onreadystatechange = function () {
> //通过 xmlhttp 的 readyState 判断此次请求的响应是否接收完成
> if (this.readyState === 4) {
> //通过 xmlhttp的 responseText 获取到响应的响应体
> console.log(this)
> }
readyState从 0 到 4 发生变化。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
status为访问状态，404 页面没找到， 500 内部错误， 200访问正常等。
- 1xx -消息: 请求正在处理，请稍后。。。
- 2xx -成功处理
- 3xx -重定向到其他地方: 需要客户端再次发送请求
- 4xx -客户端错误，eg: 非法的资源请求，禁止访问
- 5xx -服务器段错误 ，eg: 服务器抛出异常
在Java中将处理结果的字符串，一般是以JSON字符串返回，存储在前端xmlhttp.responseText中。
<br/>
**2.jQuery写法：**
jquery将上述写法进行了封装，使得我们更加简单和方便的去使用ajax。常见用法：
~~~js
$.ajax(function(){
type: "post",
url : "url",
data: {"name":"Peter"},
success:function(data, status){
//处理
},
error:function(){
//error有三个参数，可以依据情况需要写
}
~~~
<br/>
**3.$.ajax()**
```
window.onload = function(){
$.ajax({
type:"get",
url:"xx",
dataType:"json",
success:function(data){
console.log(data);
},
error:function(xhr){
document.body.innerHTML = xhr.status;
}
})
```
<br/>
**4.$.get()**
```
//$.get()语法
$.get(url,function(data,status){
//获取的data是一个JS对象
}).fail(function(data){
console.log(data.status)
})
```
<br/>
**5.$.post()**
```
//$.post()语法
$.post(url,data,function(data,status){
}).fail(function(data){
console.log(data.status)
})
```
<br/>
**6.应用**
---
~~~html
public class ValidSameServlet extends HttpServlet {
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req, resp);
}
protected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {
//获得 ajax 发送的数据
String name = req.getParameter("username");
if("12345".equals(name{
resp.getWriter().print("yes");
}else{
resp.getWriter().print("no");
}
}
}
<script type="text/javascript">
$(function(){
$("form input").blur(function(){
//离开焦点的 input 是哪个这个 this 就是哪个对象
var obj = $(this);
var val = obj.val();
var reg = obj.attr("reg");
var tip = obj.attr("tip");
var name = obj.attr("name");
var regObj = new RegExp(reg);
if(!regObj.test(val)){
//获得 username 紧挨着的下一个dom的jQuery对象
var spanObj = obj.next();
spanObj.html("<font color='red'>"+tip+"</font>");
}else{
var spanObj = obj.next();
if(name == "username"){
//ajax 的重复性校验
var result = validSame(val);
if(result == "yes"){
spanObj.html("<font color='red'>用户名已经存在</font>");
}else{
spanObj.html("");
}
}else{
spanObj.html("");
}
}
});
/*查询用户名是否重复，no 不重复，yes 重复*/
function validSame(val){
var isSame = "no";
$.ajax({
type:'post',
url:'${path}/validsame',
async:false,
data:{username:val},
dataType:"text",
success:function(result){
isSame = result;
},
error:function(){
alert("系统错误");
}
});
return isSame;
}
$("form input").focus(function(){
$(this).css("background","yellow");
});
//一边输入一边校验。
$("form input").keyup(function(event){
/* var num = window.event?event.keyCode : event.which;var charStr = String.fromCharCode(num); */
var obj = $(this);
var val = obj.val();
var reg = obj.attr("reg");
var tip = obj.attr("tip");
var name = obj.attr("name");
var regObj = new RegExp(reg);
if(!regObj.test(val)){
//获得 username 紧挨着的下一个 dom 的 jQuery 对象
var spanObj = obj.next();
spanObj.html("<font color='red'>"+tip+"</font>");
}else{
var spanObj = obj.next();
if(name == "username"){
//ajax 的重复性校验
var result = validSame(val);
if(result == "yes"){
spanObj.html("<font color='red'>用户名已经存在</font>");
}else{
spanObj.html("");
}
}else{
spanObj.html("");
}
}
});
/* $("#regist").click(function(){
//设置一个提交表单的标志
var isSubmit = true;
$("form input").each(function(){
var obj = $(this);
var val = obj.val();
var reg = obj.attr("reg");
var tip = obj.attr("tip");
var regObj = new RegExp(reg);
if(!regObj.test(val)){
//获得 username 紧挨着的下一个 dom 的 jQuery 对象
var spanObj = obj.next();
spanObj.html("<font color='red'>"+tip+"</font>");
isSubmit =false;
}else{
var spanObj = obj.next();
spanObj.html("");
}
})
if(isSubmit){
//表单提交
$("#myform").submit();
}
}) */
$("#myform").submit(function(){
var isSubmit =true;
$("form input").each(function(){
var obj = $(this);
var val = obj.val();
var reg = obj.attr("reg");
var tip = obj.attr("tip");
var name = obj.attr("name");
var regObj = new RegExp(reg);
if(!regObj.test(val)){
//获得 username 紧挨着的下一个 dom 的 jQuery 对象
var spanObj = obj.next();
spanObj.html("<font color='red'>"+tip+"</font>");
isSubmit =false;
}else{
var spanObj = obj.next();
if(name == "username"){
//ajax 的重复性校验
var result = validSame(val);
if(result == "yes"){
spanObj.html("<font color='red'>用户名已经存在</font>");
isSubmit =false;
}else{
spanObj.html("");
}
}else{
spanObj.html("");
}
}
})
//阻止表单提交，如果是 true 就允许表单提交
return isSubmit;
});
$("#gender").change(function(){
//获得改变后的值
var val = $(this).val();
alert(val)
});
$("body").keydown(function(event){
var num = window.event?event.keyCode : event.which;
if(num == 13){
var isSubmit = true;
$("form input").each(function(){
var obj = $(this);
var val = obj.val();
var reg = obj.attr("reg");
var tip = obj.attr("tip");
var name = obj.attr("name");
var regObj = new RegExp(reg);
if(!regObj.test(val)){
//获得 username 紧挨着的下一个 dom 的 jQuery 对象
var spanObj = obj.next();
spanObj.html("<fontcolor='red'>"+tip+"</font>");
isSubmit =false;
}else{
var spanObj = obj.next();
if(name == "username"){
//ajax 的重复性校验
var result = validSame(val);
if(result == "yes"){
spanObj.html("<font color='red'>用户名已经存在</font>");
isSubmit =false;
}else{
spanObj.html("");
}
}else{
spanObj.html("");
}
}
})
if(isSubmit){
//表单提交
$("#myform").submit();
}
}
});
})
</script>
</head>
<body><form id="myform" action="${path }/jsp2/tab.jsp" method="post">
<p>
用户名：<input id="username" name="username" type="text"reg="^\d{3,5}$"
tip="请输入 3 到 5 位的数字">
<span></span>
</p>
<p>密码：<input name="password" type="password" reg="^\w{6,8}$" tip="请输入 6 到 8位的英文或者数字或_"><span></span>
</p>
<p>地址：<input name="address" type="text" reg="^.{0,50}$" tip="请输入 50 个字符"><span></span></p>
<p>性别：<select id="gender">
<option value="1">男</option>
<option value="2">女</option>
</select><span></span>
</p>
<p><input type="submit" value="注册" id="regist"></p>
</form>
</body>
~~~
