JQuery 實現頁面無刷新

時間 2019-12-09

原文原文鏈接

對於JQuery實現頁面無刷新的效果，即：應用這個JQuery這個組件，能夠實如今頁面上加載數據庫中的數據信息，可是並無給用戶頁面刷新的感受，這樣既能夠有效的進行數據交互，也能夠不妨礙用戶的其餘操做。（http://itred.cnblogs.com itRed: it_red@sina.com）html

在用JQuery實現頁面無刷新的效果以前，咱們須要掌握和了解一些基礎知識，以方便咱們在進行代碼編寫時更加的駕輕就熟。java

一．異步技術mysql

瀏覽器預設是使用同步的方式發出請求並等待迴應，爲了處理瀏覽器發送數據到服務器的間隙，同時可使用戶對瀏覽器中的Web應用程序進行其餘操做。當服務器處理完請求並送出迴應時，計算機接收到了迴應，再讓瀏覽器說設定的對應動做進行處理。jquery

發送這樣的異步請求，咱們能夠運用AJAX中的XMLHttpRequest對象，經過JavaScript來進行這個對象的建立。說到XMLHttpRequest對象，不一樣的瀏覽器的建立方法不一樣，通常瀏覽器（Firefox，NetScape，Safari，Opera）中就是叫XMLHttpRequest，然而在Internet Explorer中叫Microsoft XMLHTTP 或Msxml2.XMLHTTP的ActiveX組件（IE7除外）。web

二．關於AJAXajax

Ajax是利用瀏覽器與服務器之間的一個通道來完成數據提交或者請求的，具體的流程方法是：頁面的腳本程序經過瀏覽器提供的空間完成數據的提交和請求，並將返回的數據交由JavaScript處理後展示到頁面上。整個過程是由瀏覽器，JavaScript，HTML共同完成的。sql

詳敘以上步驟：數據庫

a. 網頁調用JavaScript程序；json

b. JavaScript 利用瀏覽器提供的XMLHTTP對象向Web服務器發送請求；數組

c. 請求的URL資源處理後返回結果給瀏覽器的XMLHTTP對象；

d. XMLHTTP對象調用實現設置的處理方法；

e. JavaScript方法解析返回的數據，利用返回的數據更新頁面。

三. 案例分析

我認爲最好的學習方式仍是經過案例來學習。以上的知識點僅供瞭解，待完成了一個實際的案例後，天然就明白了這樣的原理性知識。

　　1. DEMO1 入門案例：詳細分析源碼，完全理解數據傳遞和AJAX

　　　　(1) 建立XMLHttpRequest對象：

 1 function createRequest(url){  //建立XMLHttpRequest對象，根據瀏覽器的內核不一樣創建不一樣的對象
 2      http_request=false;
 3      if(window.XMLHttpRequest){
 4        http_request=new XMLHttpRequest();
 5      }else if(window.ActiveXObject){
 6        try{
 7          http_request=new ActiveXObject("Msxml2.XMLHTTP");
 8        }catch(e){
 9            try{
10              http_request=new ActiveXObject("Microsoft.XMLHTTP");
11            }catch(e){ }
12       }
13      }
14    if(!http_request){
15      alert("不能建立XMLHttpRequest對象實例！");
16      return false;
17    }
18        http_request.onreadystatechange=getResult;
19        http_request.open("POST",url,true);
20        http_request.send(null);
21    }

　　　　(2) 頁面佈局：

1 <form action="" name="form1">
2     用戶名:<input name="username" type="text" id="username" size="30"/>
3   <input type="button" value="test" onclick="test()"/>
4   <div id="div_result">

　　　　(3) 客戶端測試函數以及傳值：

 1 function test(){
 2    var username=document.getElementById("username").value;//獲取值
 3    if(username==""){
 4      alert("請輸入用戶名！");
 5      username.focus();//焦點到文本框，提醒用戶輸入
 6      return ;
 7    }else{
 8        createRequest("checkUser.jsp?user="+username);//傳遞用戶輸入的值到服務器端
 9      }
10    //alert(username);
11  }

　　　　(4) 結果處理函數：

 1  function getResult(){
 2     if(http_request.readyState==4){
 3      if(http_request.status==200){
 4        document.getElementById("div_result").innerHTML=http_request.responseText; 
 5        // alert(http_request.responseText);
 6       }else{
 7         document.getElementById("div_result").innerHTML=http_request.responseText;
 8        alert("您所請求的頁面有錯誤！");
 9       }
10     }
11   }

　　　　(5) 服務器端所用數據：

 1  <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2   <% 
 3     String[] userList={"Admin","ad","min","soft"};
 4     String username=request.getParameter("user");
 5     String user=new String(username.getBytes("UTF-8"),"UTF-8");
 6     Arrays.sort(userList);
 7     int result=Arrays.binarySearch(userList,user);
 8     if(result>-1){
 9       out.println("很抱歉，該用戶名已經註冊！");
10     }else{
11       out.println("恭喜您，該用戶名沒有被註冊！");
12     }
13 %>

　　運行結果：

　　2. DEMO2 在DEMO1基礎上，引入jQuery，採用get方式實現以上功能：

　　　　(1) 下載JQuery並添加到本身的項目工程中去；

　　　　(2) 在JQuery中添加一些代碼，實際上就是將咱們在DEMO1中的腳本代碼添加到JQuery中；

