Ajax實現了無需重新整理介面就能從伺服器拿到資料作為一種非常流行的技術，現已廣泛應用於前端開發 Ajax的核心是XMLHttpRequest這個物件。
看看具體的程式

1.
XMLHttpRequest的方法與屬性介紹，通過程式我們查詢XMLHttpRequest物件的方法以及屬性

 function ajax1(){
        var xhr;
        if(window.XMLHttpRequest){
            xhr=new XMLHttpRequest();
        }
        if(window.ActiveXObject){
            xhr=new
 
 ActiveXObject("microsoft-xmlhttp");
        }
        for(var item in xhr){
            document.writeln(item+":"+xhr[item]+"<br/>");
        }
    }

得到的就是所有的屬性和方法，貼一下備忘

屬性很多，我們一般通過檢測XMLHttpRequest物件的onreadystate事件來檢測
XMLHttpRequest物件的readystate屬性的值，也就是請求響應的階段
屬性的取值為：
0：未初始化，尚未呼叫open方法
1：啟動已經呼叫open方法，但是沒有呼叫send方法
2：傳送：已經呼叫send方法，但是尚未接接收到資料
3:：接收，已經收到部分資料
4：完成已經接收到全部響應資料
通常我們只對readystate==4的階段進行處理

2.status屬性，代表相應的狀態碼200為成功
所以我們要檢測這兩個資料，以確保資料返回正常

    function ajax(){
           var xhr;
           if(window.XMLHttpRequest){
               XHR=new XMLHttpRequest();
           }
           if(window.ActiveXObject){
               xhr=new ActiveXObject("microsoft-xmlhttp");
           }
           xhr.open("get"
 
,"http://localhost/demo2/Ajax",true);
           xhr.onreadystatechange=function(){
          if(xhr.readyState==4){
                   if(xhr.status==200){
                       alert(xhr.responseText);
                   }
               }
           };
           /*
           readystatechange事件
            */
           xhr.send(null);
       }

上面就是ajax的程式碼
說下其中的方法
3 open(method,target,bool);
引數1為傳送的請求，get，post
引數2傳送的目標地址，是否使用非同步
簡單解釋下第三個引數
如果為 ture，代表非同步，這時我們只要實現readystatechange事件，就會實現非同步資訊的獲取,
send()方法代表的是傳送資料
裡面有一個引數，是傳送post請求的引數而get請求只要將請求資訊放在open引數二的後面就行http://localhost/demo2/Ajax?user=fang&password=123
下面是post請求
基本一樣，

 function ajax(){
        var xhr;
        if(window.XMLHttpRequest){
            XHR=new XMLHttpRequest();
        }
        if(window.ActiveXObject){
            xhr=new ActiveXObject("microsoft-xmlhttp");
        }
        xhr.open("post","http://localhost/demo2/Ajax",true);
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    alert(xhr.responseText);
                }
            }
        };
        /*
        readystatechange事件
         */
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send("user=fang&password=123");
    }

為了模擬表單提交，通過xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);設定了頭部資訊
open引數1改為post，引數2不在有引數，
在send方法中我們放入了post請求的請求資訊

下面是伺服器的程式碼實現，使用的是servlet實現的，

package com.test;

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

import javax.servlet.AsyncContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.xml.ws.Response;

import org.apache.catalina.connector.Request;

@WebServlet(
        urlPatterns={"/Ajax"}
        )
public class Ajax extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
   System.out.println("get請求");

        getRequest(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        System.out.println("Post請求");

        getRequest(req,resp);


    }

    private void getRequest(HttpServletRequest req, HttpServletResponse resp) {
         String user=req.getParameter("user");
           String passwordString=req.getParameter("password");
             PrintWriter printWriter = null;
            try {
                printWriter = resp.getWriter();
            } catch (IOException e) {
                // TODO 自動生成的 catch 塊
                e.printStackTrace();
            }

          System.out.println("輸入的使用者為："+user);
          System.out.println("輸入的密碼為："+passwordString);

    }

}