[Java学习笔记]Ajax技术基本概念以及实现方法

什么是Ajax？

Ajax全称为”Asynchronous JavaScript and XML”(异步JavaScript和XML),通过后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，可以在不重新加载整个网页的情况下，对网页的某部分进行更新.
Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键-发送异步请求、接受响应以及执行回调。

Ajax的运行原理

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

同步的请求和异步的请求

异步：在异步模式下，当我们使用AJAX发送完请求后，可能还有代码需要执行。这个时候可能由于种种原因导致服务器还没有响应我们的请求，但是因为我们采用了异步执行方式，所有包含AJAX请求代码的函数中的剩余代码将继续执行。如果我们是将请求结果交由另外一个JS函数去处理的，那么，这个时候就好比两条线程同时执行一样。

同步：在同步模式下，当我们使用AJAX发送完请求后，后续还有代码需要执行，我们同样将服务器响应交由另一个JS函数去处理，但是这时的代码执行情况是：在服务器没有响应或者处理响应结果的JS函数还没有处理完成return时，包含请求代码的函数的剩余代码是不能够执行的。就好比单线程一样，请求发出后就进入阻塞状态，知道接触阻塞余下的代码才会继续执行

比如：

$.ajax({  
     type:"POST", 
     url:"Venue.aspx?act=init", 
     dataType:"html", 
     success:function(result){  //function1()
       f1(); 
       f2();  
    } 
     failure:function (result) {  
      alert('Failed');  
     }, 
 } 
 function2();

说明：上述代码中，当ajax块发出请求后，他将停留function1()，等待server端的返回，但同时（在这个等待过程中），前台会去执行function2()。

再如：

$.ajax({  
     type:"POST", 
     url:"Venue.aspx?act=init", 
     dataType:"html", 
     async: false,
    success:function(result){  //function1()
       f1(); 
       f2(); 
     } 
    failure:function (result) {  
      alert('Failed');  
     }, 
 } 
 function2();

当把asyn设为false时，这时ajax的请求时同步的，也就是说，这个时候ajax块发出请求后，他会等待在function1（）这个地方，不会去执行function2()，直到function1()部分执行完毕。

原生js实现的Ajax

• (1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
• (2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
• (3)设置响应HTTP请求状态变化的函数.
• (4)发送HTTP请求.
• (5)在回调函数中获取到响应结果.
• (6)通过相应结果使用JavaScript和DOM实现局部刷新.

var xmlHttp = new XMLHttpRequest();
   xmlHttp.open('get','demo_get.html','true');//调用open()方法并采用异步方式
   xmlHttp.send(); //使用open()方法将请求发送出去
   xmlHttp.onreadystatechange()=>{
        if(xmlHttp.readyState === 4 && xmlHttp.status === 200){
			//成功响应后的响应函数主体
        }
}

JQuery实现ajax技术

1. $.get(url, [data], [callback], [type])
2. $.post(url, [data], [callback], [type])
   其中：
   url：代表请求的服务器端地址
   data：代表请求服务器端的数据（可以是key=value形式也可以是JSON格式）
   callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）
   type：表示服务器端返回的数据类型（JQuery会根据指定的类型自动类型转换）；常用的返回类型：text、json、html等。

$.get("url",
{
    //发送至服务器的数据，格式为key/value
    key:value  
},
function(data){
    //请求成功时的callback
},
'json'//解析响应结果data的格式
);

3. $.ajax( { option1:value1,option2:value2… } );
   常用的option有如下：
   async：是否异步，默认是true代表异步
   data：发送到服务器的参数，建议使用JSON格式
   dataType：服务器端返回的数据类型，常用text和JSON
   success：成功响应执行的函数，对应的类型是function类型
   type：请求方式，POST/GET
   url：请求服务器端地址
   error：失败的回调函数，对应的类型是function类型

$.ajax({
    //请求方式
    type:'POST',
    //发送请求的地址
    url:'fzz.php',
    //服务器返回的数据类型
    dataType:'json',
    //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
    data:{name:xxx,age:xxx},
    success:function(data){
        //请求成功函数内容
    },
    error:function(jqXHR){
        //请求失败函数内容
    }
});