Ajax详解

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

　　Ajax分为原生Ajax（js）和JqueryAjax。

　　Ajax是通过XMLHttpRequest对象进行异步传输的。原生Ajax使用时需要手动生成XMLHttpRequest对象，然后在通过此对象去调用。根据浏览器的不同做出判断生成响应的XMLHttpRequest对象。而jquery底层封装了此部分的操作，直接调用就可以。

　　利用XMLHttpRequest实例与服务器进行通信包含一下三个关键部分：

　　onreadystatechange事件处理函数

　　open(“method”,”url”) //建立对服务器的调用，method参数可以是GET,POST。url参数可以是相对URL或绝对URL。这个方法还包括3个可选参数。

　　send(content) 　　　 //向服务器发送请求

以下是原生ajax生成XMLHttpRequest进行的判断操作：

function   createXmlHttpRequest(){
   var xmlHttp;
   try{    //Firefox, Opera 8.0+, Safari
           xmlHttp=new XMLHttpRequest();
    }catch (e){
           try{    //Internet Explorer
                  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }catch (e){
                  try{
                          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                  }catch (e){}  
           }
    }
   return xmlHttp;
 }

一个完整的原生ajax例子：

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
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");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();
}
</script>
</head>
<body>

    <h2>AJAX</h2>
    <button type="button" onclick="loadXMLDoc()">请求数据</button>
    <div id="myDiv"></div>

</body>
</html>

结果为：

JQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON()。最底层的最基础也最全面，越上层的越简单。

第一层：$.ajax()返回其创建的 XMLHttpRequest 对象：

$.ajax({   
        url: url,//发送请求的地址   
        data: data,//参数 发送到服务器的数据   
        type: 'POST',//提交方式 可以选择post/get 推荐post    
        async: false,//同步异步 true为异步请求，false为异步请求，默认为true
        dataType: 'json',//返回数据类型 其值可以为xml，html，script，json，jsonp，text    
        success:function(data){   
            accidentList = data.list;   
        //这里可以直接取data里面的数据了，因为设置返回值为json方式。            
        }

第二层：$.get(url, [data], [callback], [type]) 和$.post(url, [data], [callback], [type]):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="#" id="post">POST 请求</a>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
/* 
 * get请求的 请求参数是直接拼接  url的后面
 *jQuery $.post() 方法
 * $.post() 方法通过 HTTP POST 请求从服务器上请求数据。
   $.post(URL,data,callback);
 */
 $(function (){
     $('#post').click(function (){
         var url = 'postServlet';//请求路径
         var data = 'username=zhangsan&password=12345';//第一种请求参数的方式
         //function (msg){}  回调函数
         $.post(url,data,function (msg){
             alert(msg);
         });
     });     
 });
</script>
</body>
</html><SCRIPT Language=VBScript></SCRIPT>

PostServlet.java:

package com.lechenggu.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/postServlet")
public class PostServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    public PostServlet() {
        super();
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("接收到了 Ajax的 POST 请求");        
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        System.out.println("username = "+ username +",password = "+password );
        response.getWriter().write("Hello POst");
    }
}

结果显示：

第三层：$.getJSON(url,[data],[callback])

function(data){

$.each(a.data, function(a) {

this.index = a, "l" == this.t && (this.i = c.FN_RefactorJSON(this.i, 7)), b.push(c.renderItem(this, a))

}