아약스 란 무엇입니까? ajax의 자세한 사용 프로세스(전체 예제 포함)
- 寻∝梦원래의
- 2018-09-10 14:20:151200검색
이 글에서는 주로 ajax의 정의와 ajax의 구체적인 사용법을 소개합니다. 이제 이 글을 함께 읽어보겠습니다.
#🎜 🎜#1. Ajax란 무엇인가요?
현재 페이지를 새로 고치지 않고도 브라우저가 서버와 통신할 수 있도록 하는 기술을 Ajax라고 합니다. 실제 프로그래밍 과정에서 XMLHttpRequest는 Ajax의 동의어로 자주 사용되며 XMLHttpRequest는 JavaScript의 확장입니다.2. 🎜 🎜#2.2 XMLHttpReques 개체의 일반적으로 사용되는 메서드 및 속성:
#🎜🎜 #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 이벤트 핸들러: 
이 이벤트 핸들러는 사용자가 아닌 Triggered 서버에 의해 처리됩니다.
readyState 속성이 변경될 때마다 Readystatechange 이벤트가 트리거됩니다.
②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 중국어 웹사이트 AJAX 개발 매뉴얼으로 이동하세요. 학습할 열)
3send(data): --|open 메소드는 Ajax 요청의 일부 세부사항을 정의합니다. send 메소드는 보류 중인 요청에 대한 지침을 보낼 수 있습니다.
--|data: 서버에 전달될 문자열입니다.
--|GET 요청을 선택하면 데이터가 전송되지 않습니다. 보내기 메서드에 null을 전달하면 됩니다. request.send(null);-- | send() 메서드에 매개변수를 제공할 때 open()에 지정된 메서드가 POST인지 확인하세요. 요청 본문의 일부로 데이터가 전송되지 않으면 null.
4setRequestHeader(header, value ):
--|브라우저가 서버에 페이지를 요청하면 요청과 함께 일련의 헤더 정보를 보냅니다. 이러한 헤더 정보는 요청을 설명하는 일련의 메타데이터입니다.
헤더 정보는 요청이 GET인지 POST인지를 선언하는 데 사용됩니다.
--|Ajax 요청에서 헤더 정보 전송 작업은 setRequestHeader
--|매개변수 헤더: 헤더의 이름입니다. 헤더의 값.
--|POST 요청을 사용하여 서버에 데이터를 보내는 경우
"Content-type" 헤더를 "application/x-www-form-urlencoded"로 설정해야 합니다. ".서버에 데이터가 전송되고 있으며 데이터가 URL로 인코딩되었음을 알려줍니다. --|이 메소드
는 open() 후에 호출되어야 합니다.⑤readyState
--|readyState 속성 은 Ajax 요청 의 현재 상태를 나타냅니다. 그 값은 숫자로 표시됩니다.
----|0은 초기화되지 않았음을 의미합니다. open 메소드가 아직 호출되지 않았습니다. ----|1은 로드를 의미합니다. open 메소드가 호출되었지만 send 메소드가 아직 호출되지 않았습니다.
----|2는 로딩이 완료되었음을 의미합니다. 보내기가 호출되었습니다. 요청이 시작되었습니다
----|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 属性。
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;
}
}3.2 XML
优点：
（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;
}
}
}
3.3 JSON
（1）JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
（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;
}
}
}4.使用jQuery实现Ajax技术
jQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON()。
4.1 load() 方法
$(function(){
$("a").click(function(){
var url = this.href;
var args = {"time":new Date()};
$("#details").load(url);
return false;
});
})（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 和 选择器之间有一个空格)
$(function(){
$("a").click(function(){
//选择返回HTML结果页面中的h2后代a元素
var url = this.href + " h2 a";
var args = {"time":new Date()};
$("#details").load(url);
return false;
});
})（3）传递方式: load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递, 采用 GET 方式传递, 否则采用 POST 方式
（4）对于必须在加载完才能继续的操作, load() 方法提供了回调函数, 该函数有三个参数: 代表请求返回内容的 data; 代表请求状态的 textStatus 对象和 XMLHttpRequest 对象
4.2$.get()或$.post() 方法
4.2.1加载XML数据
$(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;
});
})
4.2.2加载HTML数据
$(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;
});
})
4.2.3加载JSON数据
$(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;
});
})
（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()方法
$(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;
});
})
本篇文章到这就结束了（想看更多就到PHP中文网AJAX使用手册栏目中学习），有问题的可以在下方留言提问。
위 내용은 아약스 란 무엇입니까? ajax의 자세한 사용 프로세스(전체 예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!