day16_ajax学習ノート

114296 ワード

一、Ajaxとは
Ajax(Asynchronous JavaScript And XML):非同期JavaScriptおよびXMLを指す. は、JavaScript、XML、HTML、CSSの新しい使い方に基づいて、より高速でインタラクティブなWebアプリケーションを作成するための技術です.
Ajax:ローカルページのみをリフレッシュするテクノロジー.以下の技術が含まれています.
JavaScript:ローカルのWebページを更新します.
XML:要求データと応答データのカプセル化に一般的に使用されます. XMLHttpRequest ： ( )。
CSS:ページスタイルを美化します.
非同期:要求を送信した後、戻り結果を待たずにコールバック関数で結果を処理します.
JavaScriptのXMLHttpRequestオブジェクトはAjaxテクノロジー全体の核心であり、要求を非同期で送信する能力を提供します.
異なるブラウザ、さらには同じブラウザの異なるバージョンでは、オブジェクトを取得する方法が異なります.

var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

： open() このメソッドには3つのパラメータがあり、「get|post」、「url?name=tom」、「 ：|false」、デフォルトはtrueです.パラメータまたはnullを持つことができる要求を送信します. setRequestHeader() 要求メッセージヘッダを設定します.true readyState タイプはshort、読取り専用 responseText タイプはString、読取り専用 responseXML タイプはDocument、読取り専用(一般的には使用しない) status タイプはshort、読取り専用 ： onreadystatechange
二、常用方法
Open(method,URL,async) サーバとの接続を確立する methodパラメータ:要求のHTTPメソッドを指し、典型的な値はGETまたはPOST URLパラメータ:要求のアドレス asyncパラメータ:非同期要求を使用するかどうかを指し、その値は ：またはfalseであり、デフォルト値はtrueであり、一般的にこのパラメータはと書かない
send(content) 送信要求 contentパラメータ:要求のパラメータを指す
setRequestHeader(header,value) 設定要求のヘッダ情報三、常用属性
onreadystatechange:コールバック関数を指定
readyState:XMLHttpRequestのステータス情報(クライアント:ブラウザ)
レディステータスコード
説明
0
XMLHttpRequestオブジェクトは初期化が完了していません.つまり、作成したばかりです.
1
XMLHttpRequestオブジェクトは、openメソッドが呼び出されたがsendメソッドが呼び出されていないというリクエストの送信を開始します.要求はまだ出ていない.
2
XMLHttpRequestオブジェクトのリクエスト送信が完了しました.すなわち、sendメソッドが呼び出され、データがサーバに送信されましたが、応答はありません.
3
XMLHttpRequestオブジェクトは応答の読み取りを開始し、まだ終了していません.すなわち、すべての応答メッセージヘッダが受信されていますが、本文はまだ完全に受信されていません.
4
XMLHttpRequestオブジェクトの読み込み応答が終了しました.つまり、trueです.

status:HTTPのステータスコード(サーバ側)
ステータスコード
説明 200
400
要求されたリソースが見つかりません
403
アクセス権なし
500
サーバ内部エラー

responseText:応答を得るテキストコンテンツresponseXML:応答を取得したXMLドキュメントオブジェクトdocumednt 注記: サンプルコードは次のとおりです.

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${ pageContext.request.contextPath }/js/myJS.js">script>
<title>Insert title heretitle>
head>
<script type="text/javascript">
// 1、  XMLHttpRequest  
var req = getXMLHttpRequest();
// 4、      
        req.onreadystatechange = function() {
// alert(req.readyState); //            
if (req.readyState == 4) {
// alert(req.status); //            
if (req.status == 200) { //            
                    alert(req.responseText);
                }
            }
        }
// 2、      
        req.open("get", "${ pageContext.request.contextPath }/servlet/servletDemo1");
// 3、    
        req.send(null);
script>
<body>
body>
html>

Ajaxを使用して、ユーザー名が存在するかどうかを確認する手順は、次のとおりです.
テキストボックスを使用する 4， 200，。 Ajax技術を用いて非同期インタラクションaを実現)ユーザ名aを取得)XMLHttpRequestオブジェクトbを作成)応答結果を処理し、コールバック関数を作成し、応答状態に応じてページcを動的に更新)接続dを確立する)送信要求サンプルコードは次のとおりです.

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${ pageContext.request.contextPath }/js/myJS.js">script>
<title>Insert title heretitle>
<script type="text/javascript">
function ckName() {
//        
var name = document.getElementsByTagName("input")[0];
//   XMLHttpRequest  
var xhr = getXMLHttpRequest();
//       ，      ，            
            xhr.onreadystatechange = function() {
if (xhr.readyState == 4) { //            
if (xhr.status == 200) { //            
// alert(xhr.responseText); //       
var msg = document.getElementById("msg");
if (xhr.responseText == "true") {
// msg.innerText = "      ";
                            msg.innerHTML = "       ";
                        } else {
                            msg.innerHTML = "        ";
                        }
                    }
                }
            }           
//       
            xhr.open("get", "${ pageContext.request.contextPath }/servlet/ckNameServlet?name=" + name.value + "&time=" + new Date().getTime());
//     
            xhr.send(null);
        }
