Ajax核心對象——高速上手XmlHttpRequest
引言：
非TGB的。直接跳過吧……
從開學結束JQuery之後，計算機的進度停了一段時間。某天無聊的時候，又又一次把BS的東西拿過來看了看。
發現裏面有非常多既熟悉又陌生的東西。
在學習王興魁老師的Ajax的時候，裏面的東西，大多都是之前學過的。在學習JS的時候。有非常多js資料。
非常多人看的都是牛腩js和姜浩的js。可是我師父讓我看李炎恢的js。
剛開始的時候感覺挺怪的。牛腩的js一周，姜浩的js 一周。李炎恢的js 150集據說至少看三個星期。
盡管感覺壓力大了點。
可是等真正看的時候。才發現這150集的內容挺實用的。前面解說的很基礎。後面通過一個項目，解說了JQuery
在看Ajax的時候，發現基本裏面全是學過的東西。如今來學習一下Ajax的基礎。並看一個實例。
Ajax基礎：
上面啰嗦了半天，如今進入正題。
什麽是Ajax？
Ajax縮寫：AsynchronousJavaScript and XML 也就是 異步的 js和xml。
利用Ajax能夠在向server請求數據的時候。client不進行刷新。
就是client與server的交互，能夠不間斷的進行。
即：client發送的請求。不影響client的使用。
同步與異步的差別？
同步：
client向server請求一個數據，頁面又一次載入
異步：
client請求數據。
頁面上直接得到而不須要刷新。
Ajax技術。能夠使得web頁面更加友好。不會由於操作一小塊的內容，使得整個頁面進行刷新。
Ajax的核心技術，就是XmlHttpRequest對象(簡稱XHR)。這個對象的作用。就相當於。client的秘書。
傳統的頁面設計：
當請求數據的時候，須要等待server傳回數據之後才幹進行下一步操作。（可能造成無響應的狀態）
Ajax方式的頁面：
client發送請求數據的操作之後，仍然能夠繼續使用。(不會刷新頁面)比方，百度的搜索框。不會由於你填寫了內容
而停止響應。
XmlHttpRequest對象，作為client的“秘書”與server進行交互。
傳統Web頁面與Ajax方式Web頁面的對照
Ajax入門：五步學會XmlHttpRequest
html頁面：
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript"> ?
var xmlhttp;
function submit() {
//此處省略1-4步驟
}
function callback() {
//此處省略5步驟
}
</script>
</head>
<body>
<div>username：</div>
<input type="text" id="userName"/>
<input type="button" onclick="submit()" value="校驗" />
<br />
<div id="message"></div>
</body>
</html>
以下是五步流程：
1、創建XmlHttpRequest對象
//1.創建xmlHttpRequest對象
if (window.XMLHttpRequest) {
//IE7,IE8,FireFox,Mozillar,Safari,Opera
//alert("IE7,IE8,FireFox,Mozillar,Safari,Opera");
xmlhttp = new XMLHttpRequest();
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
//IE6,IE5.5,IE5
var activeName = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Miscrosoft.XMLHTTP"];
for (var i = 0; i < activeName.length; i++) {
try {
xmlhttp = new ActiveXObject(activeName[i]);
break;
} catch (e) {
}
}
}
if (xmlhttp === undefined || xmlhttp === null) {
alert("當前瀏覽器不支持創建xmlhttprequest對象，請更換瀏覽器");
return;
}
2、註冊回調函數
//2.註冊回調方法
xmlhttp.onreadystatechange = callback;
註：在註冊回調函數的時候，僅僅須要把函數名賦值就可以。假設 賦值callback().則賦值為 函數運行的結果值。
3、設置與server交互的參數
//3.設置和server交互的對應參數（Get）
var userName=document.getElementById("userName").value;
xmlhttp.open("GET", "Ajax?name=" + userName, true); //true 表示異步的方式
//3.設置和server交互的對應參數（Post）
//xmlhttp.open("POST","AJAX",true);
//xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
4、向server發送數據
//4.設置向server發送的數據。啟動和server端的交互
xmlhttp.send(null);
5、推斷與server交互是否完畢，並推斷是否有返回數據
//5.推斷server端的交互是否完畢，還要推斷server端是否返回了數據
if (xmlhttp.readyState === 4) {
//表示和server端的交互已經完畢
if (xmlhttp.status === 200) {
//表示server的響應代碼是200，正確的返回了數據
//純文本接受數據方式
var message = xmlhttp.responseText;
//xml數據相應的dom對象的接受方法
//使用的前提是。server端須要設置content-type為text/xml
//var domXml=xmlhttp.responseXML
var messageNode = document.getElementById("message");
messageNode.innerHTML = message;
}
}
註：理解困難的。能夠去研究一下xmlhttprequest對象的屬性及事件。
唯獨以上的html。執行結果肯定有問題…… 執行都沒有Webserver。
單純html客戶跟誰交互？
此時，應該創建Webserver。使用tomcatserver創建servlet
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
*
* @author 趙崇
*/
public class Ajax extends HttpServlet {
/**
* Processes requests for both HTTP <code>GET</code> and <code>POST</code>
* methods.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
try (PrintWriter out = response.getWriter()) {
/* TODO output your page here. You may use following sample code. */
String old=request.getParameter("name");
if(old==null){
out.println("username不能為空");
}else{
String name=new String(old.getBytes("ISO8859-1"),"gb2312");
System.out.println(name);
if(name.equals("zhaochong")){
out.println("username["+ name+"]已經存在。請使用其它username");
}else{
out.println("username["+ name+"]尚未存在，請使用其它username");
}
}
}
}
在創建servlet的時候，僅僅須要改動processRequest函數中的內容。創建servlet的時候，請自己主動生成xml
以上Demo是在NetBean IDE上進行的。盡管這麽一個小樣例。發現裏面有好多都不懂……比方tomcat與glashfish的差別 以及xml文件裏內容的含義等等。
看視頻的時候，眼看偏了，忽略了 開發環境的配置。
總結
通過以上一個小樣例，能夠初步了解一下Ajax與傳統頁面的差別。更加深入的理解，須要在多次反復，在項目中應用，才幹熟練掌握。
Ajax核心對象——高速上手XmlHttpRequest