ajax异步

AJAX---ASynchronous JavaScript And XML 

*在ajax之前必须要提起的--同步和异步

 1_同步: 客户端必须等服务器响应,且等的时候不能做其他的操作.

　　　　(你在楼下等你女朋友的时候, 在等到她之前,只能干等,不能玩手机).

2_异步: 客户端不需要等待服务器响应, 请求完服务器, 客户端可以进行其他操作.

　　　　(你告诉你女朋友,在楼下等她, 说完之后, 可以玩手机, 甚至撩妹)

 

1_Ajax:

　　是一种在无需重新加载网页的情况下,能够对部分网页进行更新的技术..

　　　　*通过在后台与服务器进行少量的数据交换,Ajax可以使网页实现异步更新,这样提升了用户的体验.

　　　　*不使用ajax的网页,在更新内容的时候,那就得重载网页页面了.

2_实现方式

步骤:

　　*创建核心对象

　　*建立连接

　　*发送请求

　　*接收并处理来自服务器的响应结果

　　1_原生的JS实现方式

    //1.创建核心对象
    var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }


    //2. 建立连接
    xmlhttp.open("GET","ajaxServlet?username=tom",true);
    /*
        参数：
            1. 请求方式：GET、POST
                * get方式，请求参数在URL后边拼接。send方法为空参
                * post方式，请求参数在send方法中定义
            2. 请求的URL：
            3. 同步或异步请求：true（异步）或 false（同步）

     */


    //3.发送请求
    xmlhttp.send();
    //* get方式，请求参数在URL后边拼接。send方法为空参
    //* post方式，请求参数在send方法中定义

    //4.接受并处理来自服务器的响应结果
    //获取方式 ：xmlhttp.responseText
    //什么时候获取？当服务器响应成功后再获取

    //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
    xmlhttp.onreadystatechange=function()
    {
        //判断readyState就绪状态是否为4，判断status响应状态码是否为200
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
           //获取服务器的响应结果
            var responseText = xmlhttp.responseText;
            alert(responseText);
        }
    }    

 

　　2_JQuery实现方式

　　$,ajax()   使用ajax发送异步请求

//语法:  $.ajax({"键值对"});

$.ajax({
    url:"servlet",  //请求路径
    type: "POST", //请求方式
    data:{"username":hello,"age":20},//请求参数  data: "username=hello&age=20"
     
    success:function(data){alert(data);}, //响应成功后,执行回调函数
    error:function(){alert("服务器出错...");},//响应出现错误,执行的回调函数
    
    dataType:"json",//设置接收到的响应数据格式为json
    beforeSend:function(){},//发送ajax前执行的函数
    complete:function(){}  //最后执行的函数
});

 　　$.get(): 发送get请求

//语法:  $.get(url,[data],[callback],[type])   
  示例:  $.get(
　　　　　　　　"servlet",//请求路径 "/servlet/方法"   
　　　　　　　　{username:"hello"},//请求参数{}  多个参数键值对中间使用","号隔开
　　　　　　　　function(date){alert(data);},//callback回调函数
　　　　　　　　"json"//type 响应的结果类型
　　　　　　);

 

　　 $.post(): 发送post请求

//语法:  $.post(url,[data],[callback],[type])   
  示例:  $.post(
　　　　　　　　"servlet",//请求路径 "/servlet/方法"   
　　　　　　　　{username:"hello"},//请求参数{}  多个参数键值对中间使用","号隔开
　　　　　　　　function(date){alert(data);},//callback回调函数
　　　　　　　　"json"//type 响应的结果类型
　　　　　　);