The first ajax demo and the first ajaxdemo

The first ajax demo and the first ajaxdemo

I turned to two ajax articles and finally wrote a small ajax demo by myself today. I tried the magic of ajax and recorded it as a personal learning code, share it with beginners.

Foreground

<% @ Page language = "java" contentType = "text/html; charset = UTF-8" pageEncoding = "UTF-8" %> <! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> 

A table on the top of the page is mainly used to keep the username and input box displayed in the prompt box.

The main input field is the input field where username is located, the bound event is the onchange event, and the call method is checkUsername.

Create an XMLHttpRequest object




When creating an xmlhttp object, you must be compatible with earlier versions of IE and later versions of IE, Firefox, chrome, and other browsers.

// Create xmlhttpif (window. XMLHttpRequest) {xmlhttp = new XMLHttpRequest;} else {xmlhttp = new ActiveObject ("Microsoft. XMLHTTP ");}



The method for getting the username input value is described in the previous blog post, document. getElementsByName ("username") [0]. value because the id attribute is not defined here, the getElementsByName method is used to obtain the set and then the value of The 0th elements.

Get request




Var url = "checkUsername? Username = "+ username;
When splicing a URL, add the variable value of username in the Request path.
Where

// Url = "checkUsername? Username = "+ username; xmlhttp. open (" get ", url); xmlhttp. send ();

It is a get request or a post request.


Post request


Code

xmlhttp.open("post", "checkUsername", true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("username=" + username);


Callback Function



// Set the callback function xmlhttp. onreadystatechange = function () {// determine the Request status if (xmlhttp. readyState = 4 & xmlhttp. status = 200) {// obtain the returned responseText value if (xmlhttp. responseText = "using") {// specifies the prompt document for username. getElementById ("usernameTips "). innerHTML = username + "is using, please change other. ";} else {document. getElementById ("usernameTips "). innerHTML = "Congratulations. ";}}}

In the callback section, you must first judge the readyState value and status value. Otherwise, unexpected results will be obtained.

The first code does not judge readyState and status. In xmlhttp. onreadystatechange = function () {, then read the xmlhttp. responseText value. Three values are returned at once. After the judgment of readyState and status is added, it will be normal.


Background



package com.ajax;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;/** * Servlet implementation class CheckUsername */@WebServlet("/checkUsername")public class CheckUsername extends HttpServlet {private static final long serialVersionUID = 1L;           /**     * @see HttpServlet#HttpServlet()     */    public CheckUsername() {        super();    }/** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String username = request.getParameter("username");PrintWriter out = response.getWriter();if ("admin".equals(username)){out.write("using");} else {out.write("notUsing");}}/** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}}

The background part is much simpler. You can get the username value through request. getParameter ("username ");

To check whether the username is using.