XMLHttpRequestオブジェクトを使用してリクエストを送信する基本手順は、次のとおりです.

6495 ワード

JavaScript アプリケーションサーバ Ajax servlet スクリプト

XMLHttpRequestオブジェクトを使用してリクエストを送信するには、次の手順に従います.XMLHttpRequestオブジェクトインスタンスの参照を得るには、新しいインスタンスを作成したり、XMLHttpRequestインスタンスを含む変数にアクセスしたりすることができます.　　2. XMLHttpRequestオブジェクトに、XMLHttpRequestオブジェクトのステータスの変更を処理する関数を教えます.このため、オブジェクトのonreadystatechangeプロパティをJavaScript関数へのポインタに設定します.　　3. 要求のプロパティを指定します.XMLHttpRequestオブジェクトのopen()メソッドは、発行するリクエストを指定します.Open()メソッドは、使用するメソッド(通常はGETまたはPOST)を示す列と、ターゲットリソースのURLを示す列と、要求が非同期であるかどうかを示すBoolean値と、4.サーバに要求を送信する.XMLfttpRequestオブジェクトのsend()メソッドは、指定されたターゲットリソースに要求を送信する.send()メソッドは、通常、シリアルまたはDOMオブジェクトのパラメータを受け入れます.このパラメータは要求体の一部として宛先URLに送信される.send()メソッドにパラメータを指定する場合は、open()で指定したメソッドがPOSTであることを確認します.リクエストボディの一部としてデータが送信されない場合はnullを使用します.これらの手順は直感的です.XMLHttpRequestオブジェクトのインスタンスが必要です.ステータスが変化した場合はどうすればいいか、リクエストをどこに送信するか、リクエストをどのように送信するかを教え、最後にXMLttpRequestにリクエストを送信するように指導する必要があります.しかし、CやC++をよく知らない限り、関数ポインタがわからない場合があります(function pointer)とはどういう意味ですか.関数ポインタは他の変数と似ていますが、列、数字、さらにはオブジェクトインスタンスのようなデータではなく、関数を指しています.JavaScriptでは、すべての関数がメモリにアドレスを付けられており、関数名で参照できます.これにより、関数ポインタをパラメータを他の関数に渡すか、オブジェクトのプロパティに関数ポインタを格納します.XMLHttpRequestオブジェクトの場合、onreadystatechangeプロパティにはコールバック関数のポインタが格納されます.このコールバック関数は、XMLHttpRequestオブジェクトの内部状態が変化すると呼び出されます.非同期呼び出しが行われるとリクエストが発行され、スクリプトは直ちに処理を続行(スクリプトが作業を続ける前に、リクエストの終了を待つ必要はありません).リクエストが発行されると、オブジェクトのreadyStateプロパティはいくつか変更されます.任意のステータスに対していくつかの処理を行うことができますが、最も興味のあるステータスは、サーバ応答の終了時のステータスかもしれません.コールバック関数を設定することで、XMLHttpRequestオブジェクトに効果的に伝えることができます.「応答が来たら、この関数を呼び出して応答を処理します.」
例:単純なフォームコミットです.フォームデータコミット後、現在のページにコミットされたデータ情報が表示されます.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax     （    ）</title>
<script type="text/javascript">
	var xhr;
	var outMsg = "";
	
	//-----------------  XMLHttpRequest  ---------------------------
	function createXMLHttpRequest() {
		try {
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
	    }catch(e) {
			try {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}catch(e) {
				try {
					xhr = new XMLHttpRequest();
				}catch(e) {
				}
			}
		}
	}
	
	//-------------------------------------------------------------
	function createQUeryString() {
		var userName = document.getElementById("userName").value;
		var queryString = "userName="+userName;
		return queryString;
	}
	
	function doRequest() {
		createXMLHttpRequest();//  XMLHttpRequest  
		var queryString = "HelloAjaxJava1?";
		queryString = queryString+createQUeryString();
		xhr.onreadystatechange = handleStateChange;//       ，                      
		xhr.open("POST",queryString,true);//         
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
		xhr.send(null);
	}

	
	function handleStateChange() {
		if(xhr.readyState==4) {//4          
			if(xhr.status==200) {//HTTP    
				parseResults();
			}
		}
	}
	
	function parseResults() {
		var responseDiv = document.getElementById("serverResponse");//  Div     
		if(responseDiv.hasChildNodes()) {
			responseDiv.removeChild(responseDiv.childNodes[0]);
		}
		var responseText  = document.createTextNode(xhr.responseText);
		responseDiv.appendChild(responseText);
	}
</script>
</head>
<body>
	<h1>Ajax     （    ）</h1>
	<hr><br>
	<form>
		Choose your name:<input type="text" id="userName"/>
		<br>
		<br>
		<input type="reset" value="  ">
		<input type="button" value="  " id="button1" onclick="javascript:doRequest()">
	</form>
	<br>
	<h2>        </h2>
	<div id="serverResponse"></div>
</body>
</html>

サーバ側コード:

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 HelloAjaxJava1 extends HttpServlet {
	
	protected void processRequest(HttpServletRequest request,HttpServletResponse response,String method)
	throws ServletException,IOException {
		response.setContentType("text/html");
		//         
		String userName = request.getParameter("userName");
		//      
		String responseText = "userName:"+userName;
		PrintWriter out = response.getWriter();
		out.println(responseText);
		out.close();
	}

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		super.doGet(request, response);
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		processRequest(request,response,"POST");
	}
	
}

プロファイルweb.xmlコード:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" 
	xmlns="http://java.sun.com/xml/ns/j2ee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
	http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
         <servlet>
		<servlet-name>hello</servlet-name>
		<servlet-class>HelloAjaxJava1</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>hello</servlet-name>
		<url-pattern>/HelloAjaxJava1</url-pattern>
	</servlet-mapping>
</web-app>

画像とマルチメディアの使用

iOS13.2以降でCoreNFCが動かない！っていう現象が発生したので検証してみました。