標籤：代碼 test 建立 dog window XML ext 預設 package
(以下內容非原創，視頻整合得來的)
1.建立XMLHttpRequest對象
2.瀏覽器與伺服器建立串連
3.瀏覽器向伺服器發送請求
4.伺服器向瀏覽器響應請求
下面給出一個執行個體
1.建立一個testget.jsp的檔案，放在web\01_testget\testget.jsp
<%@ page language="java" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <script type="text/javascript" src="./test.js"></script> </head> <body> <form action="" enctype="application/x-www-form-urlencoded"> <input type="button" name="ok" id="ok" value="測試伺服器串連"> </form> </body></html>
2.建立一個js檔案
//當頁面載入完畢之後，執行以下代碼window.onload = function () { document.getElementById("ok").onclick = function () { /* * 1 建立XMLHttpRequest對象 */ var xhr = ajaxFunction(); /* * 4 伺服器向瀏覽器響應請求 * * readyState 屬性工作表示Ajax請求的目前狀態。它的值用數字代表。 0 代表未初始化。 還沒有調用 open 方法 1 代表正在載入。 open 方法已被調用，但 send 方法還沒有被調用 2 代表已載入完畢。send 已被調用。請求已經開始 3 代表互動中。伺服器正在發送響應 4 代表完成。響應發送完畢 常用狀態代碼及其含義： 404 沒找到頁面(not found) 403 禁止訪問(forbidden) 500 內部伺服器出錯(internal service error) 200 一切正常(ok) 304 沒有被修改(not modified)(伺服器返回304狀態，表示源檔案沒有被修改 ) */ xhr.onreadystatechange = function(){ alert(xhr.readyState); //alert(xhr.status); if(xhr.readyState==4){ if(xhr.status==200||xhr.status==304){ var data = xhr.responseText; alert(data); } } } /* * 2 瀏覽器與伺服器建立串連 * * xhr.open(method, url, asynch); * * 與伺服器建立串連使用 * * method：請求類型，類似 “GET”或”POST”的字串。 * * url：路徑字串，指向你所請求的伺服器上的那個檔案。請求路徑 * * asynch：表示請求是否要非同步傳輸，預設值為true(非同步)。 */ xhr.open("GET","/testServlet?c=18",true); /* * 3 瀏覽器向伺服器發送請求 * * send()方法： * * 如果瀏覽器請求的類型為GET類型時，通過send()方法發送請求資料，伺服器接收不到 */ xhr.send("a=6&b=9"); //xhr.send(null); }}function ajaxFunction(){ 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;}
3.建立一個TestServlet來處理這個jsp請求
package com.servlet;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 java.io.IOException;import java.io.PrintWriter;/** * Created by huangyichun on 2016/12/7. */@WebServlet(name = "testServlet",urlPatterns = "/testServlet")public class TestServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("connection..."); System.out.println("a=" + request.getParameter("a")); System.out.println("c=" + request.getParameter("c")); PrintWriter out = response.getWriter(); out.println("get connection server success"); }}
運行結果為：
控制台列印：
connection...
a=null
c=18
瀏覽器快顯視窗:
使用js實現ajax的get請求步驟
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
