Ajax JavaScript和jQuery

一、 同步和异步

同步：当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面出去假死状态，当这个AJAX执 行完毕后才会继续运行其他代码页面假死状态解除
异步：AJAX代码运行中的时候其他代码一样可以运行，用户可以进行其他操作

二、 javascript

1. get请求

   //1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
   var xmlHttp = new XMLHttpRequest();
   //2、绑定监听 ---- 监听服务器是否已经返回相应数据
   xmlHttp.onreadystatechange = function(){
       if(xmlHttp.readyState==4&&xmlHttp.status==200){
           //5、接受相应数据
           var res = xmlHttp.responseText;
           document.getElementById("span1").innerHTML = res;
       }
   }
   //3、绑定地址
   xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true);
   //4、发送请求
   xmlHttp.send();

2. post请求

   //1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
   var xmlHttp = new XMLHttpRequest();
   //2、绑定监听 ---- 监听服务器是否已经返回相应数据
   xmlHttp.onreadystatechange = function(){
       if(xmlHttp.readyState==4&&xmlHttp.status==200){
           //5、接受相应数据
           var res = xmlHttp.responseText;
           document.getElementById("span2").innerHTML = res;
       }
   }
   //3、绑定地址
   xmlHttp.open("POST","/WEB22/ajaxServlet",false);
   //4、发送请求
   xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   xmlHttp.send("name=wangwu");
   

三、jquery

1. get请求

   $.get(
       "/WEB22/ajaxServlet2", //url地址
       {"name":"张三","age":25}, //请求参数
       function(data){ //执行成功后的回调函数
           alert(data.name);
       },
       "json"
   );

2. post请求

   $.post(
       "/WEB22/ajaxServlet2", //url地址
       {"name":"李四","age":25}, //请求参数
       function(data){ //执行成功后的回调函数
           alert(data.name);
       },
       "json"
   );

3. ajax请求

   $.ajax({
       url:"/WEB22/ajaxServlet2",//请求地址
       async:true,//是否异步
       type:"POST",//请求方式
       data:{"name":"lucy","age":18},//请求数据
       success:function(data){//成功
               lert(data.name);
       },
       error:function(){//失败
           alert("请求失败");
       },
       dataType:"json"//响应数据返回类型
   });