Ajax の非同期読み込みと解析の例の共有

この記事では主に、Ajax 非同期読み込みについて、Ajax 非同期読み込みとは何か、Ajax 非同期読み込みの実装方法について詳しく紹介します。興味のある方は参考にしていただければ幸いです。

AJAX (非同期 JavaScript と XML、非同期 JavaScript と XML)。これは新しいプログラミング言語ではなく、既存の標準を使用する新しい方法、サーバーとデータを交換し、ページ全体をリロードせずに Web ページの一部を更新する技術です。
それでは、一緒に AJax の世界に入りましょう。

基本構文

Ajax を学ぶ前に、サーバーと非同期で対話し、ページを更新せずにページ情報を更新するというニーズを明確にする必要があります。 Ajax の使用は実際には非常に簡単で、特定の手順に従うだけです。
•Ajax オブジェクトを作成します (ネイティブは現在のブラウザーの種類を決定する必要があります)
•コールバック関数を設定します (サーバーとの対話が完了した後にトリガーされる関数)
•リクエストを開いて送信します。 (リクエストメソッドによってコードの書き方が若干異なります)
•クライアントはフィードバックデータを取得し、ページを更新します

Ajaxオブジェクトを取得します

ブラウザごとにAjaxのサポートに一貫性がないため、異なる扱いをする必要があります。

コールバック関数を設定する

コールバック関数を設定する目的は、Ajax がサーバーとの対話を完了した後に、取得したデータ情報をページに追加することです。

通常、コールバック処理関数として onreadystatechange 関数を指定します。

Ajax とサーバー間の対話に関連して、コーディング プロセス中に参照できる次のステータス情報があります。

.readystate

読み込みステータスには一般的に使用される値がいくつかあります:
•0: リクエストは初期化されていません
•1: サーバー接続が確立されました
•2: リクエストは受信されました
• 3: リクエストは処理中です
•4: リクエストは完了し、レスポンスの準備ができています

.status

読み込み結果のステータス情報は次のとおりです:
•200: "OK"

•404: "このページは見つかりませんでした。"

インタラクションをオンにしてください

インタラクションについて話しましょう。頭に浮かぶのは両方の側です。これが、ajax クライアントとサーバー間の対話です。したがって、サーバー上のデータの場所を明確にリクエストする必要があります

open(method, url, async)

URL の使用方法はメソッドによって異なるため、明確にしておく必要があります。非同期パラメータに関しては、一般的に、データ量が少ないリクエストには false を使用できますが、サーバーへの過剰な負荷を避けるために、非同期読み込みには true を使用することをお勧めします。

•GETメソッド

このメソッドは非常に簡単で、サーバー上のURLの場所を指定するだけです。ここの赤い部分を理解することが非常に重要です。通常は絶対パスを使用して、サーバー上のリクエストの場所として URL を指定する必要があります。

// 对Servlet来说指定其注解上的位置即可
xmlhttp.open("GET","/Test/servlet/AjaxServlet?userinput="+str.value,true);
  xmlhttp.send();

•POSTメソッド

POSTメソッドを使用する場合、追加の処理が必要です。例:

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 在send方法中指定要传输的参数信息即可
xmlhttp.send("fname=Bill&lname=Gates");

クライアント更新ページ

Ajax の場合は、名前のとおりです。データは XML 形式で送信されます。しかし今のところ、それが唯一の形式ではなくなりました。では、取得したデータを Web ページに更新するにはどうすればよいでしょうか?以下の2通りの方法があります。
•サーバーからの応答が XML でない場合は、responseText 属性を使用します。
document.getElementById("myp").innerHTML=xmlhttp.responseText;

•サーバーからの応答が XML であり、XML オブジェクトとして解析する必要がある場合は、responseXML 属性を使用してください:

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
 {
 txt=txt + x[i].childNodes[0].nodeValue + "<br />";
 }
document.getElementById("myp").innerHTML=txt;

体験例

理解したこれらの基本的な構文を理解したら、実際の開発に簡単に適用できます。この実験をより適切に完了するために、最初に Ajax リクエストを処理するための単純な JavaWeb を作成しました。

サーブレットメソッドを使用

AjaxServlet.java

package one;

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 AjaxServlet
 */
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
 private static final long serialVersionUID = 1L;

 /**
  * @see HttpServlet#HttpServlet()
  */
 public AjaxServlet() {
  super();
  // TODO Auto-generated constructor stub
 }

 /**
  * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
  *  response)
  */
 protected void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  // TODO Auto-generated method stub
  //response.getWriter().append("Served at: ").append(request.getContextPath());
  String userinput = request.getParameter("userinput");
  System.out.println("客户端连接！");
  System.out.println("请求信息为：" + userinput);
  PrintWriter out = response.getWriter();
  if(userinput.equals("") || userinput.length()<6) {
   response.setContentType("text/html;charset=UTF-8");
   response.setCharacterEncoding("UTF-8");
   response.setHeader("Content-Type", "text/html;charset=utf-8");
   out.write("<h3>the length of input string must be more than 6!</h3>");
  }else{
   response.setContentType("text/html;charset=UTF-8");
   response.setCharacterEncoding("UTF-8");
   response.setHeader("Content-Type", "text/html;charset=utf-8");
   out.println("<h3>Correct!</h3>");
  }
  out.close();
 }

 /**
  * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
  *  response)
  */
 protected void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  // TODO Auto-generated method stub
  doGet(request, response);
 }

}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
 <display-name>Test</display-name>
 <welcome-file-list>
 <welcome-file>index.html</welcome-file>
 <welcome-file>index.htm</welcome-file>
 <welcome-file>index.jsp</welcome-file>
 <welcome-file>default.html</welcome-file>
 <welcome-file>default.htm</welcome-file>
 <welcome-file>default.jsp</welcome-file>
 </welcome-file-list>

 <servlet>
 <servlet-name>AjaxServlet</servlet-name>
 <servlet-class>one.AjaxServlet</servlet-class>
 </servlet>
 <servlet-mapping>
 <servlet-name>AjaxServlet</servlet-name>
 <url-pattern>/servlet/AjaxServlet</url-pattern>
 </servlet-mapping>
