AJAX를 처음부터 학습하기 위한 AJAX 프레임워크-JS 튜토리얼-php.cn

AJAX를 처음부터 학습하기 위한 AJAX 프레임워크

亚连

풀어 주다： 2018-05-25 14:11:01

원래의

1566명이 탐색했습니다.

이 기사는 AJAX를 처음부터 배우는 일련의 튜토리얼 중 두 번째입니다. 우리는 ajax를 더 잘 이해할 수 있도록 몇 가지 다른 지식을 소개하고 두 가지 프레임워크 ajaxLib 및 ajaxGold를 배웁니다.

위(처음부터 AJAX 배우기 소개 및 Ajax 비동기 요청 서버의 기초에서는 자세한 소개와 기본 응용 프로그램을 제공하며 Ajax의 일부 프로세스는 상대적으로 변경되지 않은 것을 볼 수 있습니다. 요청을 보낼 때마다 보내는 코드를 작성할 필요는 없습니다. 일부 ajax 개발자는 프로세스를 ajax 프레임워크로 캡슐화했습니다.

이 섹션에서는 주로 ajaxLib과 ajaxGold라는 두 가지 프레임워크를 소개합니다.

1.ajaxLib

ajaxLib은 매우 작은 Ajax 프레임워크입니다.
페이지에 파일 사용법을 먼저 소개하려면 이 기능을 사용하세요. 수정된 프레임워크는 XML을 직접 얻는 프레임워크입니다. 디스패칭 함수는 다음과 같습니다.

loadXMLDoc(url, callback, boolean)
그 중 url은 비동기 요청의 주소, callback은 수행할 함수의 이름입니다. 요청이 성공한 후 반환된 후 전달됩니다. 부울은 XML 문서에서 공백을 제거할지 여부를 나타내고, true는 공백을 제거한다는 의미입니다.

예:

<input type="button" value="display" onclick="loadXMLDoc(&#39;1-7.aspx&#39;,decodeXML,false);" />

로그인 후 복사

AjaxLib 프레임워크에서 반환된 XML 문서는 전역 변수 resultXML에 저장됩니다. decodeXML로 프로그램을 작성하여 분석할 수 있습니다. 예를 들면 다음과 같습니다.

function decodeXML(){
var oTemp =resultXML.getElementsByTagName("temp");
document.getElementById("targetID").innerHTML = oTemp[0].firstChild.nodeValue;
}

로그인 후 복사

코드 길이가 이전보다 훨씬 줄어든 것을 볼 수 있습니다.

2. ajaxGold 사용

Ajaxgold는 특히 실용적인 Ajax 프레임워크입니다.

Ajaxgold는 특히 실용적인 또 다른 Ajax 프레임워크입니다. 개발자가 사용할 수 있는 4가지 함수가 있습니다

getDataReturnText(url,callback);
getDataReturnXML(url,callback);
postDataReturnText(url,data,callback);
postDataReturnXML(url,data,callback);

로그인 후 복사

처음 두 개는 get 메서드에서 텍스트와 XML을 반환하는 데 사용되고, 후자 두 함수는 POST 요청 메서드를 사용하여 텍스트와 XML을 반환하는 데 사용됩니다. postDataReturnText(url, data, callback) Description

<form>
    <input type="button" value="请求数据" onclick="postDataReturnText(&#39;1-8.aspx&#39;,&#39;a=2&b=3&#39;,display);">
 </form>
<p id="targetID">提取的数据将要显示在这</p>

로그인 후 복사

위의 코드는 데이터를 1-8.aspx로 보내고 a=2b=3 데이터를 전달합니다. 서버가 성공적으로 반환되면 함수 display()가 반환을 처리하기 위해 전달됩니다. 값.

ajaxGold에서는 반환된 텍스트를 콜백 함수의 유일한 매개변수로 사용하기 때문에 display() 함수는 이렇게 작성하면 됩니다

<script type="text/javascript">
            function display(text) {
                document.getElementById("targetID").innerHTML = text;
            }
</script>

로그인 후 복사

위 내용은 제가 모두를 위해 정리한 내용인데, 많은 분들께 도움이 되었으면 좋겠습니다. 미래에.