ajax的使用

時間 2019-11-20

標籤 ajax 使用欄目 Ajax 简体版

原文原文鏈接

1.ajax

AJAX（Asynchronous Javascript And XML）翻譯成中文就是「異步Javascript和XML」。即便用Javascript語言與服務器進行異步交互，它一個最大的特色就是，當服務器響應時，不用刷新整個瀏覽器頁面，而是能夠局部刷新。javascript

同步交互：客戶端發出一個請求後，須要等待服務器響應結束後，才能發出第二個請求；css

異步交互：客戶端發出一個請求後，無需等待服務器響應結束，就能夠發出第二個請求。html

例子：在用戶註冊用戶時，輸入用戶名後，把光標移動到其餘表單項上時，瀏覽器會使用AJAX技術向服務器發出請求，服務器會查詢名爲zhangSan的用戶是否存在，最終服務器返回true表示名爲zhangSan的用戶已經存在了，瀏覽器在獲得結果後顯示「用戶名已被註冊！」，整個過程當中頁面沒有刷新，只是局部刷新了，在請求發出後，瀏覽器不用等待服務器響應結果就能夠進行其餘操做。java

優勢：web

AJAX使用Javascript技術向服務器發送異步請求；ajax

AJAX無須刷新整個頁面；瀏覽器

由於服務器響應內容再也不是整個頁面，而是頁面中的局部，因此AJAX性能高；服務器

缺點：app

AJAX並不適合全部場景，不少時候仍是要使用同步交互；異步

AJAX雖然提升了用戶體驗，但無形中向服務器發送的請求次數增多了，致使服務器壓力增大；

由於AJAX是在瀏覽器中使用Javascript技術完成的，因此還須要處理瀏覽器兼容性問題；

2.建立ajax的步驟：

1.建立XMLHttpRequest對象；

2.調用open()方法打開與服務器的鏈接；

3.調用send()方法發送請求；

4.爲XMLHttpRequest對象指定onreadystatechange事件函數，這個函數會在XMLHttpRequest的1、2、3、4，四種狀態時被調用；

XMLHttpRequest對象的5種狀態：

0：初始化未完成狀態，只是建立了XMLHttpRequest對象，還未調用open()方法；

1：請求已開始，open()方法已調用，但還沒調用send()方法；

2：請求發送完成狀態，send()方法已調用；

3：開始讀取服務器響應；

4：讀取服務器響應結束。

一般咱們只關心4狀態。

XMLHttpRequest對象的status屬性表示服務器狀態碼，它只有在readyState爲4時才能獲取到。

XMLHttpRequest對象的responseText屬性表示服務器響應內容，它只有在readyState爲4時才能獲取到！

2.ajax例子

2.1 首先建立一個servlet：

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        System.out.println(request.getParameter("b"));
        System.out.println("Hello AJAX!");
        response.getWriter().print("Hello AJAX!");
    }

接着建立一個jsp：

<script type="text/javascript">
function createXMLHttpRequest() {
    try {
        return new XMLHttpRequest();//大多數瀏覽器
    } catch (e) {
        try {
            return new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
}

function send() {
    var xmlHttp = createXMLHttpRequest(); //1. 獲得異步對象 
    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {// 雙重判斷：xmlHttp的狀態爲4（服務器響應結束），以及服務器響應的狀態碼爲200（響應成功）
            var div = document.getElementById("div1");
            div.innerHTML = xmlHttp.responseText;
        }
    };
    xmlHttp.open("POST", "/ajaxdemo1/AServlet?a=A", true);
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//設置請求頭
  xmlHttp.send("b=B");//使用send()方法來設置請求體內容。若是是GET請求沒有請求體，但也要給出null，否則FireFox可能會不能發送！






}
</script>
<h1>AJAX2</h1>
<button onclick="send()">測試</button>
<div id="div1"></div>

2.2 判斷用戶名是否已被註冊

在註冊表單中，當用戶填寫了用戶名後，把光標移開後，會自動向服務器發送異步請求。服務器返回true或false，返回true表示這個用戶名已經被註冊過，返回false表示沒有註冊過。客戶端獲得服務器返回的結果後，肯定是否在用戶名文本框後顯示「用戶名已被註冊」的錯誤信息！

建立register.jsp：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'ajax3.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript">
//建立異步對象
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();//大多數瀏覽器
} catch (e) {
try {
return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
} catch (e) {
try {
return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本
} catch (e) {
throw e;
}
}
}
}

建立servlet：

package cn.itcast.web.servlet;

import java.io.IOException;

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

public class ValidateUsernameServlet extends HttpServlet {

public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String username = request.getParameter("username");
if (username.equalsIgnoreCase("it")) {
response.getWriter().print("1");
} else {
response.getWriter().print("0");
}
}

}