Ajax技术

Ajax技术

一、Ajax技术简介

什么是 Ajax？

AJAX = 异步 JavaScript  + XML。

AJAX 是一种用于创建快速动态网页的技术（客户端）。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
  
总结：AJAX 是一种在无需重新加载(刷新)整个网页的情况下，能够更新部分网页的技术。

二、Ajax工作原理

以上工作原理流程的总结和梳理：

创建xhr对象—>发送请求—>创建response对象—>返回数据到客户端—>客户端接收数据并处理—>无刷新更新页面内容

三、Ajax中XMLHttpRequest对象

3.1、XMLHttpRequest的作用

1、XMLHttpRequest对象是 AJAX 的基础。

2、所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

3、XMLHttpRequest 对象用于和后台与服务器交换数据。并且可以在不重新加载整个网页的情况下，对网页的某部分进

行局部更新。

3.2、如何创建XMLHttpRequest对象

创建 XMLHttpRequest 对象的时候，存在不同的浏览器兼容性的问题。

1、所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

  创建 XMLHttpRequest 对象的语法：
  
  var xmlhttp=new XMLHttpRequest();

2、老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

  创建 XMLHttpRequest 对象的语法：
  
  var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

综上所述，我们可以定义一个函数，专门负责来创建XMLHttpRequest对象；

//定义一个函数，创建出XMLHttpRequest对象
function    createXhr() {
       var xmlHttp;
       try
        {
       // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
        }
        catch (e)
        {

      // Internet Explorer
       try
          {
          xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
          }
       catch (e)
          {
          try
             {
             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
             }
          catch (e)
             {
                alert("您的浏览器不支持AJAX！");
             return false;
             }
          }
        }
    return xmlHttp;
}

三、如何请求服务器端

3.1、GET方式的请求

var  xmlHttp = createXhr();
	    
//设置参数标准
xmlHttp.open("GET", "myAction.action", true);
//发送请求
xmlHttp.send(); 

如果在请求的过程中，需要向服务器传递参数，则直接在URL地址后通过 ？ 和 &符号进行传递即可。

3.2、POST方式的请求

var  xmlHttp = createXhr();
	    
//设置参数标准
xmlHttp.open("POST", "myAction.action", true);

//设置允许写入数据到协议体的包中
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

//传入相应的数据信息
xmlHttp.send("m=list&name=admin&pwd=123456");

若果没有参数需要传递到服务器端的话，则不需要设置请求头 ，send函数中也不需要传递参数。

前面所讲内容的总结：

1、就是我们如何通过Ajax技术实现对服务器端发出请求。

2、在不同的请求方式下，如何向服务器传递参数的操作。

四、Ajax如何实现响应

4.1、Ajax响应情况介绍

Ajax服务器响应？

需要获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。  

responseText 属性
如果来自服务器的响应并非 XML，请使用 responseText 属性。

responseXML 属性
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性。
     
提示：Ajax请求可以返回的数据格式类型：文本、HTML、JSON、XML

4.2、借助属性获取响应结果

//onreadystatechange事件属性的使用 
xmlHttp.onreadystatechange = function(){
	    	//响应全部就绪（通过状态码来进行确定）
	    	if(xmlHttp.readyState==4&&xmlHttp.status==200){
	    		    //获取数据，并进行显示
	    		  var   content =  xmlHttp.responseText;
	    		  var  sp =   document.getElementById("sp");
	    		  sp.innerHTML = content;
	    	}
};
	    

提示！

responseText属性：可以针对服务器端响应的html 、 文本 、json格式可以进行接收；

responseXML属性：仅仅只是针对服务器端响应的xml格式进行接收；

备注！json格式其实就是一个带有格式的字符串，比较的轻巧，经常进行使用（配合js比较适合）；

五、响应的各种数据格式

Ajax请求可以返回的数据格式类型：文本、HTML、JSON、XML