</web-app>

ajax.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax测试</title>
</head>
<body>
<p>
 <h2>AJAX Test</h2>
 <input type="text" name="userinput" placeholder="用户输入，Ajax方式获得数据" onblur="getResult(this)">
 <br>
 <span id="ajax_result"></span>
 <script>
 getResult = function(str){
  var httpxml;
  if(0 == str.value.length) {
   document.getElementById("ajax_result").innerHTML = "Nothing"; 
  } 
  if (window.XMLHttpRequest) {
   xmlhttp = new XMLHttpRequest();
  }else{
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function(){
   if(4 == xmlhttp.readyState && 200 == xmlhttp.status) {
    document.getElementById("ajax_result").innerHTML = xmlhttp.responseText;
   }
  }

  xmlhttp.open("GET","/Test/servlet/AjaxServlet?userinput="+str.value,true);
  xmlhttp.send();

  }
 </script>
</p>
</body>
</html>

実験結果
•長さが6未満の場合:

•長さは以上である6:

JSP メソッド

receiveParams.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %> 
<% 
  //接收参数 
  String userinput = request.getParameter("userinput"); 
  //控制台输出表单数据看看 
  System.out.println("userinput =" + userinput); 
  //检查code的合法性 
  if (userinput == null || userinput.trim().length() == 0) { 
    out.println("code can&#39;t be null or empty"); 
  } else if (userinput != null && userinput.equals("admin")) { 
    out.println("code can&#39;t be admin"); 
  } else { 
    out.println("OK");
  } 
%>

ajax.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax测试</title>
</head>
<body>
<p>
 <h2>AJAX Test</h2>
 <input type="text" name="userinput" placeholder="用户输入，Ajax方式获得数据" onblur="getResult(this)">
 <br>
 <span id="ajax_result"></span>
 <script>
 getResult = function(str){
  var httpxml;
  if(0 == str.value.length) {
   document.getElementById("ajax_result").innerHTML = "Nothing"; 
  } 
  if (window.XMLHttpRequest) {
   xmlhttp = new XMLHttpRequest();
  }else{
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function(){
   if(4 == xmlhttp.readyState && 200 == xmlhttp.status) {
    document.getElementById("ajax_result").innerHTML = xmlhttp.responseText;
   }
  }

  //xmlhttp.open("GET","/Test/servlet/AjaxServlet?userinput="+str.value,true);
  xmlhttp.open("GET","receiveParams.jsp?userinput="+str.value,true);
  xmlhttp.send();

  }
 </script>
</p>
</body>
</html>

を使用しても同じ効果があります。

JQuery での Ajax

前の紹介は、まだ多くの作業を行う必要がありますが、JQuery はビジネス ロジックの開発に集中するだけで済みます。 jquery の .post メソッド、.get メソッド、または .ajax メソッドを直接使用する方が便利で簡単です。 js コードは次のとおりです。
•.POST メソッド

 $.post("./newProject",{newProjectName:project_name},
   function(data,status){
  //alert("data:" + data + "status:" + status);
  if(status == "success"){
   var nodes = data.getElementsByTagName("project");
   //alert(nodes[0].getAttribute("name"));
   for(var i = 0;i < nodes.length;i ++){
    $("#project_items").append("<option value=\"" + (i+1) + "\">" + nodes[i].getAttribute("name") + "</option>"); 
   }
  }

 })

•.ajax メソッド

 $(function(){
  //按钮单击时执行
  $("#testAjax").click(function(){

    //Ajax调用处理
   $.ajax({
    type: "POST",
    url: "test.php",
    data: "name=garfield&age=18",
    success: function(data){
      $("#myp").html('<h2>'+data+'</h2>');
     }
   });

   });
 });

•.get メソッド

 $(document).ready(function(){
 $("#bt").click(function(){
 $.get("mytest/demo/antzone.txt",function(data,status){
  alert("Data:"+data+"\nStatus:"+status);
 })
 })
})

まとめ

今日のデモは、実際の開発プロセス、サーバー側のユーザー入力データの検証、またはネットワーク トラフィックを削減しながらの即時ページ更新に非常に必要です。また、広く使用されており、ユーザーエクスペリエンスを効果的に向上させることができます。

今回のケースは、アプリケーションに非同期読み込みを追加するための開始点として使用できます。

関連する推奨事項:

Javascript vue.js テーブルのページネーション、データの Ajax 非同期ロード

JavaScript - Ajax 非同期ロード、イベントトリガーの問題

Ajax 非同期ロードされたコンテンツをキャプチャする場合の php

以上がAjax の非同期読み込みと解析の例の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。