ホームページ > 記事 > ウェブフロントエンド > jQuery の Ajax について話して、その主なメソッドを詳しく説明しましょう
jQuery の Ajax について話して、その主なメソッドを詳しく説明しましょう
- 青灯夜游転載
- 2022-03-15 11:12:033194ブラウズ
この記事では、jQuery での Ajax を理解し、Ajax の長所と短所について説明し、Ajax の主なメソッドについて深く理解します。皆様のお役に立てれば幸いです。
まえがき
この記事では、「Sharp JQuery」を参照および引用して、jQuery-Ajax とその主なメソッドについて詳しく説明します。
1. Ajax の利点と欠点
1. Ajax の利点
a. ブラウザ プラグインは必要ありません
必要ありませんすべてのブラウザのプラグインはほとんどのブラウザでサポートされており、ユーザーはブラウザ上で JavaScript の実行を許可するだけで済みます。
b. 優れたユーザー エクスペリエンス。
最大の利点は、ページ全体を更新せずにデータを更新できるため、Web アプリケーションがユーザーの操作に迅速に応答できることです。
c. Web プログラムのパフォーマンスの向上
従来のモードと比較した Ajax モードのパフォーマンスの最大の違いは、データの送信方法です。データ送信はフォーム (from) を通じて実装され、データは Web ページを完全に更新してページ全体のコンテンツを取得することによって取得されます。Ajax モードは、サーバーに送信する必要があるデータのみを、 XMLHttpRequest オブジェクト。つまり、オンデマンドで送信されます。
d. サーバーとブロードバンドの負荷を軽減する
Ajax の動作原理は、ユーザーとサーバーの間に中間層を追加することに相当し、ユーザーの操作とブロードバンドを非同期に処理します。サーバー応答。クライアント側で Ajax エンジンを作成し、従来のサーバーに負担がかかる作業の一部をクライアントに転送し、クライアント リソースの処理を容易にし、サーバーとブロードバンドの負荷を軽減します。
2. Ajax の欠点
a. ブラウザーによる XMLHttpRequest オブジェクトのサポートが不十分
Ajax の欠点の 1 つは、まずブラウザー IE5 にあります。 0 以降のバージョンでは、XMLHttpRequest オブジェクトのみがサポートされています (この段階のほとんどのクライアントは IE6 以上です)。Mozilla、Netscape、およびその他のブラウザは、それ以降でも XMLHttpRequest をサポートします。Ajax アプリケーションがさまざまなブラウザで正常に実行できるようにするには、プログラム開発者は、 Aajx アプリケーションが各ブラウザとの互換性を高めるために、ブラウザ間の違いを考慮したコーディングに多大な労力がかかります。
b. ブラウザの進むボタンと戻るボタンの通常の機能を破棄する
Ajax では、進むボタンと戻るボタンの機能は無効になりますが、特定の方法で実行できます。ユーザーが「進む」ボタンと「戻る」ボタンを使用できるようにするメソッド (アンカー ポイントの追加) ですが、従来の方法よりもはるかに面倒です。ユーザーにとって、この状況はよく発生します。ボタンをクリックして Ajax インタラクションをトリガーするとき、ユーザーは次のように感じます。そうしたくないと思い、習慣的に戻るボタンをクリックすると、ブラウザが前のページに戻り、Ajax インタラクションによって取得したコンテンツが完全に消えてしまうという最も望ましくない結果が発生しました。
c. 検索エンジンのサポートが不十分である
通常、検索エンジンはインターネット上の数十億の膨大なデータを検索、整理するためにクローラーを使用しますが、クローラー プログラムを理解することはまだ不可能です。これらの奇妙な JavaScript コードと、それに伴うページ コンテンツの変更により、ネットワーク プロモーションにおいて Ajax ベースのサイトが従来のサイトに比べて不利になります。
d. 開発およびデバッグ ツールの欠如
JavaScript は Ajax の重要な部分ですが、現在、優れた JavaScript 開発およびデバッグ ツールが不足しているため、多くの Web 開発者が「JavaScript に脅かされて、Ajax コードの作成はさらに困難になります。ウォリアー、多くの Web 開発者は現在、ビジュアル ツールの使用に慣れており、自分でコードを記述することを恐れています。これは、すべての人の Ajax アプリケーションにある程度の影響を与えています。」
2. Web 環境のインストール---AppServ
Ajax メソッドは Web サーバーと対話する必要があるため、環境が必要です。AppServe は、環境をインストールするためのツールキットです。
ダウンロード アドレス: https://www.appserv.org/en/download/
インストール: 単一マシン [次へ] ボタンで、Web サイトのアドレス、電子メール アドレス、パスワードなどの一般的な情報を入力します。など、ポート デフォルトは 80 です。
ブラウザに「http://localhost:80」と入力すると、次のインターフェイスが表示され、インストールが成功したことが示されます。
使用方法: 作成したプログラムをインストール済みの AppServ\www フォルダーにコピーし、アドレス バーに「http://loaclhost:80/」と入力します。 プログラム ファイル名」アクセスするために。
3. jQuery Ajax 操作機能
jQuery ライブラリは完全な Ajax 互換スイートを備えています。内部の関数とメソッドを使用すると、ブラウザを更新せずにサーバーからデータをロードできます。
https://www.w3school.com.cn/jquery/jquery_ref_ajax.asp
上の図では、( po sアプリケーション
#1) HTML ドキュメントのロードまず、load() メソッドによってロードされ、ページに追加される HTML ファイル (test.html) を構築します。HTML コードは次のとおりです。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> </head> <body> <div> <p>hello world!</p> <ul> <li>C</li> <li>C#</li> <li>C++</li> <li>Java</li> <li>.Net</li> <li>JSP</li> <li>ASP</li> <li>PHP</li> <li>Python</li> <li>ios</li> <li>Android</li> <li>Javascript</li> <li>CSS</li> <li>HTML</li> <li>XML</li> <li>VUE</li> <li>React</li> <li>Angular</li> <li>SQL</li> </ul> </div> </body> </html>
次に、Ajax イベントをトリガーするボタンを含む新しい空のページ (main.html) を作成し、追加された HTML コンテンツを表示するための ID「content」を持つ
(test.html)、コードは次のとおりです。 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-2.1.1.js"></script>
<title>main</title>
</head>
<body>
<!-- load() 方法 -->
<button id="btn1">点击加载</button>
<h1>加载的内容:</h1>
<div id="content1"></div>
</body>
</html>
次に、jQuery コードを記述します。 DOM がロードされたら、ボタンをクリックしてロード メソッドを呼び出し、test.html のコンテンツを ID が「content」の要素にロードします。コードは次のとおりです: <script type="text/javascript">
$(function(){
// load(url)方法
$("#btn1").click(function(){
$("#content1").load("test.html")//单击时将test.html的内容加载到当前页面上
})
})
</script>
実行結果
ロード前:
ロード後:
2）筛选载入的HTML文档
上面例子是将 test.html 中的内容全部都加载到 main.html 中 id 为 ”content“ 的元素中，如果只想加载某些内容，可以使用 load( url selector ) 来实现。
注意：url 和选择器之间有一个空格。
例如只加载 test.html 中 p 标签的内容，代码如下：
<script type="text/javascript">
$(function(){
// load(url, selector)筛选
$("#btn1").click(function(){
$("#content1").load("test.html p")
})
})
</script>运行结果
3）传递方式
load() 方法传递方式根据参数 data 来自动指定。如果没有参数传递，则采用 GET 方式，反之，则自动转换为 POST 方式。
// load(url,fn)方法，无参数传递，GET方式
$("#btn1").click(function(){
$("#content1").load("test.html", function(){
// code
})
})
// load(url,fn)方法，有参数传递，POST方式
$("#btn1").click(function(){
$("#content1").load("test.html", {name: "peiqi", age: "18"}, function(){
// code
})
})4）回调参数
对于必须在加载完成后才能继续的操作，load() 方法提供了回调函数（callback），该函数有3个参数，分别代表“请求返回的内容”，“请求状态”，“XMLHttpRequest对象”，代码如下：
$("#content1").load("test.html p"，function（responseText，textStates，XMLHttpRequest）{
//responseText：请求返回的内容
//textStates：请求状态：success error notmodified timeout4种
//XMLHttpRequest：XMLHttpRequest对象
});注意：在 load() 方法中，无论Ajax请求是否成功，只要请求完成（complete），回调函数（callback）都会被触发。
3、.post() 方法
load() 通常是从web服务器上获取静态的数据文件，如果需要传递一些参数给服务器中的页面，可以使用 .post() 方法（或 $.ajax() 方法）。
注意：.post() 方法是 jQuery 中的全局函数。
1）$.get() 方法
$.get() 方法使用 GET 方式来进行异步请求。
结构
$.get( url，[ data ]，[ callback ]，[ type ])
参数
应用
下面是一段评论页面的 HTML 代码，通过该段代码来介绍 $.get() 方法的使用。代码如下：
<!-- $.get() 和 $.post() 方法 --> <h3>评论</h3> <p>姓名:<input type="text" name="" id="name"></p> <p>内容:<textarea id="content2"></textarea></p> <button id="btn2">发表留言</button> <div id="msg"></div>
该段代码生成的页面如图所示：
将姓名和内容填写好后，就可以提交评论了。
a.首先需要确定请求的 URL 地址。
$("#btn2").click(function(){
$.get("test.php", data参数, 回调函数)
})b.提交之前，将姓名和内容的值作为参数 data 传递给后台。
$("#btn2").click(function(){
$.get("test.php", {"username":$("#name").val(), "content":$("#content2").val()}, 回调函数)
})c.如果服务器接收到传递的 data 数据并成功返回，那么就可以通过回调函数将返回的数据显示到页面上。
$.get() 方法的回调函数只有两个参数
function(){
//data：返回的内容，可以是XML文档，json文件，XHML片段等等
//textStatus：请求状态：success error notmodified timeout 4种
}d. data 参数代表请求返回的内容，textStatus 参数代表请求状态，而且回调函数只有当数据成功（success）后才能被调用（ load() 是不管成功还是失败都被调用 ）。
// $.get()方法
$("#btn2").click(function(){
$.get("test.php", {"username":$("#name").val(),"content":$("#content2").val()}, function(data,textStatus){
if(textStatus=="success"){ //success
// code
$(data).appendTo("#msg")
}
},
"html")//type
})e.运行结果
2）$.post() 方法
它与 $.get() 方法的结构和使用方式都相同，不过之间仍然有以下区别：
a. GET 方式会将参数跟在 URL 后进行传递且数据会被浏览器缓存起来，而 POST 方式则是作为 HTTP 消息的实体内容（也就是包裹在请求体中）发送给服务器，由此可见 POST 方式的安全性高于 GET 方式。
b. GET 方式对传输的数据有大小限制（通常不能大于2KB），而 POST 方式理论上大小不限制。
c. GET 方式与 POST 方式传递的数据在服务器端的获取不相同。在 PHP 中，GET 方式的数据可用 "\_GET\[\]" 获取，而 POST 方式可以用 "_POST[]" 获取。2种方式都可用 "$_REQUEST[]" 来获取。
d. GET 方式的传输速度高于 POST 方式。
由于 POST 和 GET 方式提交的所有数据都可以通过 $_REQUEST[] 来获取，因此只要改变jQuery函数，就可以将程序在 GET 请求和 POST 请求之间切换，代码如下：
// $.post()方法
$("#btn2").click(function(){
$.post("test.php", {"username":$("#name").val(),"content":$("#content2").val()}, function(data,textStatus){
if(textStatus=="success"){ //success
// code
$(data).appendTo("#msg")
}
},
"html")//type
})另外，当 load() 方法带有参数传递时，会使用 POST 方式发送请求。因此也可以使用 load() 方法来完成同样的功能，代码如下：
$("#btn2").click(function(){
$("#msg").load("test.php", {
"username":$("#name").val(),
"content":$("#content2").val()
});
})4、.getJson() 方法
1）$.getScript() 方法
有时候，在页面初次加载时就获取所需的全部 JavaScript 文件是完全没有必要的。虽然可以在需要哪个 JavaScript 文件时，动态创建
$(document.createElement("script")).attr("src", "test.js").appendTo("head");
//或者
$("<script type='text/javascript' src='test.js' />").appendTo("head");但这种方式并不理想。jQuery 提供了 $.getScript() 方法来直接加载 js 文件，与加载一个 HTML 片段一样简单方便，并且不需要对 JavaScript 文件进行处理，JavaScript 文件会自动执行。
结构
$.getScript( url , fn ); //url:请求地址 //fn:回调函数
应用
新建一个 nowDate.js 文件，获取当前日期，代码如下：
function getNowDate(){
var date = new Date
return date;
}点击“获取当前时间”按钮时 ，显示最新时间日期，代码如下：
//HTML代码
<!-- $.getScript() 方法 -->
<button id="btn3">点击获取时间</button>
<div id="message1"></div>
//jQuery代码
// $.getScript()方法
$("#btn3").click(function(){
$.getScript("nowDate.js", function(){
var date1 = getNowDate(); //调用nowDate.js中的getNowDate()方法获取日期
var txtHtml= "<div>"+ date1 + "</div>";
$("#message1").html(txtHtml);
})
})运行结果
加载前：
加载后：
2）$.getJSON() 方法
.getScript() 方法的用法相同。
结构
$.getJSON( url , fn); //url:请求地址 //fn:回调函数
应用
新建一个 test.json 文件，代码如下：
{
"helen":{
"sex":"woman",
"age":18,
"weight":"50kg",
"height":"165cm"
},
"peter":{
"sex":"man",
"age":28,
"weight":"65kg",
"height":"185cm"
}
}新建一个 HTML 文件，代码如下：
<!-- $.getJSON() 方法 --> <button id="btn4">点击加载JSON文件</button> <div id="message2"></div>
当点击加载按钮时，页面上看不到任何效果，可以在控制台查看，代码如下：
// $.getJSON()方法
$("#btn4").click(function(){
$.getJSON("test.json", function(data){
console.log(data); //控制台输出返回的数据
})
})控制台输出如图：
以上虽然函数加载了 JSON 文件（test.json），但是并没有告知 JavaScript 对返回的数据如何处理，所以在回调函数里我们可以处理返回的数据。
通常我们需要遍历我们得到的数据，虽然这里我们可以使用传统的for循环，但是我们也可以通过 .each() 函数是以一个数组或者对象为第1个参数，以一个回调函数作为第2个参数，回调函数拥有两个参数，第1个为对象的成员或者数组的下标，第2个位对应变量或内容，代码如下：
// $.getJSON()方法
$("#btn4").click(function(){
$.getJSON("test.json", function(data){
console.log(data); //控制台输出返回的数据
// 对返回的数据做处理
var txtHtml = "";
$.each(data, function(index, item){
txtHtml += "<div><h4>"
+ index + "：</h4><ul><li>sex："
+ item["sex"] + "</li><li>age："
+ item["age"] + "</li><li>weight："
+ item["weight"] + "</li><li>height："
+ item["height"] + "</li></div>";
})
$("#message2").html(txtHtml);
})
})效果如图：
加载前：
加载后：
【推荐学习：jQuery视频教程、web前端视频】
以上がjQuery の Ajax について話して、その主なメソッドを詳しく説明しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。