script>
head>
<body>
       ：<input type="text" name="userName" onblur="ckName()"/><span id="msg" >span>br>
      ：<input type="password" name="pwd" />br>
body>
html>

ユーザー名に改善されたコードバージョンがあるかどうかを確認します(この方法では、Webページのラベルがきれいになり、呼び出しイベントが感じられなくなります):

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${ pageContext.request.contextPath }/js/myJS.js">script>
<title>Insert title heretitle>
<script type="text/javascript">
window.onload = function() {
var nameElement = document.getElementsByName("userName")[0];
            nameElement.onblur = function() {
var name = this.value; // this   nameElement
//   XMLHttpRequest  
var xhr = getXMLHttpRequest();
//       ，      ，            
                xhr.onreadystatechange = function() {
if (xhr.readyState == 4) { //            
if (xhr.status == 200) { //            
// alert(xhr.responseText); //       
var msg = document.getElementById("msg");
if (xhr.responseText == "true") {
// msg.innerText = "      ";
                                msg.innerHTML = "       ";
                            } else {
                                msg.innerHTML = "        ";
                            }
                        }
                    }
                }           
//       
                xhr.open("get", "${pageContext.request.contextPath }/servlet/ckNameServlet?name=" + name + "&time=" + new Date().getTime());
//     
                xhr.send(null);
            }
        }
script>
head>
<body>
       ：<input type="text" name="userName" /><span id="msg" >span>br>
      ：<input type="password" name="pwd" />br>
body>
html>

四、ケース1:メールボックスの検証を実現する
my.js

//   XMLHttpRequest  
function getXMLHttpRequest() {
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
return xmlhttp;
}

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/my.js">script>
<head>
<title>bookStore    title>
<%--  css --%>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script type="text/javascript">
function changeImage() {
document.getElementById("img").src = "${pageContext.request.contextPath}/imageCode?time="
                + new Date().getTime();
    }
//         
function ckEmail() {
//       
var email = document.getElementByName("email")[0];
//   XMLHttpRequest  
var xhr = getXMLHttpRequest();
//       ，      ，            
        xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
                    alert(xhr.responseText); //       
//      font  
var font = document.getElementsByTagName("font")[0];
if (xhr.responseText == "true") {
                        font.innerHTML = "       ";
                        font.style.color = "red";
                    } else {
                        font.innerHTML = "       ";
                        font.style.color = "green";
                    }
                }
            }
        }
//       
        xhr.open("get", "${pageContext.request.contextPath}/servlet/ckEmailServlet?email=" + email.value + "&time=" + new Date().getTime());
//     
        xhr.send(null);
    }
script>
head>
<body class="main">
<%@include file="head.jsp"%>
<%--    --%>
<%@include file="menu_search.jsp"%><%--         --%>
<div id="divcontent">
<form action="${pageContext.request.contextPath}/register.jsp"
method="post">
<table width="850px" border="0" cellspacing="0">
<tr>
<td style="padding:30px">
<h1>     h1>
<table width="70%" border="0" cellspacing="2" class="upline">
<tr>
<td style="text-align:right; width:20%">    ：td>
<td style="width:40%">
<input type="text" class="textinput"
name="email" onblur="ckEmail()"/>td>
<td><font color="#999999">          font>td>
tr>
.......
body>
html>

CkEmailServlet.java

package com.itheima.web.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CkEmailServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
        PrintWriter out = response.getWriter();
        String email = request.getParameter("email");
if ("[email protected]".equals(email)) {
            out.print(true);
        } else {
            out.print(false);
        }
    }
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
        doGet(request, response);
    }
}

五、ケース2:検索ボックスにデータを表示する
表示データを記述するコンテナdiv ajax応答データの実装//XMLHttpRequestオブジェクトの作成//イベントコールバック関数による応答結果の処理//サーバ接続の作成//要求の送信サンプルコードは次のとおりです.

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/my.js">
script>
<script type="text/javascript">
window.onload = function() {
//        
var searchElement = document.getElementById("name");
//    div    
var div = document.getElementById("context1");
//             
        searchElement.onkeyup = function() { 
//         
var name = this.value;
//           ，   div  ，          
if (name == "") {
                div.style.display = "none";
return;
            }
//   XMLHttpRequest  
var xhr = getXMLHttpRequest();
//     
            xhr.onreadystatechange = function() {
if (xhr.readyState == 4) { //           
if (xhr.status == 200) { //          
var str = xhr.responseText; //           
var ss = str.split(","); //      1001,1002,1003     
var childDivs = "";
//         div 
for (var i = 0; i < ss.length; i++) {
                            childDivs += "" 
                            + ss[i] + "
"; //             div 
                        }
                        div.innerHTML = childDivs; //     div（childDivs）     div 
                        div.style.display = "block"; //      
                    }
                }
            }
            xhr.open("get", "${ pageContext.request.contextPath}/servlet/searchBookAJAXServlet?name=" + name + "&time=" + new Date().getTime());
            xhr.send(null);
        }
    }
