Ajax学习笔记

                                                                       Ajax学习笔记

一:Ajax简单的介绍

            1.1Ajax的定义:

容许浏览器和服务器通信而不需要刷新整个页面的技术都叫Ajax技术.AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

1.11:Ajax简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。

AJAX不是服务端语言,是JS的一部分的方法.

1.12:Ajax出现的意义能帮我们做什么?

答:在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。可以有效的减少服务端的压力，针对的数据只是一部分而不是全部.

1.2:Ajax的最重要的对象:

XmlHttpRequest.一切的一切都是基于这个对象展开的,成功的创建了这个对象后,就算是拿到了通过Ajax宫殿的钥匙.

1.21:创建给对象的方式:原因是目前的浏览器的支持程度了.主要是针对比较老一点 的浏览器的兼容问题

来看一个创建实例:

varxmlhttp;

if(window.XMLHttpRequest){  

// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码  

xmlhttp=newXMLHttpRequest();}

else{  

// IE6, IE5 浏览器执行代码  

xmlhttp=newActiveXObject("Microsoft.XMLHTTP");

}

1.22:Ajax的同步和异步的简单介绍:

同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待 卡死状态.

异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随 意做其他事情，不会被卡死.

社会节奏这木快,当然不容许我们去等待了,还有许多精彩的事情等着我们去做呐.这异步还是更受欢迎的.

1.3:Ajax的运行原理:

页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到 服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回 给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面1 功能.

1.31：Ajax的两种提交方式：

一种是POST,一种GET的请求方式.

1.4:Ajax的各个参数介绍：

这是一个Jquary的方式：

$.ajax({

url: ,

async: ,

type: ,

data: ,

success function(data){

},

error function(){

},

dataType:

});

常用的option有如下：

async：是否异步，默认是true代表异步

data：发送到服务器的参数，建议使用json格式

dataType：服务器端返回的数据类型，常用text和json

success：成功响应执行的函数，对应的类型是function类型

type：请求方式，POST/GET

url：请求服务器端地址；

Ajax的开发案例--注册用户的异步校验用户名和手机号是否被占用

前端的代码:

