この記事では、主に ajax のバックグラウンド定義を紹介し、また、ajax の個人的な使用法についてもまとめています。それでは、この記事を一緒に見てみましょう
この記事には次の内容が含まれています:
とはAJAXの背景
AJAX
AJAXの原理
AJAXの定義
AJAXの開発手順
簡単なデモ
AJAX テクノロジーの長所と短所
AJAX とは何ですか?
Wikipedia を参照すると、次のような一節があります。 AJAX は「Asynchronous JavaScript and XML」（非同期 JavaScript および XML テクノロジー）の略で、複数のテクノロジーを組み合わせたブラウザー側の Web 開発テクノロジーのセットを指します。
ということで、AJAX=JavaScript+XML という全体的な印象ができました。私たちは皆、js と xml についてよく知っているはずです。
AJAX 登場の背景
当社の開発過程を振り返ると、当初の Servlet+JSP+JavaBean による開発プロセスでは、Web アプリケーションでは Web ページ上のフォーム (Form) に入力して送信することでリクエストを送信することができました。 Web サーバーに送信します (リクエスト)。サーバーはリクエストを受信し、受信したフォームを処理し、応答 (Response) を返します。ブラウザが応答を取得すると、解析を通じてブラウザ上にページが表示され、ユーザーとサーバー間の対話が完了します。
しかし、このモデルにはいくつか問題があります。次の例を見てください。ブラウザにユーザーのログイン インターフェイスが表示され、ユーザーがユーザー名、パスワード、検証コードを入力すると、データがサーバーに送信され、サーブレットでリクエストが処理されたとします。次は何ですか？
エラーメッセージを含むページと応答をブラウザに返します。このような開発プロセスを使用すると、ビジネスの実装がどれほど完璧であっても、次のような固有の問題が発生します。
まず第一に、帯域幅の無駄。 エラーメッセージが表示される部分を除き、2 つのページの他の要素はすべて同じです。
第二に、ユーザーエクスペリエンスが劣悪です。 ユーザーがフォームに誤って間違ったユーザー名を入力した場合、一定時間後にページが更新され、ユーザー名が間違っていることを示すメッセージが表示されます。とパスワードは非常に不親切です。ユーザーのインターネット速度が比較的遅い場合、ユーザー エクスペリエンスはさらに悪化します。
では、この問題を解決する方法はあるのでしょうか？つまり、ユーザーがユーザー名を入力するだけでフィードバックを得ることができるのでしょうか?
AJAX の一般的なアイデア
js の XMLHttpRequest オブジェクトが登場する前には方法はありませんでしたが、登場後、先人たちはより良い解決策を考え出しました。つまり、XMLHttpRequest オブジェクトをエージェントとして使用して、リクエストをサーバーに送信し、それを使用してサーバーから返されたデータを受信します。これにより、ページにジャンプすることなくデータのやり取りを完了でき、必要なデータを少量しか送信する必要がないため、ネットワーク速度の要件が満たされます。も低いです。
しかし、まだ解決されていない問題が 2 つあります:
1. サーバーから返されたデータに基づいてページを動的に変更し、ユーザーとのインタラクションを実現するにはどうすればよいでしょうか。
2. サーバーから返信されるデータ形式をどのように指定すれば、より汎用性が高く、送信量をできるだけ減らすことができるでしょうか？
1 について: 前任者が JavaScript を使用することを選択した理由は 2 つあると個人的には理解しています。まず、JavaScript は十分に普及しており、ほとんどすべての主流ブラウザーが JavaScript をサポートしています。 Web ページのコンテンツを動的に変更します。
2 について: 先人たちは XML を選択しました。おそらく、その構文が十分に厳密で、セマンティクスが明確で、より汎用性が高いためだと思います。ただし、送信されるデータ形式は AJAX の使用に影響を与えないと思います。たとえば、サーバー側とブラウザ側の開発者が形式に同意している限り、送信するデータを減らすために Json を送信することを選択したり、意味のある文字列を送信することを選択したりすることもできます。
AJAX の定義
これで、AJAX を定義できます。 AJAX は、高速で動的な Web ページを作成するためのテクノロジーです。 AJAX を使用すると、バックグラウンドでサーバーと少量のデータを交換することで、Web ページを非同期に更新できます。これは、ページ全体を再読み込みしなくても、Web ページの一部を更新できることを意味します。
AJAX テクノロジー開発のステップ
上記の紹介を通じて、従来のリソースの無駄の問題を解決するためのアイデアがわかりました。次に、それを実装する方法を見てみましょう。
AJAX の実装については、W3School の AJAX 入門をご覧ください
以下は、AJAX 実装手順の簡単な要約です:
1. XMLHttpRequest オブジェクトが必要です。 (下位バージョンの IE ブラウザの多くの標準が主流の標準と互換性がないことは誰もが知っています。残念ながら、XMLHttpRequest オブジェクトについても同じことが当てはまります...)
したがって、XMLHttpRequest オブジェクトの取得プロセスは次のようになります。
var httpXml = null; if(window.XMLHttpRequest){
httpXml = new XMLHttpRequest(); //针对现代浏览器，IE7及以上版本
}else if(window.ActiveXObject){
httpXml = new ActiveXObject("Microsoft.XMLHTTP"); //针对IE5,IE6版本
}2. この XMLHttpRequest オブジェクトに対して実行する操作を (コールバック経由で) 登録し、返されたリクエスト ステータスと HTTP ステータス コードに基づいてメッセージのステータスを確認し、どのような状況でどの操作を実行するかを決定する必要があります。 。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトの AJAX 開発マニュアル コラムにアクセスして学習してください)
プロセスは次のようなものです:
//为XMLHttpRequest对象的onreadystatechange属性注册
httpXml.onreadystatechange=function(){
// 在回调函数中根据请求状态与返回的HTTP状态码来选择相应的操作处理数据
if(httpXml.readyState==4&&httpXml.status==200){
alert(httpXml.responseText);
}
};
3. リクエスト送信用のパラメーターを設定する必要があります。
プロセスは次のとおりです:
//函数原型：open(method,url,async,username,password) //method --->请求方式:GET,POST或HEAD //url --->请求的地址 GET提交方式可以在后面加上参数 //async --->请求是否异步执行，true---异步，false---同步 默认为true
//username,password --->可选，为url所需的授权提供认证资格。如果不为空，会覆盖掉url中指定的资格
httpXml.open("GET","http://localhost:8080/aaa/MyServlet",true);4.実際にリクエストを送信してみます。
// 参数为请求参数,POST提交内容格式为--->"username=taffy&password=666",GET为----->空
// 注意：若为POST请求方式，还需设置一个http请求头(应该位于open之后,send之前)
// 即 setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded"); 标志form表单的enctype属性
httpXml.send(null);
这样，一个简单的AJAX过程就完成了。
一些没有介绍的小知识点：
//XMLHttpRequest属性
responseText 得到返回的文本信息
responseXML 得到返回的XML信息 //XMLHttpRequest的方法
getResponseHeader() 得到指定头部信息 getAllResponseHeaders() 将 HTTP响应头部作为未解析的字符串返回 //XMLHttpRequest的控制方法
abort() 取消当前响应，关闭连接，将readyState置0 下面是我做的一个简单的Demo：
<!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>Insert title here</title><script type="text/javascript">
<!-->onload:页面加载完成后调用 <-->
window.onload = function(){
var user = document.getElementById("my_user"); //获取XMLHttpRequest对象
var httpXml = null; if(window.XMLHttpRequest){
httpXml = new XMLHttpRequest(); //针对现代浏览器，IE7及以上版本}else if(window.ActiveXObject){
httpXml = new ActiveXObject("Microsoft.XMLHTTP"); //针对IE5,IE6版本
}
user.onblur=function(){
httpXml.onreadystatechange=function(){
if(httpXml.readyState==4&&httpXml.status==200){ if(httpXml.responseText!="true"){
alert("用户名不存在");
}
}
};
httpXml.open("GET","http://localhost:8080/aaa/MyServlet?user="+user.value,true);
httpXml.send(null);
}</script></head><body>
<form action="http://localhost:8080/aaa/AnotherServlet">
<input type="text" name="username" id="my_user">
<input type="text" name="password" id="my_pass">
<input type="submit" value="提交">
</form></body></html>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 MyServlet
*/@WebServlet("/MyServlet")public class MyServlet extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public MyServlet() { super();
} @override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
String username = request.getParameter("user"); if (username!=null&&!username.equals("")) { if (username.equals("admin")) {
out.write("true");
}else {
out.write("false");
}
}else {
out.write("false");
}
out.close();
} @override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}* 下面对AJAX的优缺点进行一下总结：*
优点：
能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。
缺点：
1.它可能破坏浏览器的后退功能。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的静态页面（现代浏览器一般都可以解决这个问题）；
2.使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。
本篇文章到这就结束了（想看更多就到PHP中文网AJAX使用手册栏目中学习），有问题的可以在下方留言提问。
以上がajaxはどのようにして登場したのでしょうか? ajaxはどのように開発されていますか? （まとめ）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
