Home > Developer > Web Develop
(The following content is not original, video integration)
1. Create a XMLHttpRequest Object
2. The browser and the server establish a connection
3. The browser sends a request to the server
4. The server responds to the request to the browser
An example is given below
1. Create a testget.jsp file and place it in the web\01_testget\testget.jsp
<%@ Page Language="Java"pageencoding="Utf-8"%><!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"><HTML> <Head> <Scripttype= "Text/javascript"src= "./test.js"></Script> </Head> <Body> <formAction=""enctype= "application/x-www-form-urlencoded"> <inputtype= "button"name= "OK"ID= "OK"value= "Test Server connection"> </form> </Body></HTML>
2. Create a JS file
When the page has finished loading, execute the following code window.onload = function () {document.getElementById ("OK"). onclick = function () {/* * 1 Create XMLHttpRequest Object */var xhr = Ajaxfunction (); /* * 4 server responds request to Browser * * The ReadyState property represents the current state of the AJAX request. Its value is represented by a number. 0 represents uninitialized. The Open Method 1 is not yet called to indicate that it is loading. The open method has been called, but the Send method has not yet been called 2 to indicate that the load is complete. Send has been called. The request has started 3 for the interaction. The server is sending a response of 4 on behalf of completion. The response has been sent. Common status codes and their meanings: 404 no Page found (not found) 403 Forbidden (Forbidden) 500 Internal server error (internal service ER ROR) 2001 cut OK (OK) 304 not modified (not modified) (the server returns 304 status, indicating that the source file has not been modified) */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 BrowserEstablish a connection to the server * * Xhr.open (method, URL, asynch); * * Connect with Server using * method: Request type, string similar to "GET" or "POST". * URL: A path string that points to the file on the server you requested. Request Path * * Asynch: Indicates whether the request is to be transmitted asynchronously, the default value is True (async). */Xhr.open ("GET", "/testservlet?c=18", true); /* * 3 The browser sends a request to the server * * Send () method: * * If the browser request type is a get type, send the request data through the Send () method, the server Cannot receive */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. Create a Testservlet to process this JSP request
PackageCom.servlet;Importjavax.servlet.ServletException;ImportJavax.servlet.annotation.WebServlet;ImportJavax.servlet.http.HttpServlet;Importjavax.servlet.http.HttpServletRequest;ImportJavax.servlet.http.HttpServletResponse;Importjava.io.IOException;ImportJava.io.PrintWriter;/*** Created by Huangyichun on 2016/12/7.*/@WebServlet (Name= "Testservlet", Urlpatterns = "/testservlet") Public classTestservletextendsHttpServlet {protected voidDoPost (HttpServletRequest request, httpservletresponse response)throwsservletexception, IOException {}protected voidDoget (HttpServletRequest request, httpservletresponse response)throwsservletexception, 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"); }}
The result of the operation is:
Console printing:
Connection ...
A=null
C=18
Browser pop-up window:
Using JS to implement AJAX GET request steps
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