/*DOM页面加载完毕后触发事件*/
      $(function(){
     /*用户注册数据的合法校验,不合法就不提交*/
          /*为输入框绑定事件,做用户的手机号校验,界面友好*/  
     var flag1=false;
     var flag2=false;
     var flag3=false;
     var flag4=false;
     $("#phone").blur(function(){
     //1.1:获得失去的焦点,获得输入框的内容
     var PhoneMessage=$("#phone").val();
         //1.12:做数据合法的校验
 if($.trim(PhoneMessage)==""){
 $("#phoneMess")
                  .html("<img src='img1/icon7.jpg'/><font color='red'>手机号码不能为空,长度为11位,首位必须为1!</font>");
                  flag1=false;
 }
 if($.trim(PhoneMessage).length < 11){
         $("#phoneMess")
                  .html("<img src='img1/icon7.jpg'/><font color='red'>大陆手机号码长度必须是11位!</font>");
                  flag1=false;
         }
 if($.trim(PhoneMessage).length > 11){
         $("#phoneMess")
                  .html("<img src='img1/icon7.jpg'/><font color='red'>大陆手机号码长度必须是11位!</font>");
                  flag1=false;
         }
         //1.3:通过校验,可以是提交
 if($.trim(PhoneMessage).length ==11){
 //进行Ajax异步校验的用户名是否合理
 var url="CheckPhone";
 alert(PhoneMessage);
 $.post(
  url,
 {"telephone":PhoneMessage},      
function(data){
 //3:根据phoneisExit返回值动态的显示信息
var phoneisExit=data.phoneisExit;
   if(phoneisExit){
    $("#phoneMess").html("<img src='img1/icon7.jpg'/><font color='red'>手机号码格式,但已被占用,不能使用!</font>");
    flag1=false;
   }
   else{
    $("#phoneMess").html("<img src='img1/icon3.jpg'/><font color='green'>手机号码格式,未被占用,可以使用!</font>");
    flag1=true;
   }
},"json"
 );
 }
     });
    //2:校验用户名,这里使用正则表达式校验
     $("#name").blur(function(){
    //2.1获取用户名的输入框的内容
     var UserMessage=$("#name").val();
    //2.2定义校验的正则表达式
     var nameRegex=/^[^@#]{3,16}$/; 
    //2.3正则校验
     if(!nameRegex.test(UserMessage)){
    $("#nameMess").html("<img src='img1/icon7.jpg'/><font color='red'>用户名为3~16个字符,且不能包含”@”和”#”字符!</font>"); 
    flag2=false;
     }
     if(nameRegex.test(UserMessage)){
     //2.4正则校验的合理后,使用Ajax异步校验用户名保证逻辑的合理性
     url="CheckUser";
    $.post(
     url,
     {"username":$("#name").val()},
     function(data){
     //2.5根据usernameisExit返回值动态的显示信息  
     var userisExit=data.userisExit;
        if(userisExit){
        $("#nameMess").html("<img src='img1/icon7.jpg'/><font color='red'>用户名格式正确,但已被占用,不能使用!</font>");
        flag2=false;
        }
        else{
        $("#nameMess").html("<img src='img1/icon3.jpg'/><font color='green'>用户名格式正确,未被占用,可以使用!</font>");
        flag2=true;
        }
     },"json"
    );     
     }
     });

后端的代码:

Dao层:

//校验的Dao层接口
public interface CheckDao {
    //1:校验用户的手机号码的有用性的方法
public Long checkPhone(String telephone);
//2:校验用户的用户名称的有用性的方法
public Long checkUser(String username);
}

使用MyBatis框架的Check.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "../mybatis.org//DTD Mapper 3.0//EN" 
 "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.lx.SSM.dao.CheckDao">
    <!-- 校验手机号码的SQL -->
    <select id="checkPhone" parameterType="com.lx.SSM.model.User" resultType="java.lang.Long">
        select count(*) from users where telephone=#{telephone};
    </select>
    <!-- 校验用户名称的SQL -->
    <select id="checkUser" parameterType="com.lx.SSM.model.User" resultType="java.lang.Long" >
        select count(*) from users where username=#{username};
    </select>    
</mapper> 

service层:

//校验的接口
public interface CheckService {
//1:校验用户的手机号码的有用性的方法
public boolean checkPhone(String telephone);
//2:校验用户的用户名称的有用性的方法
public boolean checkUser(String username);
}

service.impl

@Service
public class CheckServiceImpl implements CheckService  {
    //注入Dao层的对象
@Autowired
private CheckDao checkDao;
@Override
public boolean checkPhone(String telephone) {
Long  phoneisExit=checkDao.checkPhone(telephone);
return phoneisExit>0?true:false;
}
@Override
public boolean checkUser(String username) {
Long userisExit=checkDao.checkUser(username);
return userisExit>0?true:false;
}
}

controller层

@Controller
public class CheckController {
    //注入CheckService层的对象
@Autowired
private CheckService checkService;
//SpringMVC处理AJAX请求,不需要返回页面的,所以方法的签名使用void
@RequestMapping(value="/CheckPhone",method=RequestMethod.POST)
public void checkPhone(HttpServletRequest request,HttpServletResponse response) throws IOException{
//1:获取表单的输入内容
String telephone=request.getParameter("telephone");
    //2:调用Service中的方法
boolean phoneisExit=false;
phoneisExit=checkService.checkPhone(telephone);
//3:返回的JSON格式的数据
response.getWriter().write("{\"phoneisExit\":"+phoneisExit+"}");
}
//4:校验用户名单
@RequestMapping(value="/CheckUser",method=RequestMethod.POST)
public void checkUser(HttpServletRequest request,HttpServletResponse response) throws IOException{
//5:获取表单的输入内容
String username=request.getParameter("username");
//6:调用Service中的方法
   boolean userisExit=false;
   userisExit=checkService.checkUser(username);
//7:返回JSON数据的
   response.getWriter().write("{\"userisExit\":"+userisExit+"}");

这样一个案例就做完了

2:简单的归纳

SpringMVC结合Ajax时那个异步校验的url的写法

url=""这个和a标签的href中的写法是一样的不用加绝对的路径，加了反而请求无法发送的.

还有许多的没有完善的地方,在后边会不断的添加修改,望路过的大佬给点建议哈。