The first ajax demo and the first ajaxdemo

Source: Internet
Author: User

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.




Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.