Ajax의 기본 프로세스는 무엇입니까? Ajax의 기본 프로세스에 대한 자세한 분석(예제 포함)
- 寻∝梦원래의
- 2018-09-10 16:17:171171검색
이 기사에서는 주로 ajax의 사용 과정과 ajax의 메모리 방식에 대해 설명합니다. 이제 이 기사를 함께 읽어 보겠습니다.
AJAX 사용 과정 및 메모리 방법
이 메모리 방법은 계산되지 않을 수 있습니다. 자신에게 적합하지 않다고 생각되면 다른 것을 생각해 보세요.
new XMLHttpRequest();--- 새로운 표현을 받았습니다new XMLHttpRequest();--- 收到一个新的快递
open('Methor',url,true);--- 你迫不及待地打开
send();--- 发现你的东西有问题，就给送回去了
function onload(){}--- 卖家处理你的快递
responseTextopen('Methor',url,true);--- 빨리 열어보세요
);border:none;">send(); --- 상품에 문제가 있는 것을 발견하여 반송했습니다
기능
onload(){} --- 판매자가 신속 배송을 처리합니다
응답 텍스트 ---
처리 후 Express가 귀하에게 반환됩니다.
AJAX 비동기 호출 및 부분 새로 고침을 완전히 구현하려면 일반적으로 다음 단계가 필요합니다.
(1) XMLHttpRequest 객체를 생성합니다. asynchronous call Object. (2) 새로운 HTTP 요청을 생성하고, HTTP 요청의 메소드, URL, 검증 정보를 지정합니다 (3) HTTP 요청 상태 변경에 응답하는 함수를 설정합니다. (4) HTTP 요청을 보냅니다.부분 새로 고침을 수행하려면 JavaScript 및 DOM을 사용하세요. ‐ ‐ (5) ‐ ‐ ‐ 비동기 호출로 반환된 데이터 가져오기
. 브라우저의 비동기 호출은 XMLHTTP 구성 요소의 XMLHttpRequest 개체를 사용합니다. , Netscape 및 Firefox 브라우저에서는 XMLHttpRequest 구성 요소가 직접 사용됩니다. 따라서 브라우저마다 XMLHttpRequest 객체를 생성하는 방법이 다릅니다.
🎜 IE 브라우저에서 XMLHttpRequest 객체를 생성하는 방법은 다음과 같습니다. 🎜🎜 var xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");🎜🎜 생성 방법 Netscape 브라우저의 XMLHttpRequest 객체는 다음과 같습니다: 🎜🎜 var xmlHttpRequest = new XMLHttpRequest();🎜사용자가 어떤 브라우저를 사용하고 있는지 확인할 수 없으므로 XMLHttpRequest 객체를 생성할 때 위의 두 가지 방법을 모두 추가하는 것이 가장 좋습니다. 다음 코드와 같이:
<html>
<head>
<title>创建XMLHttpRequest对象</title>
<script language = "javascript" type = "text/javascript">
<!--
var xmlHttpRequest; //定义一个变量,用于存放XMLHttpRequest对象
function createXMLHttpRequest() //创建XMLHttpRequest对象的方法
{
if(window.ActiveXObject) //判断是否是IE浏览器
{
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); //创建IE浏览器中的XMLHttpRequest对象
}
else if(window.XMLHttpRequest) //判断是否是Netscape等其他支持XMLHttpRequest组件的浏览器
{
xmlHttpRequest = new XMLHttpRequest(); //创建其他浏览器上的XMLHttpRequest对象
}
}
-->
</script>
createXMLHttpRequst(); //调用创建对象的方法
</head>
<body>
</body>
</html>
"if(window.ActiveXObject)"가 사용됩니다. IE 브라우저 사용 여부를 결정합니다. ActiveXOject는 Windows 개체의 표준 속성이 아니라 브라우저가 ActiveX 컨트롤을 지원하는지 여부를 결정하는 데 사용할 수 있는 IE 브라우저의 고유 속성입니다. 일반적으로 IE 브라우저 또는 IE 브라우저만 핵심입니다. ActiveX 컨트롤을 지원하는 브라우저입니다.
"else if(window.XMLHttpRequest)"는 일부 브라우저가 ActiveX 컨트롤이나 XMLHttpRequest 구성 요소를 모두 지원하지 못하도록 하기 위해 내린 판단입니다. XMLHttpRequest는 window 개체의 표준 속성이 아니지만 그럴 수 있습니다. 브라우저가 XMLHttpRequest 구성 요소를 지원하는지 확인하는 데 사용됩니다.
브라우저가 ActiveX 컨트롤이나 XMLHttpRequest 구성 요소를 지원하지 않으면 xmlHttpRequest 변수에 값이 할당되지 않습니다.
XMLHttpRequest 객체를 생성한 후 XMLHttpRequest 객체가 데이터를 얻으려는 위치를 설명하는 데 사용되는 HTTP 요청을 생성해야 합니다. 일반적으로 웹사이트의 데이터이거나 로컬에서 다른 파일의 데이터일 수 있습니다. HTTP 요청은 XMLHttpRequest 객체의 open() 메소드를 사용할 수 있습니다. 구문 코드는 다음과 같습니다.
XMLHttpRequest.open(method,URL,flag,name,password)코드의 매개변수 설명은 다음과 같습니다. 메소드: 이 매개변수는 HTTP 요청 메소드를 지정하는 데 사용됩니다. get, post, head, put, delete의 5가지 메소드가 있습니다. 일반적으로 사용되는 메소드는 get과 post입니다. URL: 이 매개변수는 HTTP 요청의 URL 주소를 지정하는 데 사용되며 절대 URL 또는 상대 URL일 수 있습니다. 플래그: 이 매개변수는 선택사항이며 매개변수 값은 부울입니다. 이 매개변수는 비동기 모드 사용 여부를 지정하는 데 사용됩니다. true는 비동기 모드를 나타내고 false는 동기 모드를 나타내며 기본값은 true입니다. 이름: 이 매개변수는 선택사항이며 사용자 이름을 입력하는 데 사용됩니다. 서버에 인증이 필요한 경우 이 매개변수를 사용해야 합니다. 비밀번호: 이 매개변수는 선택사항이며 비밀번호를 입력하는 데 사용됩니다. 서버에 인증이 필요한 경우 이 매개변수를 사용해야 합니다. 일반적으로 다음 코드를 사용하여 웹 사이트 파일의 콘텐츠에 액세스할 수 있습니다. xmlHttpRequest.open("get","http://www.aspxfans.com/BookSupport/JavaScript/ajax.htm",true); >
참고: HTML 파일이 웹 서버에 있는 경우 Netscape 브라우저의 JavaScript 보안 메커니즘은 이 컴퓨터 이외의 호스트와의 통신을 허용하지 않습니다. 즉, open() 메서드를 사용하면 HTML 파일과 동일한 서버에 있는 파일만 열 수 있습니다. IE 브라우저에는 이러한 제한이 없습니다(다른 서버의 파일을 열 수는 있지만 경고도 표시됩니다).
3. HTTP 요청 상태 변경에 응답하는 기능 설정
HTTP 요청을 생성한 후에는 HTTP 요청을 웹 서버에 보낼 수 있어야 합니다. 그러나 HTTP 요청을 보내는 목적은 서버에서 반환된 데이터를 수신하는 것입니다. XMLHttpRequest 객체 생성부터 데이터 전송, 데이터 수신, XMLHttpRequest 객체까지 다음 5가지 상태를 거치게 됩니다.
⑴초기화되지 않은 상태. XMLHttpRequest 개체를 생성한 후 개체는 초기화되지 않은 상태입니다. 이때 XMLHttpRequest 개체의 readyState 속성 값은 0입니다. (자세한 내용을 보려면 PHP 중국어 웹사이트 AJAX 개발 매뉴얼 열을 참조하세요.)
⑵초기화 상태. XMLHttpRequest 개체를 생성하고 open() 메서드를 사용하여 HTTP 요청을 생성한 후 개체는 초기화된 상태입니다. 이때 XMLHttpRequest 객체의 readyState 속성 값은 1입니다.
⑶데이터 상태를 보냅니다. XMLHttpRequest 개체를 초기화한 후 send() 메서드를 사용하여 데이터를 보낼 때 개체는 데이터 전송 상태에 있습니다. 이때 의 readyState 속성 값은 다음과 같습니다. XMLHttpRequest 개체는 2입니다.
⑷데이터 상태를 수신합니다. Web서버는 데이터를 받아 처리한 후 반환된 결과를 클라이언트에 보냅니다. 이때 XMLHttpRequest 객체는 데이터를 수신하는 상태이고, XMLHttpRequest 객체의 readyState 속성값은 3입니다.
⑸완료 상태입니다. XMLHttpRequest 개체는 데이터 수신을 완료한 후 완료 상태로 들어갑니다. 이때 XMLHttpRequest 개체의 readyState 속성 값은 4입니다. 이때 수신된 데이터는 클라이언트 컴퓨터의 메모리에 저장되며 responseText 속성이나 responseXml 속성을 사용하여 데이터를 얻을 수 있습니다.
只有在XMLHttpRequest对象完成了以上5个步骤之后，才可以获取从服务器端返回的数据。因此，如果要获得从服务器端返回的数据，就必须要先判断XMLHttpRequest对象的状态。
XMLHttpRequest对象可以响应readystatechange事件，该事件在XMLHttpRequest对象状态改变时（也就是readyState属性值改变时）激发。因此，可以通过该事件调用一个函数，并在该函数中判断XMLHttpRequest对象的readyState属性值。如果readyState属性值为4则使用responseText属性或responseXml属性来获取数据。具体代码如下所示：
//设置当XMLHttpRequest对象状态改变时调用的函数，注意函数名后面不要添加小括号
xmlHttpRequest.onreadystatechange = getData;
//定义函数
function getData(){
//判断XMLHttpRequest对象的readyState属性值是否为4，如果为4表示异步调用完成
if(xmlHttpRequest.readyState == 4) {
//设置获取数据的语句
}
}
4、设置获取服务器返回数据的语句
如果XMLHttpRequest对象的readyState属性值等于4，表示异步调用过程完毕，就可以通过XMLHttpRequest对象的responseText属性或responseXml属性来获取数据。
但是，异步调用过程完毕，并不代表异步调用成功了，如果要判断异步调用是否成功，还要判断XMLHttpRequest对象的status属性值，只有该属性值为200，才表示异步调用成功，因此，要获取服务器返回数据的语句，还必须要先判断XMLHttpRequest对象的status属性值是否等于200，如以下代码所示：
if(xmlHttpRequst.status == 200){
//使用以下语句将返回结果以字符串形式输出
document.write(xmlHttpRequest.responseText);
//或者使用以下语句将返回结果以XML形式输出
//document.write(xmlHttpRequest.responseXML);
}
注意：如果HTML文件不是在Web服务器上运行，而是在本地运行，则xmlHttpRequest.status的返回值为0。因此，如果该文件在本地运行，则应该加上xmlHttpRequest.status == 0的判断。
通常将以上代码放在响应HTTP请求状态变化的函数体内，如以下代码所示：
//设置当XMLHttpRequest对象状态改变时调用的函数，注意函数名后面不要添加小括号
xmlHttpRequest.onreadystatechange = getData;
//定义函数
function getData()
{
//判断XMLHttpRequest对象的readyState属性值是否为4，如果为4表示异步调用完成
if(xmlHttpRequest.readyState==4)
{
//设置获取数据的语句
if(xmlHttpRequest.status == 200 || xmlHttpRequest.status == 0)
{
//使用以下语句将返回结果以字符串形式输出
document.write(xmlHttpRequest.responseText);
//或者使用以下语句将返回结果以XML形式输出
//docunment.write(xmlHttpRequest.responseXML);
}
}
}
5、发送HTTP请求
在经过以上几个步骤的设置之后，就可以将HTTP请求发送到Web服务器上去了。发送HTTP请求可以使用XMLHttpRequest对象的send()方法，其语法代码如下所示：
XMLHttpRequest.send(data)
其中data是个可选参数，如果请求的数据不需要参数，即可以使用null来替代。data参数的格式与在URL中传递参数的格式类似，以下代码为一个send()方法中的data参数的示例：
name=myName&value=myValue
只有在使用send()方法之后，XMLHttpRequest对象的readyState属性值才会开始改变，也才会激发readystatechange事件，并调用函数。（想看更多就到PHP中文网AJAX开发手册栏目中学习）
6、局部更新
在通过Ajax的异步调用获得服务器端数据之后，可以使用JavaScript或DOM来将网页中的数据进行局部更新。常用的局部更新的方式有以下3种：
⑴表单对象的数据更新
表单对象的数据更新，通常只要更改表单对象的value属性值，其语法代码如下所示：
FormObject.value = "新数值"
有关表单对象的数据更新的示例如以下代码所示：
//设置当XMLHttpRequest对象状态改变时调用的函数，注意函数名后面不要添加小括号
xmlHttpRequest.onreadystatechange = getData;
//定义函数
function getData()
{
//判断XMLHttpRequest对象的readyState属性值是否为4，如果为4表示异步调用完成
if(xmlHttpRequest.readyState==4)
{
//设置获取数据的语句
if(xmlHttpRequest.status == 200 || xmlHttpRequest.status == 0)
{
//使用以下语句将返回结果以字符串形式输出
document.write(xmlHttpRequest.responseText);
//或者使用以下语句将返回结果以XML形式输出
//docunment.write(xmlHttpRequest.responseXML);
}
}
}
⑵IE浏览器中标签间文本的更新
在HTML代码中，除了表单元素之外，还有很多其他的元素，这些元素的开始标签与结束标签之间往往也会有一点文字（如以下代码所示），对这些文字的更新，也是局部更新的一部分。
<p>文字</p> <span>文字</span> <p>文字</p> <label>文字</label> <b>文字</b> <i>文字</i>
在IE浏览器中，innerText或innerHTML属性可以用来更改标签间文本的内容。其中innerText属性用于更改开始标签与结束标签之间的纯文本内容，而innerHTML属性用于更改HTML内容。如以下代码所示：
<html>
<head>
<title>局部更新</title>
<script language="javascript" type="text/javascript"> function changeData(){ myp.innerText = "更新后的数据"; }
</script>
</head>
<body> <p id="mype">原数据</p> <input type="button" value="更新数据" onclick="changeData()">
</body>
</html>
⑶DOM技术的局部刷新
innerText和innerHTML两个属性都是IE浏览器中的属性，在Netscape浏览器中并不支持该属性。但无论是IE浏览器还是Netscape浏览器，都支持DOM。在DOM中，可以修改标签间的文本内容。
在DOM中，将HTML文档中的每一对开始标签和结束标签都看成是一个节点。例如HTML文档中有一个标签如下所示，那么该标签在DOM中称之为一个“节点”。
原数据
在DOM中使用getElementById()方法可以通过id属性值来查找该标签（或者说是节点），如以下语句所示：
var node = document.getElementById("myp");
注意：在一个HTML文档中，每个标签中的id属性值是不能重复的。因此，使用getElementById()方法获得的节点是唯一的。
在DOM中，认为开始标签与结束标签之间的文本是该节点的子节点，而firstChild属性可以获得一个节点下的第1个子节点。如以下代码可以获得
节点下的第1个子节点，也就是
标签与
标签之间的文字节点。node.firstChild
注意，以上代码获得的是文字节点，而不是文字内容。如果要获得节点的文字内容，则要使用节点的nodeValue属性。通过设置nodeValue属性值，可以改变文字节点的文本内容。完整的代码如下所示。
<html>
<head>
<title>局部更新</title>
<script language="javascript" type="text/javascript">
<!--
function changeData()
{
//查找标签（节点）
var node = document.getElementById("myp");
//在DOM中标签中的文字被认为是标签中的子节点
//节点的firstChild属性为该节点下的第1个子节点
//nodeValue属性为节点的值，也就是标签中的文本值
node.firstChild.nodeValue = "更新后的数据";
}
-->
</script>
</head>
</html>
注意：目前主流的浏览器都支持DOM技术的局部刷新。
7、完整的AJAX实例
<html>
<head>
<title>AJAX实例</title>
<script language="javascript" type="text/javascript">
<!--
var xmlHttpRequest; //定义一个变量用于存放XMLHttpRequest对象
//定义一个用于创建XMLHttpRequest对象的函数
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
//IE浏览器的创建方式
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}else if(windew.XMLHttpRequest)
{
//Netscape浏览器中的创建方式
xmlHttpRequest = new XMLHttpRequest();
}
}
//响应HTTP请求状态变化的函数
function httpStateChange()
{
//判断异步调用是否完成
if(xmlHttpRequest.readyState == 4)
{
//判断异步调用是否成功,如果成功开始局部更新数据
if(xmlHttpRequest.status == 200||xmlHttpRequest.status == 0)
{
//查找节点
var node = document.getElementById("myp");
//更新数据
node.firstChild.nodeValue = xmlHttpRequest .responseText;
}
else
{
//如果异步调用未成功,弹出警告框,并显示出错信息
alert("异步调用出错/n返回的HTTP状态码为:"+xmlHttpRequest.status + "/n返回的HTTP状态信息为:" + xmlHttpRequest.statusText);
}
}
}
//异步调用服务器段数据
function getData(name,value)
{
//创建XMLHttpRequest对象
createXMLHttpRequest();
if(xmlHttpRequest!=null)
{
//创建HTTP请求
xmlHttpRequest.open("get","ajax.text",true)
//设置HTTP请求状态变化的函数
xmlHttpRequest.onreadystatechange = httpStateChange;
//发送请求
xmlHttpRequest.send(null);
}
}
-->
</script>
</head>
<body>
<p id="myp">原数据</p>
<input type = "button" value = "更新数据" onclick = "getData()">
</body>
</html>
本篇文章到这就结束了（想看更多就到PHP中文网AJAX使用手册栏目中学习），有问题的可以在下方留言提问。
위 내용은 Ajax의 기본 프로세스는 무엇입니까? Ajax의 기본 프로세스에 대한 자세한 분석(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!