Ajax: 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術
一、js使用Ajax的步驟：
1.建立更新局部資訊的對象，
2.通過該對象調用加載資料的方法
3.開啟Ajax服務
4.發送資料
ajax生命周期：
1.:所謂 Ajax 的生命周期，其實就是方法 onreaystatechange()中對應的狀态嗎的一個變化流程，即是 ajax 的生命周期。
2.從程式運作的角度來分析，ajax 的聲明周期為:
第一步：建立ajax對象
第二步：調用 open()方法，開啟 Ajax 請求服務
第三步：調用 send()方法
第四步：通過 cyAjax.responseText 接收來自伺服器端的資料
第五步：接收來自伺服器端傳回資料(用 responseText 屬性)
3.從狀态碼變化角度分析
Ajax 在執行請求和響應的過程中，其狀态會發生五次變化，這五次變
化分别對應的狀态碼為：
0 (未初始化)：(XMLHttpRequest)對象已經建立，但還沒有調用 open()方法。
1 (載入)：已經調用 open() 方法，但尚未發送請求。
2 (載入完成)：請求已經發送完成。
3 (互動)：可以接收到部分響應資料。
4 (完成)：已經接收到了全部資料，并且連接配接已經關閉。
簡單案例：index.jsp
function testAjax(){
/* 用JS使用Ajax的步驟： */
/* 1.建立更新局部資訊的對象 */
var cyAjax = new XMLHttpRequest();
/* 2.通過該對象調用加載資料的方法 */
cyAjax.onreadystatechange = function(){
var divData = document.getElementById("divID");
//responseText該屬性，是把伺服器中資料，顯示給前台頁面
divData.innerHTML = cyAjax.responseText;
}
/* 3.開啟Ajax服務
*3.1:method:請求方式：get/post
3.2:url:請求背景控制器類URL（通路路徑）
3.3：async：Asynchronized，是同步還是異步，值為true（異步）或false（同步）
*
*/
cyAjax.open("get", "AjaxServlet", true);
/* 4.發送資料 */
cyAjax.send(null);
}
</script>
</head>
<body>
<input type="button" value="測試Ajax" onclick="testAjax()">
<div id="divID" style="width: 100px;height: 100px;border: solid 1px;">
</div>
</body>
AjaxServlet.java
package com.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("/AjaxServlet")
public class AjaxServlet extends HttpServlet{
@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//給用戶端響應一段資料
PrintWriter writer = response.getWriter();
//伺服器給浏覽器響應資料時，是以檔案件輸出流方式，把資料傳遞給用戶端
writer.write("這是通過背景伺服器傳回給Ajax的内容");
writer.flush();
writer.close();
}
}
簡單案例：頁面輸入使用者名和密碼，點選登入，背景去資料庫查詢核對是否正确，将結果展示在頁面上，
pojo:實體層
Dao:持久層
servlet:控制層
//擷取頁面傳輸過來的資料,Integer.parseInt()将擷取過來的值轉換為Int類型
String name= URLDecoder.decode(request.getParameter("uname"),"utf-8");
int pswd =Integer.parseInt(request.getParameter("upw"));
System.out.println(name+" "+pswd);
try {
//selectName(String string):自定義方法，需要一個String類型的參數，傳回一個ResultSet類型的值
ResultSet rs= new AccountDao().selectName(name);
rs.next();//判斷是否有下一個資料
ps=rs.getInt(3);
System.out.println("ps:"+ps);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//給用戶端響應一段資料
PrintWriter writer = response.getWriter();
//伺服器給浏覽器響應資料時，是以檔案件輸出流方式，把資料傳遞給用戶端
if(ps==pswd){
writer.write("成功");
//flush() 重新整理流。
writer.flush();
writer.close();
}else{
writer.write("失敗");
//flush() 重新整理流。
writer.flush();
writer.close();
}
jsp:表示層
<script type="text/javascript">
function ajaxclick(){
var uname = document.getElementById("name").value;
var upw = document.getElementById("password").value;
var cyAjax = new XMLHttpRequest();
cyAjax.onreadystatechange = function(){
var divData = document.getElementById("divID");
divData.innerHTML = cyAjax.responseText;
}
cyAjax.open("get", "SelectServlet?uname="+encodeURI(encodeURI(uname)+"&upw="+upw, true));
cyAjax.send(null);
}
</script>
<body>
<input type="text" id="name" name="name">
<input type="password" id="password" name="password">
<input type="button" value="登入" onclick="ajaxclick()">
<div id="divID">
</div>
案例Post送出：
用 POST 方式送出請求時，需要把請求頭資訊設定為：
whnAjax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
寫在servlet裡面：
//設定編碼格式
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//擷取頁面傳遞的資料
String name = request.getParameter("name");
String gender = request.getParameter("gender");
String works = request.getParameter("works");
PrintWriter writer = response.getWriter();
writer.write("使用者名:"+name+"性别:"+gender+"代表作:"+works);
// writer.write("性别:"+gender);
// writer.write("代表作:"+works);
writer.flush();
writer.close();
jsp:
<script type="text/javascript">
function ajaxPost(){
var name = document.getElementById("nameID").value;
var gender = document.getElementById("genderID").value;
var works = document.getElementById("worksID").value;
//建立Ajax對象
var whnAjax = new XMLHttpRequest();
/* var wkajax;
//在在低版本的浏覽器年代時，需要盡心如下判斷。但如今，幾乎每個浏覽器都能支援ajax的請求，所就不需要判斷，也能建立對象。
if(window.XMLHttpRequest){//是否是火狐浏覽器
wkajax = new XMLHttpRequest();
}else if(window.ActiveXObject){//是否IE浏覽器
wkajax = new ActiveXObject("Msxml2.XMLHTTP");
} */
//加載回調函數
whnAjax.onreadystatechange = function(){
var data = document.getElementById("divID");
data.innerHTML = whnAjax.responseText;
}
//開啟服務
/* whnAjax.open("post", "AjaxPost?name=王浩楠&pwd=123456"); */
whnAjax.open("post", "AjaxPostServlet");
/*
給ajax的請求頭添加響應屬性和值
需要将ajax的請求資訊設定為“application/x-www-form-urlencoded”
*/
whnAjax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//發送資料
whnAjax.send("name="+name+"&pwd="+gender+"&works="+works);
}
</script>
</head>
<body>
姓名：<input type="text" id="nameID"><br/>
性别：<input type="text" id="genderID"><br/>
代表作品：<input type="text" id="worksID"><br/>
<input type="button" value="post方式送出Ajax請求" onclick="ajaxPost()">
<div id="divID" style="width: 100px;height: 100px;border: solid 1px;">
</div>
</body>
案例：用 Ajax 讀取 xml 檔案的資料
xml:
<?xml version="1.0" encoding="UTF-8"?>
<!--
XML檔案“可擴充标記語言”:(eXtensible Markup Language)
可以對其中标簽進行數量上的增加，就叫“可擴充”
-->
<emp>
<name>程勇</name>
<gender>男</gender>
<age>23</age>
<phone>1342223333</phone>
</emp>
<!-- 腳本語言 -->
<script type="text/javascript">
function testXml(){
//建立Ajax對象
var ajax = new XMLHttpRequest();
//加載回調函數
ajax.onreadystatechange = function(){
var cyData = ajax.responseXML;
var result =
cyData.getElementsByTagName("emp");
for(var i=0;i<result.length;i++){
alert(result[i].innerHTML);
}
}
//開啟服務
ajax.open("get", "myXmlData.xml");
//發送資料
ajax.send();
}
</script>
</head>
<body>
<input type="button" value=" 測試 XML 格式資料 "
onclick="testXml()">
</body>
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)