$(document).ready(function(){
    $("#b_checkUser").click(function(){
        if($("#username").val()==""){
            alert("請輸入用戶名。");
            $("#username").focus();//讓"用戶名"文本框得到焦點
            return ;
        }else{//已經輸入用戶名時，檢測用戶名是否惟一
            $.get("checkUser.jsp",
                    {user:$("#username").val()},  //將輸入的用戶名做爲參數傳遞
                    function(data){
                        alert(data);//顯示判斷結果
                    });
        }
    });
});

View Code

　　　　(3) 　CheckUser.jsp 和index.jsp中的頁面佈局部分基本不須要修改，直接運行，效果以下：

　　3. DEMO3 在完成了以上的案例後，咱們開始連接數據庫；將其與數據庫中的數據進行比較：

此時，咱們用的ajax是jquery已經封裝好了的，所以，咱們不須要再本身寫代碼來建立XMLHttpRequest對象等。

$(document).ready(function(){
    $("#b_checkUser").click(function(){
        if($("#username").val()==""){
            alert("請輸入用戶名。");
            $("#username").focus();//讓"用戶名"文本框得到焦點
            return ;
        }else{//已經輸入用戶名時，檢測用戶名是否惟一        
            $.ajax({
              url:"UserServlet?username="+$("#username").val()+"",    
              data:null,
              type:"POST",
              dataType:"text",
              success:function(data){
                  alert(data);
              }
            });
        }
    });
});

將代碼添加到jquery中

　　　　建立一個Servlet文件，用於鏈接MySQL數據庫和一些相關的數據操做：

package com.red.ajax;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class UserServlet extends HttpServlet {

    private Connection conn;
    private ResultSet rs;

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
       this.doPost(request, response);
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html");
        response.setCharacterEncoding("UTF-8");
        PrintWriter out = response.getWriter();
        //獲取參數信息
        String username=new String(request.getParameter("username").getBytes("ISO-8859-1"),"UTF-8");
        System.out.println(username);
        try{
            Class.forName("com.mysql.jdbc.Driver");
            String url1="jdbc:mysql://localhost:3306/test";
            conn=DriverManager.getConnection(url1, "root", "123456");
        }catch(Exception e){
            e.printStackTrace();
        }
        //判斷鏈接數據庫
        if(conn!=null){
            try{
                String sql="SELECT * from user where username='"+username+"'";
                Statement stmt=conn.createStatement();                
                rs=stmt.executeQuery(sql);
                if(rs.next()){
                    out.println("用戶名存在！");
                }else{
                    out.println("用戶名不存在，能夠寫入。");
                }
            }catch(Exception e){
                e.printStackTrace();
            }
        }else{
            out.println("數據庫鏈接失敗！");
        }

    }

}

Servlet 代碼

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
    xmlns="http://java.sun.com/xml/ns/javaee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <servlet>
    <servlet-name>UserServlet</servlet-name>
    <servlet-class>com.red.ajax.UserServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>UserServlet</servlet-name>
    <url-pattern>/UserServlet</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

Web.xml的代碼

　　　　MySQL數據庫：

　　　　運行效果：

　　4. DEMO4 頁面實現無刷新加載數據庫數據：採用不一樣的數據顯示。

package com.red.ajax;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;


import com.red.vo.User;

public class UserServlet extends HttpServlet {

    private Connection conn;
    private ResultSet rs;

    public void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        this.doPost(request, response);
    }


    public void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html");
        response.setCharacterEncoding("UTF-8");
        PrintWriter out = response.getWriter();
        String jsonStr="";
        try{
            Class.forName("com.mysql.jdbc.Driver");
            String url1="jdbc:mysql://localhost:3306/test";
            conn=DriverManager.getConnection(url1, "root", "123456");
        }catch(Exception e){
            e.printStackTrace();
        }
        //判斷鏈接數據庫
        if(conn!=null){
            try{
                String sql="SELECT * from user ";
                Statement stmt=conn.createStatement();                
                rs=stmt.executeQuery(sql);
                
                JSONObject userJSON = new JSONObject();
                JSONArray array = new JSONArray();
                
                while(rs.next()){
                    User user=new User();//構建對象

                    user.setId(Integer.parseInt((rs.getString(1))));//將數據經過數據庫給實體對象
                    user.setUsername(rs.getString(2));
                    user.setPassword(rs.getString(3));
                    //將須要的數據進行json格式化處理
                    userJSON.put("username", user.getUsername());
                    userJSON.put("password", user.getPassword());
                    //添加到數組中
                    array.add(userJSON);
                    //轉化爲字符串，方便傳輸
                    jsonStr=array.toString();
                }
                
                out.println(jsonStr);
                System.out.println(jsonStr);//在控制檯打印json字符串，驗證是否符合要求
            }catch(Exception e){
                e.printStackTrace();
            }
        }else{
            out.println("數據庫鏈接失敗！");
        }

    }

}

關鍵代碼

package com.red.vo;

public class User {

    private int id;
    private String username;
    private String password;
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    
    
}

用到的實體bean

　　　　運行效果：

本文檔全部源碼下載

   做者：itRed
   出處：http://itred.cnblogs.com   版權聲明：本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段說明，且在文章明顯位置給出原文連接，不然保留追究法律責任的權利。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。