//定义一个函数，创建出XMLHttpRequest对象
function    createXhr() {
			var xmlHttp = null;
			try {
				// Firefox, Opera 8.0+, Safari
				xmlHttp = new XMLHttpRequest();
			} catch (e) {
				// Internet Explorer
				try {
					xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
				} catch (e) {
					xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
			}
			return xmlHttp;
}

/**
 * 接收响应的HTML格式
 */
function    sendPostRequest(){
	//调用函数创建发送器的对象
	 var  xmlHttp = createXhr();
	    //设置参数标准
	    xmlHttp.open("POST", "myAction.action", true);
	    //设置允许写入数据到协议体的包中
	    xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	    //传入相应的数据信息
	    xmlHttp.send("m=post&name=admin&pwd=123456");
	    
	    xmlHttp.onreadystatechange = function(){
	    	//响应全部就绪
	    	if(xmlHttp.readyState==4&&xmlHttp.status==200){
	    		    //获取数据
	    		  var   content =  xmlHttp.responseText;
	    		  var  sp =   document.getElementById("sp");
	    		  sp.innerHTML = content;
	    	}
	    };    
}


/**
 * 接收响应的是一个文本内容
 */
function   sendGetRequest(){
	//调用函数创建发送器的对象
	 var  xmlHttp = createXhr();
	    
	    //设置参数标准
	    xmlHttp.open("GET", "myAction.action?m=get", true);
	    //发送请求
	    xmlHttp.send(null);
	    
	    xmlHttp.onreadystatechange = function(){
	    	//响应全部就绪
	    	if(xmlHttp.readyState==4&&xmlHttp.status==200){
	    		    //获取数据,这个数据是一个纯文本的形式ok
	    		  var   content =  xmlHttp.responseText;
	    		  alert(content);
	    	}
	    };    
	
}


/**
 * 接收响应的是json格式
 */
function   sendGetRequestJson(){
	
	//调用函数创建发送器的对象
	 var  xmlHttp = createXhr();
	    
	    //设置参数标准
	    xmlHttp.open("GET", "myAction.action?m=json", true);
	    //发送请求
	    xmlHttp.send(null);
	    
	    xmlHttp.onreadystatechange = function(){
	    	//响应全部就绪
	    	if(xmlHttp.readyState==4&&xmlHttp.status==200){
	    		    //获取数据,这个数据是一个json格式的字符串
	    		  var   jsonStr =  xmlHttp.responseText;
	    		 // alert(jsonStr);
	    		  
	    		  //js中如何解析json
	    		  
	    		  //使用eval转换函数进行  json格式字符串---->json对象的  转换过程;   (第一种方式)
	    		 //var  jsonObj =  eval('('+jsonStr+')');
	    		 
	    		  //使用JSON中的parse函数来进行转换   （第二种方式）【推荐】
	    		  var  jsonObj = JSON.parse(jsonStr);  //预先检查jsonStr的格式是否正确
	    		 
	    		 //从json对象中获取数据
	    		 alert(jsonObj.name);
	    		 alert(jsonObj.age);
	    	}
	    };    	
}

提示！

有关json的相关信息，可以在runoob.com中进行了解（作为一个补充的辅助学习资料）；

六、Jquery实现Ajax

6.1、$.get()

在jQuery中 $.get()函数的功能比较单一
它是专门用来发起get请求的 从而将服务器上的资源请求到客户端来使用
$.get()函数的语法如下
$.get( url , [data] ,{callback})
第一个参数url 是字符串类型 也是必须要有的 他代表 要请求的资源地址
第二个参数data 是要以对象方式 它代表请求资源期间需要携带的参数 如果没有 就全部返回
第三个参数 callback 是要以函数的方式 他代表请求成功时 的回调函数 它也是可以没有的

我们设定一个按钮 点击就使用get请求方式按照资源地址获取数据

不带参数：

$('#btn').on('click', function(){
         $.get('http://www.liulongbin.top:3006/api/getbooks',function(data){
           console.log(data);
         })
});

携带参数：

$('#btn').on('click', function(){
     $.get('http://www.liulongbin.top:3006/api/getbooks',{id:1},function(data){
       console.log(data);
     })
})

6.2、$.post()

在jQuery中 $.post()函数的功能比较单一
它是专门用来发起post请求的 从而将服务器上的资源请求到客户端来使用
$.post()函数的语法如下
$.post( url , [data] ,{callback})
第一个参数url 是字符串类型 也是必须要有的 他代表 要提交的资源地址
第二个参数data 是要以对象方式 它代表请求资源期间需要提交的数据 他也是可以没有的
第三个参数 callback 是要以函数的方式 他代表数据提交成功时 的回调函数 它也是可以没有的

语法如下：

<button>POST</button>
<script>
      $(function () {
        $("button").on("click", function () {
          $.post(
            "http://www.liulongbin.top:3006/api/addbook",
            { bookname: "水浒传" },
            function (data) {
              console.log(data);
            }
          );
        });
      });
</script>

6.3、ajax（）

我们之前上面两个方法过于单一
我们jQuery给我们提供了ajax方法
语法如下
$.ajax({
    type:'', 代表请求的方式 可以是GET和POST 注意是大写
    url：'', 代表请求的url地址
    data：{}, 代表要提交给服务器的数据
    dataType:'', 表示服务器预计返回的数据格式类型
    succes：function(data){} 请求成功的回调函数
})

使用$.ajax()发起get请求

使用$.ajax()发起get请求， 只需要将type属性的值设置为‘GET’ 即可：

<button> 点击 </button>
<script>
     $(function () {
      $('button').on('click', function(){
        $.ajax({
          type: 'GET',
          url: 'http://www.liulongbin.top:3006/api/getbooks',
          data:{ id : 1},
          success: function(data){
            console.log(data);
          }
        })
      })      
     })
</script>

使用$.ajax() 发起POST请求

使用$.ajax()发起post请求， 只需要将type属性的值设置为‘POST’ 即可：

<button> 点击 </button>
<script>
    $(function(){
      $('button').on('click', function(){
       $.ajax({
         
        type: 'POST',
         url: 'http://www.liulongbin.top:3006/api/addbook',
         data:{ bookname:'水浒传',
                 author: '施耐庵',

        },
         success: function(res){
           console.log(res);
          }

       })
     })
    })
</script>

6.4、getJSON()

getJSON() 方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据。

$(document).ready(function(){
    $("button").click(function(){
        $.getJSON("demo_ajax_json.js",function(data){
            $.each(data, function(i){
                $("div").append(data[i] + " ");
            });
        });
    });
});