ホームページ > 記事 > ウェブフロントエンド > アヤックスとは何ですか? ajax の詳細な使用プロセス (完全な例が含まれています)
アヤックスとは何ですか? ajax の詳細な使用プロセス (完全な例が含まれています)
- 寻∝梦オリジナル
- 2018-09-10 14:20:151198ブラウズ
この記事ではajaxの定義と具体的な使い方を中心に紹介します
1. Ajaxとは？
現在のページを更新せずにブラウザがサーバーと通信できるようにするテクノロジーは、Ajax と呼ばれます。実際のプログラミングプロセスでは、XMLHttpRequest は Ajax の同義語として使用されることが多く、XMLHttpRequest は JavaScript の拡張機能です。
2. 2.3 JavaScript によるプログラミング
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HelloWorld</title>
<script type="text/javascript">
window.onload = function(){
//1.为a节点添加点击事件
document.getElementsByTagName("a")[0].onclick = function(){
//3.创建XMLHttpRequest对象
var request = new XMLHttpRequest();
//4.准备请求参数url method
var url = this.href + "?time=" + new Date();
var method = "GET";
//5.调用 XMLHttpRequest 对象的 open 方法
request.open(method,url);
//6.调用 XMLHttpRequest 对象的 send 方法
request.send(null);
//7.为XMLHttpRequest对象添加onreadystatechange响应函数
request.onreadystatechange = function(){
//8.判断响应是否完成：XMLHttpReques对象的 readState 为 4
if(request.readyState == 4){
//9.再判断响应是否可用： XMLHttpReques对象的status 为 200
if(request.status == 200 || request.status == 304){
//10.打印相应结果：responseText
alert(request.responseText);
}
}
}
//2.取消默认行为，阻止点击页面跳转
return false;
}
}
</script>
</head>
<body>
<a href="hello.txt">Hello</a>
</body>
</html>
XMLHttpRequest インスタンスを使用してサーバーと通信するには、次の 3 つのキーが含まれます:
①onreadystatechange イベント ハンドラー:
--|
このイベント ハンドラーはユーザーではなくサーバーによってトリガーされます。 ;
--|Ajax 実行プロセス中に、サーバーはクライアントに現在の通信ステータスを通知します。これは、XMLHttpRequest オブジェクトの readState を更新することで実現されます。 readyState プロパティを変更することは、サーバーがクライアント接続上で動作するための 1 つの方法です。
②open(method, url, asynch):
--
|XMLHttpRequest オブジェクトの open メソッドを使用すると、プログラマはサーバーにリクエストを送信できます。 Ajax 呼び出しを使用します。
--|メソッド: リクエストタイプ、「GET」または「POST」に似た文字列。データを送信せずにサーバーからファイルを取得するだけの場合は、GET を使用します (クエリ文字列を URL に追加することで GET リクエストでデータを送信できますが、データ サイズは 2000 文字に制限されています)。サーバーにデータを送信する必要がある場合は、POST を使用します。
--|場合によっては、一部のブラウザーは同じ URL 内の複数の XMLHttpRequest リクエストの結果をキャッシュします。それぞれのリクエストに対する応答が異なる場合、悪い結果につながります。ここで
URL の一意性を確保し、ブラウザが結果をキャッシュしないようにするために、URL の末尾にタイムスタンプを追加します。--|url: リクエストしたサーバー上のファイルを指すパス文字列。絶対パスまたは相対パスを使用できます。 --|asynch: リクエストを非同期で送信するかどうかを示します。デフォルト値は true です。 true を指定すると、以降のスクリプトを読み取る前にサーバーからの応答を待つ必要がありません。 false を指定すると、スクリプト処理がこのポイントを通過すると停止し、Ajax リクエストが完了するまで待機してから続行します (詳細については、PHP 中国語 Web サイト
AJAX 開発マニュアルのコラムを参照してください)。 ③send(data) :
--|open メソッドは、Ajax リクエストの詳細をいくつか定義します。 send メソッドは、保留中のリクエストに対する指示を送信できます--|data: サーバーに渡される文字列。
--|GET リクエストを選択した場合、データは送信されません。送信メソッドに null を渡すだけです: request.send(null);
--|send() メソッドにパラメータを指定するときは、次のことが必要です。 open() で指定されたメソッドが POST であることを確認します。リクエスト本文の一部としてデータが送信されない場合は、null を使用します。④setRequestHeader(header,value):
--| ブラウザが一連のヘッダー情報がこのリクエストとともに送信されます。これらのヘッダー情報は、リクエストを説明する一連のメタデータです。
ヘッダー情報は、リクエストが GET であるか POST であるかを宣言するために使用されます。
--|Ajax リクエストでは、ヘッダー情報の送信作業は setRequestHeader によって完了できます
--|パラメーター header: ヘッダーの名前。パラメーター値: ヘッダーの値。
--|POST リクエストを使用してサーバーにデータを送信する場合は、
"Content-type" ヘッダーを "application/x-www-form-urlencoded" に設定する必要があります。データは送信されており、データは URL エンコードに準拠しています。
--|このメソッド は、open() の後に呼び出す必要があります
⑤readyState
--| readyState 属性
は、Ajax リクエストの現在のステータスを表します。その値は数値で表されます。 ----|0 は初期化されていないことを意味します。 open メソッドはまだ呼び出されていません
----|1 はロードを意味します。 open メソッドは呼び出されていますが、send メソッドはまだ呼び出されていません----|2 はロードされたことを意味します。 send が呼び出されました。リクエストが開始されました
----|3 は、インタラクションが進行中であることを意味します。サーバーは応答を送信しています
----|4 は完了を意味します。応答を送信しました --|每次 readyState 值的改变，都会触发 readystatechange 事件。如果把 onreadystatechange 事件处理函数赋给一个函数，那么每次 readyState 值的改变都会引发该函数的执行。 --|readyState 值的变化会因浏览器的不同而有所差异。但是，当请求结束的时候，每个浏览器都会把 readyState 的值统一设为 4 ⑥status --|服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息，并且属于超文本传输协议中的一部分。 --|常用状态码及其含义： ----|404 没找到页面(not found) ----|403 禁止访问(forbidden) ----|500 内部服务器出错(internal service error) ----|200 一切正常(ok) ----|304 没有被修改(not modified) --|在 XMLHttpRequest 对象中，服务器发送的状态码都保存在 status 属性里。通过把这个值和 200 或 304 比较，可以确保服务器是否已发送了一个成功的响应 ⑦responseText --|XMLHttpRequest 的 responseText 属性包含了从服务器发送的数据。它是一个HTML,XML或普通文本，这取决于服务器发送的内容。 --|当 readyState 属性值变成 4 时, responseText 属性才可用，表明 Ajax 请求已经结束。 ⑧responseXML --|如果服务器返回的是 XML， 那么数据将储存在 responseXML 属性中。 --|只用服务器发送了带有正确首部信息的数据时， responseXML 属性才是可用的。 MIME 类型必须为 text/xml 3.Ajax的数据格式（HTML XML JSON） 3.1 HTML （1）HTML 由一些普通文本组成。如果服务器通过 XMLHttpRequest 发送 HTML， 文本将存储在 responseText 属性中。 （2）不必从 responseText 属性中读取数据。它已经是希望的格式，可以直接将它插入到页面中。 （3）插入 HTML 代码最简单的方法是更新这个元素的 innerHTML 属性。 3.2 XML 优点： 3.3 JSON （1）JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。 4.使用jQuery实现Ajax技术 jQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON()。 4.1 load() 方法 （1）load() 方法是 jQuery 中最为简单和常用的 Ajax 方法, 能载入远程的 HTML 代码并插入到 DOM 中. 它的结构是: load(url[, data][,callback])，其中url：String类型，请求HTML页面的URL地址；data（可选）：Object类型，发送到服务器的key/value数据；callback（可选）：Function类型，请求完成时的回调函数，无论请求成功还是失败。 （2）如果只需要加载目标 HTML 页面内的某些元素, 则可以通过 load() 方法的 URL 参数来达到目的. 通过 URL 参数指定选择符, 就可以方便的从加载过来的 HTML 文档中选出所需要的内容. load() 方法的 URL 参数的语法结构为 “url selector”(注意: url 和 选择器之间有一个空格) （3）传递方式: load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递, 采用 GET 方式传递, 否则采用 POST 方式 （4）对于必须在加载完才能继续的操作, load() 方法提供了回调函数, 该函数有三个参数: 代表请求返回内容的 data; 代表请求状态的 textStatus 对象和 XMLHttpRequest 对象 4.2$.get()或$.post() 方法 4.2.1加载XML数据 4.2.2加载HTML数据 4.2.3加载JSON数据 （1）$.get() 方法使用 GET 方式来进行异步请求. 它的结构是: $.get(url[, data][, callback][, type])，其中：url：String类型，请求HTML页面的URL地址；data（可选）：Object类型，发送到服务器的key/value数据；callback（可选）：Function类型，请求完成时的回调函数，无论请求成功还是失败；type（可选）：String类型，服务器返回内容的格式，可以是xml,json,html,text等类型。 （2）$.get() 方法的回调函数只有两个参数: data 代表返回的内容, 可以是 XML 文档, JSON 文件, HTML 片段等; textstatus 代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种. （3）$.get() 和 $.post() 方法时 jQuery 中的全局函数, 而 find() 等方法都是对 jQuery 对象进行操作的方法 5.$.getJSON()方法 本篇文章到这就结束了（想看更多就到PHP中文网AJAX使用手册栏目中学习），有问题的可以在下方留言提问。window.onload = function(){
var aNodes = document.getElementsByTagName("a");
for(var i = 0;i < aNodes.length;i++){
aNodes[i].onclick = function(){
var request = new XMLHttpRequest();
var method = "GET";
var url = this.href;
request.open(method,url);
request.send(null);
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200 || request.status == 304){
document.getElementById("details").innerHTML = request.responseText;
}
}
}
return false;
}
}
（1）XML 是一种通用的数据格式。
（2）不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记。
（3）利用 DOM 可以完全掌控文档。
缺点：
（1）如果文档来自于服务器，就必须得保证文档含有正确的首部信息。若文档类型不正确，那么 responseXML 的值将是空的。
（2）当浏览器接收到长的 XML 文件后， DOM 解析可能会很复杂window.onload = function(){
var aNodes = document.getElementsByTagName("a");
for(var i = 0;i < aNodes.length;i++){
aNodes[i].onclick = function(){
var request = new XMLHttpRequest();
var method = "GET";
var url = this.href;
request.open(method,url);
request.send(null);
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200 || request.status == 304){
//1获取XML文件内容
var result = request.responseXML;
/*
* 解析XML文件：<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
* <a href="http://andybudd.com/">http://andybudd.com/</a>
*/
var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;
var email = result.getElementsByTagName("email")[0].firstChild.nodeValue;
//创建节点，并且添加到p节点中
var aNode = document.createElement("a");
aNode.appendChild(document.createTextNode(name));
aNode.href = "mailto:" + email;
var h2Node = document.createElement("h2");
h2Node.appendChild(aNode);
var aNode2 = document.createElement("a");
aNode2.appendChild(document.createTextNode(website));
aNode2.href = website;
var detailsNode = document.getElementById("details");
detailsNode.innerHTML = "";
detailsNode.appendChild(h2Node);
detailsNode.appendChild(aNode2);
}
}
}
return false;
}
}
}
（2）JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。window.onload = function(){
var aNodes = document.getElementsByTagName("a");
for(var i = 0;i < aNodes.length;i++){
aNodes[i].onclick = function(){
var request = new XMLHttpRequest();
var method = "GET";
var url = this.href;
request.open(method,url);
request.send(null);
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200 || request.status == 304){
var jsonStr = request.responseText;
var jsonObject = eval("(" + jsonStr + ")");
var name = jsonObject.person.name;
var website = jsonObject.person.website;
var email = jsonObject.person.email;
var aNode = document.createElement("a");
aNode.appendChild(document.createTextNode(name));
aNode.href = "mailto:" + email;
var h2Node = document.createElement("h2");
h2Node.appendChild(aNode);
var aNode1 = document.createElement("a");
aNode1.appendChild(document.createTextNode(website));
aNode1.href = website;
var detailsNode = document.getElementById("details");
detailsNode.innerHTML = "";
detailsNode.appendChild(h2Node);
detailsNode.appendChild(aNode1);
}
}
}
return false;
}
}
}$(function(){
$("a").click(function(){
var url = this.href;
var args = {"time":new Date()};
$("#details").load(url);
return false;
});
})$(function(){
$("a").click(function(){
//选择返回HTML结果页面中的h2后代a元素
var url = this.href + " h2 a";
var args = {"time":new Date()};
$("#details").load(url);
return false;
});
}) $(function(){
$("a").click(function(){
var url = this.href;
args = {"time" : new Date()};
$.get(url,args,function(data){
var name = $(data).find("name").text();
var email = $(data).find("email").text();
var website = $(data).find("website").text();
$("#details").empty()
.append("<h2><a href='mailto:" + email + "'>" + name +"</a></h2>")
.append("<a href='" + website + "'>" + website + "</a>");
})
return false;
});
})
$(function(){
$("a").click(function(){
var url = this.href;
var args = {"time" : new Date()};
$.get(url,args,function(data){
$("#details").empty();
$(data).appendTo($("#details"));
});
return false;
});
})
$(function(){
$("a").click(function(){
var url = this.href;
args = {"time" : new Date()};
$.get(url,args,function(data){
var name = data.person.name;
var email = data.person.email;
var website = data.person.website;
$("#details").empty()
.append("<h2><a href='mailto:" + email + "'>" + name +"</a></h2>")
.append("<a href='" + website + "'>" + website + "</a>");
},"JSON")
return false;
});
})
$(function(){
$("a").click(function(){
var url = this.href;
args = {"time" : new Date()};
$.getJSON(url,args,function(data){
var name = data.person.name;
var email = data.person.email;
var website = data.person.website;
$("#details").empty()
.append("<h2><a href='mailto:" + email + "'>" + name +"</a></h2>")
.append("<a href='" + website + "'>" + website + "</a>");
});
return false;
});
})
以上がアヤックスとは何ですか? ajax の詳細な使用プロセス (完全な例が含まれています)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。