//       div ，     
function changeBackground_over(div) {
        div.style.backgroundColor = "gray"; // backgroundColor js      ，background-color css      
    }
//      div ，     
function changeBackground_out(div) {
        div.style.backgroundColor = "";
    }
//         
function writeText(div) {
//       
var searchElement = document.getElementById("name");
//  div           
        searchElement.value = div.innerHTML; 
//   div(context1)  
        div.parentNode.style.display = "none"; 
    }
script>
<div id="divmenu">
<a href="${pageContext.request.contextPath}/showProductByPage?category=  ">  a>
<a href="${pageContext.request.contextPath}/showProductByPage?category=  ">  a>
<a href="${pageContext.request.contextPath}/showProductByPage?category=   ">   a>
<a href="${pageContext.request.contextPath}/showProductByPage?category=  ">  a>
<a href="${pageContext.request.contextPath}/showProductByPage?category=  ">  a>
<a href="${pageContext.request.contextPath}/showProductByPage?category=  ">  a>
<a href="${pageContext.request.contextPath}/showProductByPage?category=  ">  a>
<a href="${pageContext.request.contextPath}/showProductByPage?category=  ">  a>
<a href="${pageContext.request.contextPath}/showProductByPage?category=  ">  a>
<a href="${pageContext.request.contextPath}/showProductByPage?category=  ">  a>
<a href="${pageContext.request.contextPath}/showProductByPage?category=  ">  a>
<a href="${pageContext.request.contextPath}/showProductByPage?category=  ">  a>
<a href="${pageContext.request.contextPath}/showProductByPage?category=  ">  a>
<a href="${pageContext.request.contextPath}/showProductByPage?category=    ">    a>
<a href="${pageContext.request.contextPath}/showProductByPage" style="color:#FFFF00">      a>
div>
<div id="divsearch">
<form action="${pageContext.request.contextPath}/findProductBySearch"
method="post">
<table width="100%" border="0" cellspacing="0" >
<tr>
<td style="text-align:right; padding-right:220px">
                Search 
<input type="text" name="name" class="inputtable" 
id="name" autocomplete="on"/> 
<input type="image" src="images/serchbutton.gif"
border="0" style="margin-bottom:-4px">
td>
tr>
table>
form>
div>
<div id="context1" style="display:block; border:1px solid red; background-color:white; 
    width:128px; position:absolute; left:860px; top:135px;">
div>

六、json対象の学習
サンプルコードは以下の通りである:json.jsp

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title heretitle>
head>
<body>
<script type="text/javascript">
/* json     java      ，java      ，javascript             。
        // java      
        public class Person() {
            private String name;
            private int age;
            public void show() {
            }
        }
        */
/*
        // js      ，     ，    ，       ，      
        function Person() {
            var name = "tom"; //         
            this.age = 10; //         
            this.show = function() {
                alert(name);
            }
        }
        var p = new Person();
        document.write(p.name);
        document.write(p.age);
        p.show();
        */
var pp = [100, true, 12.34]; //       
var pp = { name:"tom", age:18, 
show:function() {
                alert("hello json");
            } 
        }; //     json  
document.write(pp.name);
document.write(pp.age);
        pp.show();
var ppp = [ { name:"tom", age:18 }, { name:"lune", age:25 } ];
document.write(ppp[1].name)
script>
body>
html>

JsonTest.java

package com.itheima.json;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.junit.Test;
import com.itheima.domain.Book;
import com.itheima.util.C3P0Util;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import net.sf.json.JsonConfig;
public class JsonTest {
    @Test //    JSONObject        
public void test1() {
        Book b = new Book();
        b.setId("10001");
        b.setName("   ");
        b.setPnum(20);
        String s = JSONObject.fromObject(b).toString();
        System.out.println(s);
    }
    @Test //    JSONArray     List    
public void test2() throws SQLException {
        List list = new ArrayList();
        Book b1 = new Book();
        b1.setId("10001");
        b1.setName("   ");
        b1.setPnum(20);
        Book b2 = new Book();
        b2.setId("10002");
        b2.setName("    ");
        b2.setPnum(30);
        Book b3 = new Book();
        b3.setId("10003");
        b3.setName("   ");
        b3.setPnum(40);
list.add(b1);
list.add(b2);
list.add(b3);
        String s = JSONArray.fromObject(list).toString();
        System.out.println(s);
    }
    @Test //    JSONArray     List     +    JsonConfig           
public void test3() throws SQLException {
        QueryRunner qr = new QueryRunner(C3P0Util.getDataSource());
        List list = qr.query("select * from book", new BeanListHandler(Book.class));
        JsonConfig jc = new JsonConfig();
        jc.setExcludes(new String[]{"pnum", "description", "category", "id"});
        String s = JSONArray.fromObject(list, jc).toString();
        System.out.println(s);
    }
}

転載先:https://juejin.im/post/5b0e7106f265da09120082b2

一、一度書けばいいものがある--UDPネットワーク通信類テンプレート

点を押すと水のうねり効果がトリガーされます