真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網站制作重慶分公司

使用ajax怎么實現(xiàn)一個實時驗證功能

本篇文章給大家分享的是有關使用ajax怎么實現(xiàn)一個實時驗證功能,小編覺得挺實用的,因此分享給大家學習,希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。

目前成都創(chuàng)新互聯(lián)已為上1000+的企業(yè)提供了網站建設、域名、雅安服務器托管、網站托管、服務器托管、企業(yè)網站設計、沙灣網站維護等服務,公司將堅持客戶導向、應用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。

什么是ajax

Ajax 即“Asynchronous Javascript And XML”(異步 JavaScript 和 XML),是指一種創(chuàng)建交互式網頁應用的網頁開發(fā)技術。

Ajax = 異步 JavaScript 和 XML(標準通用標記語言的子集)。

Ajax 是一種用于創(chuàng)建快速動態(tài)網頁的技術。

Ajax 是一種在無需重新加載整個網頁的情況下,能夠更新部分網頁的技術。

 通過在后臺與服務器進行少量數據交換,Ajax 可以使網頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。

傳統(tǒng)的網頁(不使用 Ajax)如果需要更新內容,必須重載整個網頁頁面。

這是百度對它的定義,足夠詳細。
 值得補充的一點是對異步的理解,異步是相對于同步來說的,在這里他們指的是服務器和瀏覽器的交互模式。

 同步,每次請求發(fā)出之后,用戶操作即被阻塞,必須要求返回響應后繼續(xù)操作。而異步指的是發(fā)出請求后,用戶無需等待響應,一切由ajax來實現(xiàn),無需進行刷新網頁就可以局部更新數據。提高了倆端的溝通效率。

來個小demo

做一個無刷新驗證表單的demo,在對話框中輸入用戶名,在后臺進行驗證,使用ajax技術。

項目結構,使用maven構建

login.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>


  login

歡迎登陸:

用戶名:
    
    
         

main.js

alert("use ajax!")
//創(chuàng)建XMLHttpRequest對象,在不同瀏覽器
function createXMLHTTP() {
  if(window.XMLHttpRequest){
    // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
    xmlhttp = new XMLHttpRequest();
  }else {
    // IE6, IE5 瀏覽器執(zhí)行代碼
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  return xmlhttp;
}
function CallServer() {
  var username = document.getElementById("username").value;
  // 判斷為空
  if ((username == null) || (username == "")) return;
  var xmlhttp = createXMLHTTP();
  // 構建請求url
  var url = "/loginServlet"+"?"+"username="+username;
  //狀態(tài)碼改變調用事件
  xmlhttp.onreadystatechange = function () {
    //正常返回,替換msg內容
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
      document.getElementById("msg").innerHTML = xmlhttp.responseText;
    }
  }
  //異步提交請求
  xmlhttp.open("GET",url,true);
  //發(fā)送請求
  xmlhttp.send();
}

web.xml



 Archetype Created Web Application
 
  index.jsp
 
 
  loginServlet
  com.lbw.servlet.loginServlet
 
 
  loginServlet
  /loginServlet
 

loginServlet.java

package com.lbw.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;
/**
 * 后端使用Servlet處理請求
 */
public class loginServlet extends HttpServlet {
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //設置編碼和響應頭
    request.setCharacterEncoding("UTF-8");
    response.setContentType("text/xml;charset=UTF-8");
    response.setHeader("Cache-Control", "no-cache");
    //獲取參數
    String username = request.getParameter("username");
    String msg = "";
    if("lbw".equals(username)){
      msg = "名稱正確";
    }else {
      msg = "名稱錯誤";
    }
    PrintWriter out = response.getWriter();
    out.println(msg);
  }
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    doPost(request,response);
  }
}

開始測試

輸入localhost:8888/login.jsp,彈出窗口

 代表在jsp中引入js成功

在輸入框輸入測試數據

 由Servlet中邏輯決定,返回錯誤信息

 由Servlet中邏輯決定,返回成功信息

由此,初步實現(xiàn)了ajax異步請求,達到了實時驗證的要求

一些小細節(jié)

1.在使用maven構建項目,注意Project Structure -> Facets,這里設置web.xml和webapp的路徑,idea會使用到

2.在引入js時,注意使用相對路徑的方式來進行映入,并且用到EL表達式要開啟isELIgnored="false"·`避免沒有解析。

以上就是使用ajax怎么實現(xiàn)一個實時驗證功能,小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。


網站標題:使用ajax怎么實現(xiàn)一個實時驗證功能
文章轉載:http://weahome.cn/article/jsddee.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部