分别使用原生Ajax 和Jquery的方式实现数据请求

分别使用原生Ajax 和Jquery的方式实现数据请求

Ajax

• 是什么?

“Asynchronous Javascript And XML”（异步JavaScript和XML），

并不是新的技术，只是把原有的技术，整合到一起而已。

       1.使用CSS和XHTML来表示。
       2. 使用DOM模型来交互和动态显示。
       3.使用XMLHttpRequest来和服务器进行异步通信。
       4.使用javascript来绑定和调用。

• 有什么用?

咱们的网页如果想要刷新局部内容。 那么需要重新载入整个网页。用户体验不是很好。 就是为了解决局部刷新的问题。 保持其他部分不动，只刷新某些地方。

内部原理

诚如前面所说的， Ajax 并不是一项新技术。而是包装了现有的技术，然后使用他们来完成工作而已。

那么现在给大家举个例子， 还是以咱们的判断用户名是否已被注册为例。

传统方式：

1. 输入用户名，
2. 点击一个按钮，校验。
3. 把数据提交给服务器
4. 服务器在后台帮助我们完成校验，并且反馈信息。
5. 我们在浏览器上提示用户，给出结果

Ajax方式：

ajax方式与前面的方式其实从要做的事情来说，是一样的。 ajax也没有牛到，不用去访问服务器就知道你的用户名是否已被占用。那么它是如何工作的呢?

1.  通过JS 获取咱们的输入框文本内容 document.getElementById("username").value

2. 通过XmlHttpRequest 去执行请求。 XmlHttpRequest 其实就是 XML + http + Request 的组合。

3. 请求结束后，收到结果， 再使用 js 去完成提示。 

4. 可以在顺便配合 css 样式来增加提示效果。

Ajax 的请求/响应

与服务器上的 Web 应用程序打交道的是 JavaScript 技术，而不是直接提交给那个应用程序的 HTML 表单。
发出请求
如何使用XMLHttpRequest 对象?
首先–需要一个能够调用JavaScript 方法 的Web 页面 。
接下来就是在所有 Ajax 应用程序中基本都雷同的流程：

1、从 Web 表单中获取需要的数据。
2、建立要连接的 URL。
3、打开到服务器的连接。
4、设置服务器在完成后要运行的函数。
5、发送请求。

数据请求 Get

//创建对象
function  ajaxFunction(){
    var xmlHttp;
    try{ // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
        }
        catch (e){
        try{// Internet Explorer
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e){
            try{
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e){}
                }
           }
    return xmlHttp;
    }

    //2.发送请求
    //执行get请求
    function get() {

        //1. 创建xmlhttprequest 对象
    var request = ajaxFunction();

    //2. 发送请求。
    // http://localhost:8080/day16/demo01.jsp
    //http://localhost:8080/day16/DemoServlet01

    /*  
        参数一： 请求类型  GET or  POST
        参数二： 请求的路径
        参数三： 是否异步， true  or false
    */
    request.open("GET" ,"/day16/DemoServlet01" ,true );
    request.send();
}


如果发送请求的同时，还想获取数据，那么代码如下

//执行get请求
function get() {

    //1. 创建xmlhttprequest 对象
    var request = ajaxFunction();

    //2. 发送请求
    request.open("GET" ,"/day16/DemoServlet01?name=aa&age=18" ,true );

    //3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法
    request.onreadystatechange = function(){

        //前半段表示 已经能够正常处理。  再判断状态码是否是200，已经处理请求
        if(request.readyState == 4 && request.status == 200){
            //弹出响应的信息
            alert(request.responseText);
        }
    }
    request.send();
}

数据请求 Post

<script type="text/javascript">
//1. 创建对象
function  ajaxFunction(){
   var xmlHttp;
   try{ // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e){
       try{// Internet Explorer
             xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
          }
        catch (e){
          try{
             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          catch (e){}
          }
    }

    return xmlHttp;
 }

function post() {
    //1. 创建对象
    var request = ajaxFunction();

    //2. 发送请求
    request.open( "POST", "/day16/DemoServlet01", true );

    //如果不带数据，写这行就可以了
    //request.send();

    //如果想带数据，就写下面的两行

    //如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

    //带数据过去  ， 在send方法里面写表单数据。 
    request.send("name=aobama&age=19");
}
</script>


//需要获取数据
function post() {
    //1. 创建对象
    var request = ajaxFunction();
    //2. 发送请求
    request.open( "POST", "/day16/DemoServlet01", true );

    //想获取服务器传送过来的数据， 加一个状态的监听。 
    request.onreadystatechange=function(){
        if(request.readyState==4 && request.status == 200){

            alert("post："+request.responseText);
        }
    }

    //如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //带数据过去  ， 在send方法里面写表单数据。 
        request.send("name=aobama&age=19");
    }

JQuery的方式实现请求与相应

load

<a href="" onclick="load()">使用JQuery执行load方法</a>

有两次刷新，  先走 onClick的方法，取到数据回来之后，赋值显示。 接着 走 href=""的路径，但是这个属性没有给值，所以会把当前的页面重新再刷新一次。所以导致看不见值。

//找到这个元素， 去执行加载的动作， 加载/day16/DemoServlet02 ， 得到的数据，赋值显示
$("#aaa").load("/day16/DemoServlet02" , function(responseText , statusTXT  , xhr) {
        //找到id为text01的元素， 设置它的value属性值为 responseText 对应的值
        $("#aaa").val(responseText);
    }); 

Get

$.get("/day16/DemoServlet02"  , function(data ,status) {
        $("#div01").text(data);
    });

赋值显示

• val(“aa”);

只能放那些标签带有value属性

• html(“aa”); —写html代码
• text(“aa”);

其实没有什么区别，如果想针对这分数据做html样式处理，那么只能用html()

post

function post() {
        $.post("/day16/DemoServlet02", {name:"zhangsan",age:18},function(data,status) {
            //想要放数据到div里面去。 --- 找到div
            $("#div01").html(data);
        });
    }

load & get&post比较

• load

  $(“#元素id”).load(url地址);

  $("#div1").load(serlvet); ---> 使用的get请求，回来赋值的时候， 使用text（）;去赋值

• get

  语法格式 ： $.get(URL,callback);

    使用案例： $.get("/day16/DemoServlet02"  , function(data ,status) {
        $("#div01").text(data);
    });

• post

  语法格式：$.post(URL,data,callback);

    function post() {
        $.post("/day16/DemoServlet02", {name:"zhangsan",age:18},function(data,status) {
            //想要放数据到div里面去。 --- 找到div
            $("#div01").html(data);
        });
    }

使用JQuery去实现校验用户名

    function checkUserName() {
        //1. 获取输入框的内容
        var name = $("#name").val();

        //2. 发送请求
        $.post("/day16/CheckUserNameServlet" , {name:name} , function(data , status){
            //alert(data);
            if(data == 1){//用户名存在
                //alert("用户名存在");
                $("#span01").html("<font color='red'>用户名已被注册</font>");
            }else{
                //alert("用户名可用");
                $("#span01").html("<font color='green'>用户名可以使用</font>");
            }
        } );
        //3. 输出响应的数据到页面上。
    }