ajax 异步请求

1.存在的一些问题？

• 注册的时候，很多时候需要校验用户名是否重复，如果重复则不让注册。我们之前的做法是提交表单之后再到后台查询，验证。
• 每次只想更新页面上部分内容，确要刷新整个页面。

2.什么是ajax
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

3.应用的场景

• 百度的搜索提示
• 表单的验证
• 刷新页面局部内容
  。。。

4.如果使用
　　4.1 js原生的写法
原生js 写ajax请求，主要依赖XMLHttpRequest 对象。
整个请求过程如下：
1） 创建XMLHttpRequest对象

//定义一个变量，初始值设为null
var xmlHttpRequest=null;
// 如果为IE6 及更低版本IE浏览器时
if(window.ActiveXObject){
    //实例化ActiveXObject对象并赋值给xmlHttpRequest
    xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
//IE6以上版本及其他浏览器
else if(window.XMLHttpRequest){
  //实例化XMLHttpRequest对象
  xmlHttpRequest=new XMLHttpRequest();
}

2） 调用XMLHttpRequest对象的open方法设置请求信息。

格式：open(method,url,async)

• method:为请求方式，可以为get和post
• url：请求地址（get请求时，传输的数据加载url后面。）
• async:是否异步请求，true为异步 ，false 为同步

if(xmlHttpRequest!=null){
    //get 方式
    xmlHttpRequest.open("get","/checkName?username=xxx&password=xxx",true);
   //post方式
   // xmlHttpRequest.open("post","/checkName",true);
}

3）调用XMLHttpRequest对象的send 方法发送请求

格式：send(dataString)

• dataString: post请求数据。为get请求时不需要传（通过URL传输）。

//get 请求方式
xmlHttpRequest.send();
//post 请求方式
//设置为post表单数据 后台可通过request.getParameter();取到值
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//此行必须有
xmlHttpRequest.send("username=xxx&&password=xxx");
//如果想要提交json格式数据，则如下设置。且后台取数据不能直接通过request.getParameter()取到，
//需要request.getInputStream（）从流中读取。
 //设置请求头 请求数据类型为json
//xmlHttpRequest.setRequestHeader("content-type","application/json");//设置为json格式数据
//xmlHttpRequest.send("{'username':'xxx','password':'xxx'}");//发送请求post 传递参数

4）请求发送之后，需设定回调函数，用以接受返回数据，处理异常。
回调函数：onreadystatechange：当请求状态发生改变时，则会调用此方法。
readyState：xmlHttpRequest请求状态属性，有0-4五个值,分别意思为：

• 0：请求未初始化
• 1：服务器连接已建立
• 2：请求已接受
• 3：请求处理中
• 4：请求已完成

status:http请求状态码

• 200 ：请求完成
• 404 ：请求地址错误
• 500 ：服务器程序异常
  ....
  responseText：请求返回数据。

xmlHttpReq.onreadystatechange=function(){
                //4代表执行完成,且请求状态码为200 则正确 
                if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {
                    //获取请求返回数据
                    var result=xmlHttpReq.responseText;
                    console.log("result"+result);
                }
            }

至此，js的ajax写法就介绍的差不多啦。完整代码如下：

function ajaxJS(){
        var xmlHttpReq=null;
        var username=$("#username").val();
        if(window.ActiveXObject){//如果是IE 6及以下版本IE浏览器
            xmlHttpReq=new ActiveXObject("Microsoft.XMLHTTP");//实例化ActiveXObject 对象
        }else if(window.XMLHttpRequest){
            xmlHttpReq=new XMLHttpRequest();//实例化XMLHttpRequest对象
        }
        //如果实例化成功，就调用open方法设置请求的数据
        if(xmlHttpReq!=null){
            xmlHttpReq.open(
                "post",//请求方法 get or post
                //请求地址get 方式
             "<%=request.getContextPath()%>/checkName?username="+username,
              //请求地址 post方式
              //  "<%=request.getContextPath()%>/checkName",
                true //是否异步 true 为异步， false 为同步
            );
//            xmlHttpReq.send();//发送请求 get 不传递参数
        
//            //设置请求头 请求数据类型为json
            xmlHttpReq.setRequestHeader("content-type","application/json");//设置为json格式数据
            xmlHttpReq.send("{'username':'xxx','password':'xxx'}");//发送请求post 传递参数

            //设置为post表单数据
            xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xmlHttpReq.send("username="+username+"&password=123456");
            // onreadystatechange 回调函数
            //当请求状态改变时会调用该方法。
            //readyState :0:请求未初始化  1 服务器连接已建立 2 请求已接受 3 请求处理中 4 请求已完成
            // satatus 200 成功 404 路径错误 。。。
            xmlHttpReq.onreadystatechange=function(){
                console.log(xmlHttpReq.readyState);
                if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {//4代表执行完成
                    var result=xmlHttpReq.responseText;
                  //后续代码处理  。。。。。
                }
            }
        }

    }

4.2 jquery ajax写法
通过上面的介绍可以看出，用js写ajax还是特别繁琐的。而jquery给我们提供了更为简单的方式。一般开发使用jquery居多。

• $.ajax() 。jquery ajax 请求最原始的写法。（个人比较喜欢。直观）

$.ajax(
    type:"请求方式",//get or post 
    url:"请求地址"，
    data:{},//请求数据，一般为json格式
    async:true/false,//是否异步，默认为true
    success:function(data){
                   },//成功回调函数
    error:function(){
            }//失败回调函数
);

• $.post()
  post.png

$.post("<%=request.getContextPath()%>/checkUser",{username:xxx},function(data){
    //取到数据并做业务处理  
    if("1"==data){
        alert("用户名已存在");
    }
})

• $.get()

get.png

$.get("<%=request.getContextPath()%>/checkUser",{username:xxxx},function(data){
    //取到数据并做业务处理  
    if("1"==data){
        alert("用户名已存在");
    }
});