一、原理

效果：参考京东页面 ，拖到最底下 ，中间的图片 ，信息都是空白的，到你想看的内容，然后给服务器发一个局部请求 ，这才得到服务器的局部响应。

二、快速上手

1、原生js的Ajax

原生js的Ajax简单的分为五个步骤：

    1.构建异步请求对象    
     var ajaxObj=new XMLHttpRequest();
     
    2.调用open打开连接,传入请求方式、url 等参数
    第一个参数写请求方式，第二个参数可写跳转到哪个servlet可在后面追加参数“ /param=value”
    ajaxObj.open("get","AServlet");
    
    3.调用send方法 把请求发送到AServlet里 可在AServlet 通过 request.getParameter 方法获得open传来的参数
      ajaxObj.send();
    
     如果是post 请求
     请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据(原因下面有)：  

     xmlhttp.open("POST","ajax_test.html",true); 
     xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
     xmlhttp.send("fname=Henry&lname=Ford");
         
    4.注册状态改变事件
     ajaxObj.onreadystatechange=function () {
     //当响应码为4  并且状态码为200时 才算响应成功 ，在函数里写一些逻辑
     
      if(ajaxObj.readyState===4 && ajaxObj.status===200){
            console.log("处理页面");
            
        }
     
     }
    

    5.在事件的驱动函数里面处理返回的数据
     针对服务器返回的数据进行处理:
                ajaxObj.responseText  //处理非xml
                 ajaxObj.responseXML //处理xml

*为什么使用post 请求给服务器提交数据，需要给表头添加application/x-www-form-urlencoded属性？

       post方式给服务器提交数据 经过我们测试 发现 form表单在post提交的时候
	请求头的Conten-type是: application/x-www-form-urlencoded
	
    	而我们的ajax的请求头却是:  text/plain;charset=utf-8application/x-www-form-urlencoded这个东西，它是form表单的enctype的默认值，表示当前表单默认以 url编码的字符串的形式进行提交。
     所以我们需要模拟post请求头的操作，给Content-type请求头设置改属性。

2、jQuery对象封装的Ajax

jQuery封装后的 Ajax 简单上手：

   $.ajax({
                    url: '/AJAXServlet', //提交请求到哪
                    type: 'POST', //请求方式get post
                    async: true,    //是否异步请求:默认为true， 是异步的 
                    data: {
                        key1: "value1",
                        key2:"我是数据2"  // key-value的数据
                    },
                    timeout: 15000,    //超时时间
                    dataType: 'json',  //响应返回的数据格式

                    success: function (data) {

                        alert('AJAX成功！');
                        $('#result').text(data.result);
                    },

                    error: function (e) {
                        alert('AJAX失败！');
                    }
                });