ホームページ >ウェブフロントエンド >jsチュートリアル >Ajax は非同期読み込みを実装します
Ajax は非同期読み込みを実装します
- php中世界最好的语言オリジナル
- 2018-04-24 15:12:314564ブラウズ
今回は、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: "このページは見つかりませんでした"
インタラクションをオンにする
インタラクションについて話すとき、頭に浮かぶのは 2 つの当事者です。これが、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メソッドを使用する場合、もう1ステップの処理が必要です。例:
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;
体験例
了解了这些基础语法之后，我们就可以在实际的开发中简单的应用了。为了更好的完成此次实验，我先做了一个简单的JavaWeb，来处理我们的Ajax请求。
使用Servlet方式
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't be null or empty");
} else if (userinput != null && userinput.equals("admin")) {
out.println("code can'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
前面介绍的是原生的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);
})
})
})
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上がAjax は非同期読み込みを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。