JavaScript 학습 요약 JS, AJAX application_javascript 기술
- WBOY원래의
- 2016-05-16 15:16:481474검색
1. AJAX 소개
AJAX(음역: Ajax) = Asynchronous JavaScript and XML(asynchronous JavaScript and XML)은 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술, 즉 전체 웹 페이지를 다시 로드하지 않고 일부 웹을 업데이트할 수 있는 기술을 말합니다. 페이지. AJAX는 새로운 프로그래밍 언어가 아니라 기존 표준을 사용하는 새로운 방식으로, 빠르고 동적인 웹 페이지를 생성하는 기술입니다. AJAX를 사용하면 백그라운드에서 서버와 소량의 데이터를 교환하여 웹 페이지를 비동기적으로 업데이트할 수 있습니다. 즉, 전체 웹페이지를 다시 로드하지 않고도 웹페이지의 특정 부분을 업데이트할 수 있습니다. AJAX를 사용하지 않는 기존 웹페이지는 콘텐츠나 사용자 등록 정보를 업데이트하거나 양식을 제출해야 하는 경우 전체 웹페이지를 다시 로드해야 합니다. 그래서 AJAX는 서버와 데이터를 교환하고 웹페이지의 일부를 업데이트하는 기술이므로 우리는 AJAX의 기술을 마스터해야 합니다.
AJAX는 기존 인터넷 표준을 기반으로 하며 이를 함께 사용합니다.
①, XMLHttpRequest 객체(서버와 비동기 데이터 교환)
②、JavaScript/DOM(정보 표시/상호작용)
③、CSS(데이터 스타일 정의)
4、XML(데이터 변환 형식)
AJAX의 핵심은 비동기 요청을 지원하는 기술인 JavaScript 개체 XMLHttpRequest입니다. 즉, XMLHttpRequest는 JS를 사용하여 이 개체를 통해 서버에 요청하고 응답을 처리할 수 있는 기능을 제공합니다. , 페이지를 다시 로드하지 않고도 웹 서버와 JS 데이터를 교환할 수 있습니다. AJAX는 브라우저와 웹 서버 간의 비동기 데이터 전송(HTTP 요청)을 사용하므로 웹 페이지가 전체 페이지가 아닌 서버에서 작은 정보 조각을 요청할 수 있습니다. AJAX는 웹 서버 소프트웨어와 독립적인 브라우저 기술입니다. 즉, AJAX 애플리케이션은 브라우저와 플랫폼에 독립적입니다. 보다 동적인 애플리케이션을 만드는 데 사용할 수 있습니다
간단히 말하면 AJAX는 JS가 서버에서 데이터를 읽거나 페이지를 새로 고치지 않고도 서버에 데이터를 보낼 수 있도록 해줍니다. JSON 파일과 대화형으로 통신하고, 데이터베이스와 동적으로 통신하고, 보다 동적인 애플리케이션을 만드는 데 사용할 수 있습니다. 가장 일반적인 응용프로그램은 사용자 로그인이며, 로그인 시 사용자 입력이 올바른지 확인할 수 있으며, 입력이 올바르지 않으면 새로 고치지 않고 사용자 정보가 직접 표시됩니다. 페이지.
2. 서버 구성
AJAX 애플리케이션은 비동기적으로 업데이트하고 서버의 데이터를 읽습니다. 그렇다면 서버란 정확히 무엇일까요? 실제로 서버는 우리가 일반적으로 웹을 탐색할 때 주소 표시줄에 해당 URL을 입력하기만 하면 해당 페이지를 탐색할 수 있으므로 이러한 페이지는 개인용 컴퓨터에 저장될 수 없습니다. 하드 드라이브가 필요하고 다른 영향 요인도 있으므로 이러한 웹 페이지는 Baidu 서버 및 Sina 서버와 같은 해당 서버에 저장됩니다. 실제로 서버는 우리가 일반적으로 사용하는 컴퓨터와 크게 다르지 않습니다. 예를 들어 휴대폰을 사용하여 사진을 컴퓨터로 전송하는 경우 WIFI 또는 제공되는 기능을 사용하여 전송 프로세스를 쉽게 완료할 수 있습니다. 데이터 케이블을 사용하지 않는 Tencent는 현재 휴대폰이 서버 역할을 하고 있으며 성능이 상대적으로 좋지 않고 이 기기에만 서비스를 제공할 뿐입니다. 그러면 웹 서버는 동시에 많은 사람에게 서비스를 제공할 수 있고 성능도 더욱 강력해집니다.
AJAX를 배울 때 개인 서버를 구성해야 합니다. 이는 코드 디버깅을 용이하게 하기 위해 이 컴퓨터에 서버 프로그램을 구축하는 것을 의미합니다. WAMP는 일반적으로 서버를 구축하는 데 사용됩니다. 원하는 구축 프로그램을 선택할 수 있습니다. WAMP는 Windows 기반의 Apache Mysql PHP 통합 설치 환경입니다. 인터넷상의 서버 프로그램은 일반적으로 WampServer 서버 소프트웨어를 사용합니다. 여기서 제가 설치한 것은 WampServer 2.5입니다. Baidu에서 wamp를 검색하여 2.5 버전을 다운로드하여 설치할 수 있습니다. 설치가 완료된 후 프로그램을 열어보세요. 아이콘은 일반적으로 녹색입니다. 아이콘을 마우스 오른쪽 버튼으로 클릭하고 두 번째 옵션을 선택하면 전환이 완료된 후 다음 단계로 구성됩니다. 온라인에서 찾은 구성 방법을 사용하면 문제가 없습니다. 여기에 작성하면 이제 WampServer가 버전 3.0으로 업데이트되었습니다. Baidu에서 구성 방법을 검색해 보세요. .
먼저 편집기로 설치 디렉터리를 엽니다: D:wampbinapacheapache2.4.9confhttpd.conf 파일
516행 또는 검색 키워드에서 발견:
#conf/extra/httpd-manual.conf 포함
앞의 파운드 기호를 제거하세요.
그런 다음 D:wampbinapacheapache2.4.9confextrahttpd-vhosts.conf 파일을 엽니다.
코드 끝에 다음 내용을 추가합니다.
<VirtualHost *:80> DocumentRoot "D:/wamp/www" ServerName www.abc.com ServerAlias www.abc.com abc.com <Directory "D:/wamp/www"> Options Indexes FollowSymLinks AllowOverride All Require all granted </Directory> </VirtualHost>
www.abc.com은 개인 사이트 주소이므로 직접 정의할 수 있습니다.
마지막으로 C:WindowsSystem32driversetchosts 파일을 엽니다.
추가됨: 127.0.0.1 www.abc.com
WAMP를 다시 시작하세요.
테스트가 필요한 경우 페이지를 D:/wamp/www 경로에 저장하고 파일명을 index.html로 저장한 후 브라우저 주소창에 abc.com을 입력하면 방금 저장한 페이지가 열립니다. .
개통에 실패하면 Baidu에서 포트 80을 검색하여 해결 방법을 찾을 수 있습니다.
여기서 주의할 점은 서버 아래에 있는 파일은 중국어 이름을 지정할 수 없다는 점입니다.
3. AJAX 기본
먼저 AJAX 애플리케이션의 예를 살펴보겠습니다. 정적 TXT 파일 요청 및 표시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>AJAX 实例</title>
<script>
function ajax(){
var oAjax = new XMLHttpRequest();
oAjax.onreadystatechange = function (){
if(oAjax.readyState == && oAjax.status == ){
alert(oAjax.responseText);
}
}
oAjax.open('GET', 'ajax/demo.txt', true);
oAjax.send();
}
</script>
</head>
<body>
<button type="button" onclick="ajax()">读取</button>
</body>
</html>
WAMP 설치 디렉토리의 www 루트 디렉토리에 페이지를 저장하고 데모용 파일에 임의의 텍스트를 입력할 수 있는 TXT 파일을 저장하기 위해 ajax라는 새 폴더를 만들어야 합니다. 그런 다음 당사의 맞춤형 개인 사이트를 통해 브라우저에서 페이지를 열고 읽기 버튼을 클릭하면 TXT 파일의 내용이 나타납니다.
위의 예를 통해 AJAX의 실제 기능은 서버에서 파일을 읽고 우리가 처리할 수 있도록 파일 내용을 우리에게 반환하는 것임을 알 수 있습니다.
여기서 주목해야 할 것은 문자 세트 인코딩 문제입니다. AJAX를 사용할 때 HTML, JS 파일 및 UTF-8 또는 GB2312와 같은 읽기 파일, TXT 파일을 포함한 모든 파일은 통일된 인코딩 형식이어야 합니다. 위 예시에서 시연용으로 사용한 경우 기본 입력은 영어이고, 저장 시 기본 인코딩은 ANSI입니다. 한자를 입력하고 저장 시 페이지와 동일한 인코딩 형식인 UTF-8로 변경하지 않은 경우에는 버튼 이후 웹 페이지에 잘못된 문자가 표시되므로 저장할 때 파일의 인코딩 형식을 전환하십시오.
AJAX가 어떻게 작동하는지 분석해 보겠습니다.
4. XHR이 객체를 생성합니다
XHR은 XMLHttpRequest의 약자로 AJAX의 기반이 되며 백그라운드에서 서버와 데이터를 교환하는데 사용됩니다.
모든 최신 브라우저(IE7, Firefox, Chrome, Safari 및 Opera)에는 XMLHttpRequest 개체가 내장되어 있으며, 이전 버전의 IE 브라우저(IE6)에서는 다양한 브라우저와 호환되도록 판단할 수 있습니다. XMLHttpRequest 객체가 지원되면 객체가 생성됩니다. 지원되지 않으면 ActiveXObject가 생성됩니다.
var oAjax;
// IE+, Firefox, Chrome, Opera, Safari
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
}
// IE
else{
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
모든 최신 브라우저와 IE 상위 버전의 브라우저는 XMLHttpRequest 객체를 지원하므로 객체 생성 시 호환성 처리를 할 필요가 없습니다. IE 브라우저에서 ActiveX는 플러그인을 뜻하는데, 이는 IE6의 AJAX가 플러그인을 통해 구현된다는 뜻이다. 플러그인이지만 IE6 브라우저에는 기본적으로 설치된다.
위 코드에서는 판단을 내릴 때 window.XMLHttpRequest가 사용됩니다. 우리 모두는 전역 변수가 window의 속성이라는 것을 알고 있습니다. JS에서 정의되지 않은 변수를 사용하면 다음과 같은 오류가 보고됩니다. ). 그리고 정의되지 않은 속성을 사용하는 경우 오류는 보고되지 않지만 정의되지 않은 상태로 보고됩니다(예: 경고(window.a)). IE6에서는 XMLHttpRequest를 지원하지 않으므로 직접 사용하면 오류가 발생합니다.window의 속성으로 정의하면 정의되지 않습니다. 정확히 우리에게 필요한 것입니다.
5. 서버 접속
서버에 요청을 보내기 위해 XMLHttpRequest 객체의 open() 및 send() 메서드를 사용합니다.
oAjax.open('GET', 'ajax/demo.txt', true);
oAjax.send()
open(method, url, async)는 요청 유형, URL 및 요청을 비동기적으로 처리할지 여부를 지정합니다. 첫 번째 매개변수인 method는 요청 유형(GET 또는
)을 지정하는 데 사용됩니다.포스트 . 두 번째 매개변수 URL은 서버의 파일 주소를 설정하는 데 사용됩니다. 파일은 .txt, .xml 및 .json과 같은 모든 유형의 파일이거나 .php와 같은 서버 스크립트 파일일 수 있습니다(반환 전). 서버에서 작업을 수행할 수 있는 응답). 세 번째 매개변수인 async는 비동기적으로 전송할지, true(비동기)인지 false(동기)인지 정의하는 데 사용됩니다.
send(string)은 서버에 요청을 보내는 데 사용되며, 매개변수 문자열은 POST 요청에만 사용됩니다.
두 가지 질문을 살펴보겠습니다.
(1), GET 또는 POST?
GET 및 POST는 양식을 제출하는 데 자주 사용되며 양식 제출의 기본 방법은 GET입니다.
POST에 비해 GET은 더 간단하고 빠르며 대부분의 경우에 작동합니다.
단, 다음과 같은 경우에는 POST 요청을 이용해 주시기 바랍니다.
①. 캐시 파일을 사용할 수 없습니다(서버의 파일 또는 데이터베이스 업데이트).
②. 서버에 많은 양의 데이터를 보냅니다(POST에는 데이터 제한이 없습니다).
③알 수 없는 문자가 포함된 사용자 입력을 보낼 때 POST가 GET보다 안정적이고 신뢰할 수 있습니다.
가장 실용적인 판단 방법: GET은 게시물 탐색 등의 데이터 획득에 사용되고, POST는 데이터 업로드, 즉 사용자 등록 등의 데이터를 서버로 전송하는 데 사용됩니다.
GET과 POST의 차이점:
GET: 보안이 취약하고 용량이 작은 URL로 데이터를 전송합니다. 일반적으로 URL의 최대 길이는 4K~10K이며 길이가 제한되어 있습니다.
POST: URL로 데이터를 전송하지 않습니다. 상대적으로 안전하며 용량이 2G에 달할 수 있습니다. 실제 보안은 https 프로토콜뿐입니다.
캐싱: GET은 캐시되고 POST는 캐시되지 않습니다.
따라서 AJAX는 일반적으로 GET 방식입니다. 물론 GET, POST 외에도 많은 방법이 있지만 이 두 가지가 가장 일반적으로 사용됩니다.
기본 AJAX 예제에서는 GET 요청을 사용하기 때문에 또 다른 문제는 캐시 문제입니다. 소위 캐시는 웹사이트를 한 번 열면 다시 열면 더 빨라지는 것과 같습니다. 캐시 덕분에 캐시는 실제로 웹사이트입니다. 처음 열면 실제로 서버에서 요청됩니다. 그 후에는 하드 디스크에서 데이터를 읽는 것이 적어도 더 빠릅니다. 인터넷보다 훨씬 빠릅니다. 그러면 이것에 따르면 캐싱이 좋은 것 아닌가요? 문제는 무엇입니까? AJAX의 예를 살펴보겠습니다. 이는 이미 로컬 캐시가 있음을 의미합니다. 이제 TXT 파일에 텍스트를 추가하면 어떻게 될까요? 버튼을 클릭하면 추가된 텍스트가 표시되지 않고 잠시 후에 표시되는 것을 볼 수 있습니다. 이는 캐시 문제입니다. Chrome 및 FF 캐시는 심각하지 않지만 IE 브라우저 캐시는 더 심각합니다. 이 문제는 종종 우리에게 문제를 야기합니다. 예를 들어, 최신 주가를 실시간으로 업데이트해야 하는 주식 웹사이트입니다. 캐싱이 차단되지 않으면 실시간으로 가격을 업데이트하기가 어렵습니다. 따라서 자주 변경되는 데이터라면 캐싱을 방지해야 합니다. 캐싱의 작동 원리는 URL에 따라 동일한 주소를 한 번만 읽는 것이므로 캐싱을 방지하려면 URL을 계속 변경하는 것, 즉 URL에 고유한 ID를 추가하면 됩니다.
我们平时在浏览网页时，都见过这种样子，比如在使用百度搜索时，百度域名后边跟了个问号，然后是一堆什么等于什么：https://www.baidu.com/s?wd=前端&rsv_spt=1&rsv_iqid=0xe9146bd400052360&issp=1&，这个问号后边的数据就被称为 GET 数据。如果我们给 TXT 文件后边也加入 GET 数据，http://abc.com/ajax/demo.txt?a=2，或者可以自定义什么等于什么，这样对文件的显示内容是没有任何影响的，那么对于缓存的问题，我们就可以对 oAjax.open('GET', '/ajax/demo.txt', true) 第二个参数 URL 做一些修改，'ajax/demo.txt?t=' + Math.random()，Math.random() 方法返回一个 0-1 之间的随机小数，那么每次返回的都不同，也可以添加 'ajax/demo.txt?t=' + new Date().getTime()，getTime()用于获取当前的时间戳，也就是1970年元旦到当前的毫秒数，那么使用 get Time() 返回的数据每一次都不一样，因为是毫秒数，所以1秒之内就有很多种可能，他的值一直在变，这样就能很好的解决缓存问题。
这里要注意的是，在使用 GET 请求时，为了避免只是得到缓存的结果，需要向 URL 添加一个唯一的 ID，使 URL 每次都不一样。
如果需要通过 GET 方法发送信息，可以把信息添加在 URL 中。
如果需要像 HTML 表单那样传输 POST 数据，可以使用 setRequestHeader() 来添加 HTTP 头，然后在 send() 方法中规定发送的数据。
setRequestHeader(header, value) 用于向请求添加 HTTP 头，第一个参数 header 规定头的名称，比如 Content-type，第二个参数规定头的值。
(2)、true 还是 false？
同步和异步，在现实生活中，同步的意思为多件事一起做，而异步为一件件来，也就是不同步。但是在 JS 中同步和异步的概念和现实生活中恰恰是相反的，同步的意思为事情一件件来，先干完一件事再干另一件事，而异步则为多个事情可以一起做，而 AJAX 天生就是用来做异步操作的，如果 AJAX 工作在同步的方式下，也就是事情得一件一件来，当发出一个请求后，因为网速有点慢，这个请求在1分钟后才得到响应，那么在这个请求结束之前，页面中所有的按钮、链接、文字等全都跟死了一样，就完全没法操作了。而如果是异步的话，就没问题了，比如你发微博，发出去之后因为网速慢没有更新过来，那么在他更新之前，还可以做其他操作。
AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML），XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true，所以 AJAX 一般都为异步传输。对于 Web 开发者来说，发送异步请求是一个巨大的进步，很多在服务器执行的任务都相当费时，在 AJAX 出现之前，这可能会引起应用程序挂起或者停止。
而通过 AJAX，JS 无需等待服务器的响应，而是在等待服务器响应时执行其他脚步，当响应就绪后对响应进行处理。
当使用异步时，也就是 async = true 时，必需规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：
oAjax.onreadystatechange = function (){
if(oAjax.readyState == && oAjax.status == ){
alert(oAjax.responseText);
}
}
oAjax.open('GET', 'ajax/demo.txt?t=' + Math.random(), true);
oAjax.send();
如需使用 async=false，请将 open() 方法中的第三个参数改为 false 。
不推荐使用同步传输，但是对于一些小型的请求，也是可以的。
这里需要注意，JS 会等到服务器响应就绪才继续执行，如果服务器繁忙或缓慢，应用程序会挂起或停止。
当使用 async = false 时，可以不用编写 onreadystatechange 函数，把代码放到 send() 语句后面即可：
oAjax.open('GET', 'ajax/demo.txt', false);
oAjax.send();
document.getElementById('div').innerHTML = oAjax.responseText;
6、服务器响应
XMLHttpRequest 对象的 responseText 或 responseXML 属性用于获得来自服务器的响应，也就是获取从服务器返回的信息。
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，就使用 responseXML 属性。
如果来自服务器的响应并非 XML，就使用 responseText 属性，该属性返回字符串形式的响应，因此可以直接使用：
document.getElementById('div1').innerHTML = oAjax.responseText;
这里说到 XML ，我们就不得不提一下 AJAX 数据，也就是数据类型，数据类型可以分为很多种，比如中文、英文、数字等，我们经常使用的 JSON，他就是一种轻量级的数据交换格式。XML 相对来说那就是一个古老的存在，基本上都是在一些老式的程序中使用，都会从 XML 中读取数据，现在可以说是要被淘汰了，现在的程序几乎都是使用 JSON，因为同等数据量的情况下，XML 要比 JSON 大很多，这样会浪费带宽，浪费服务器资源，所以在使用 AJAX 获取从服务器返回的信息时，一般都使用 responseText 这个属性。
7、请求状态监控
XMLHttpRequest 对象的 readyState 属性返回请求的当前状态。当请求被发送到服务器时，我们需要执行一些基于响应的任务，每当 readyState 改变时，就会触发 onreadystatechange 事件，readyState 属性存有 XMLHttpRequest 的状态信息。
XMLHttpRequest 对象的三个重要的属性：
onreadystatechange：存储函数(或函数名)，每当 readyState 属性改变时，就会调用该函数。
readyState：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0：请求未初始化。还没有调用 open() 方法。
1：服务器连接已建立，也就是载入。已调用 open() 方法，正在发送请求。
2：请求已接收，载入完成。open() 方法完成，已收到全部响应内容。
3：请求处理中，也叫解析。正在解析响应内容。
4： 请求已完成，且响应已就绪。响应内容解析完成，可以在客户端调用了。
status：请求结果，也就是 HTTP 状态码。200：OK。404：未找到页面。
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
oAjax.onreadystatechange = function (){
if(oAjax.readyState == && oAjax.status == ){
alert(oAjax.responseText);
}
}
这里要注意： onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。
如果网站中存在多个 AJAX 任务，那么就可以使用回调函数，回调函数是一种以参数形式传递给另一个函数的函数，应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>AJAX 实例</title>
<script>
var oAjax;
function ajax(url, fnSucc){
oAjax = new XMLHttpRequest();
oAjax.onreadystatechange = fnSucc;
oAjax.open("GET", url, true);
oAjax.send();
}
function myFunction(){
ajax('ajax/demo.txt?t=' + Math.random(), function (){
if(oAjax.readyState == && oAjax.status == ){
alert(oAjax.responseText);
}
});
}
</script>
</head>
<body>
<button type="button" onclick="myFunction()">读取</button>
</body>
</html>
8、AJAX 原理
AJAX 的原理就跟现实生活中给朋友打电话是一样一样的，首先，你得有个手机，不然拿什么打，也就是要有一个设备，当然现在那都是人手一部，这第一步就可以忽略了，然后就是拨号，所谓的拨号，就是把彼此的手机连接起来，建立一条通道，然后才能通信，如果接通了，就可以进行第三步了，那就是说，我们给别人打电话，肯定是要先说，然后再听对方说，那么最后就是听对方说，不可能是自己说完啪挂了，至少得听对方说点啥，也就是有个响应。
打电话需要4个步骤完成，其实我们在编写 AJAX 时，也是需要4个步骤，首先，就得创建 AJAX 对象，有了这个对象之后，才能进行下面的操作，那么接下来要做的就是连接到服务器，就相当于打电话拨号，连接到服务器之后，你就得主动告诉服务器你需要什么文件，不可能是服务器丢给你几个文件，你自己选，要不是了再给你换一批，不可能这样，再说那服务器都是给成千上万人提供服务，不可能去跟你在那玩你猜我猜猜不猜，所以我们就得明确的告诉服务器我们要哪个文件，那么第三步就是发送请求，最后一步就是接收返回值，获得服务器的响应，也就是把我们需要的那个文件给我们传回来。
我们平时都说 AJAX，其实这只是一个对外的称呼，真正在浏览器内部是通过 XMLHttpRequest 对象来完成 AJAX 请求的，这才是 AJAX 真正的对象。
下面我们看一下，根据这4个步骤，AJAX 代码的具体编写过程：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>AJAX 原理</title>
<script>
window.onload = function (){
var oBtn = document.getElementById('btn');
oBtn.onclick = function (){
// 、设备 = 创建 AJAX 对象
var oAjax = new XMLHttpRequest();
// 创建好对象之后，就可以弹出来看一下。返回：[object XMLHttpRequest]
// IE 和 IE 返回：[object]
//alert(oAjax);
// 在刚创建 AJAX 对象，还没调用 open() 方法，也就是请求未初始化时，弹出 readyState 状态。
//alert(oAjax.readyState); // 返回：
// 、拨号 = 连接服务器
oAjax.open('GET', 'ajax/demo.txt?t=' + new Date().getTime(), true);
// 、说 = 发送请求
oAjax.send();
// 、听 = 接收返回
oAjax.onreadystatechange = function (){
// oAjax.readyState 浏览器和服务器进行到哪一步了
if(oAjax.readyState == ) // 请求已完成
if(oAjax.status == ){ // 成功
// 如果成功了，则弹出服务器响应的文本
alert('成功 ' + oAjax.responseText);
}
else{
// 如果失败了，则弹出请求结果。
alert('失败 ' + oAjax.status);
}
};
};
};
</script>
</head>
<body>
<button type="button" id="btn">读取</button>
</body>
</html>
上面的代码，在进行最后一步时，判断浏览器和服务器进行到哪一步了，当 readyState 属性状态为4时，就是请求完成了，但是请求完成并不代表请求成功，如果读取出错了或者文件不存在等情况导致出错了，那么也算是请求完成了，也就是不管读取成功还是失败，都算是请求完成了，所以需要进一步使用 status 属性判断，若为200，就是成功了。使用自定义的个人站点打开上面的 demo，点击按钮后，弹出成功和文本中的内容，我们可以试着改变一下 URL，就是把他故意写错，再次点击按钮，则会弹出失败和404，也就是未找到页面。
如果每次我们按照这4个步骤编写 AJAX 程序，是非常方便的，也容易理解，但是使用起来比较麻烦，所以我们可以把他封装为一个函数，在使用时调用就好使多了。
function ajax(url, fnSucc, fnFaild){
var oAjax = new XMLHttpRequest();
oAjax.open('GET', url, true);
oAjax.send();
oAjax.onreadystatechange = function(){
if(oAjax.readyState == ){
if(oAjax.status == ){
fnSucc(oAjax.responseText);
}
else{
if(fnFaild){
fnFaild(oAjax.status);
}
}
}
};
}
上面封装的 ajax 函数有三个参数，第一个参数 url，是文件路径，第二个参数 fnSucc，当每次成功的时候调用函数，第三个参数 fnFaild，当失败时调用的函数。这里并不是任何情况下都需要失败时执行一个函数，所以需要做一个判断，只有当 fnFaild 这个参数传入进来，也就是定义了失败时执行的函数，那么这时候才去调用他。
可以在 www 根目录中新建一个文件夹命名为 js，然后把上边的代码复制另存为 ajax.js，下面是封装好之后的应用：
<script src="js/ajax.js"></script>
<script>
window.onload = function (){
var oBtn = document.getElementById('btn');
oBtn.onclick = function (){
ajax('ajax/demo.txt?t=' + new Date().getTime(), function (str){
alert('成功 ' + str);
}, function (){
alert('失败');
});
};
};
</script>
我们要从服务器读取 demo.txt 这个文件，目的是为了获取这个文件中的内容，那么如何获取返回的结果呢？当成功的读取信息后，要调用 fnSucc 这个参数，也就是成功后执行的回调函数，他其实是有一个参数的 str，这个参数可以自定义，str 的作用就是把服务器返回给我们的内容传入进来，这个 str 参数就是 fnSucc(oAjax.responseText) 中传过来的。
当失败的时候，调用 fnFaild 这个参数，也就是失败后执行的回调函数。那么这个失败时调用函数也是有一个参数的，fnFaild(oAjax.status)，为了方便调试，我们也可以给他传入一个参数进来，用来提示请求失败的结果。在真正的网站中，当 AJAX 请求失败时，也不可能弹一个 alert，这样不太友好，所以可以自定义一些更加友好的方式来提示用户。这里建议大家平时在调试 AJAX 程序时，一定要加上失败时执行的回调函数，否则如果失败的话，那么可能没有任何反应。
9、AJAX 应用
请求一个静态的 TXT 文件，在了解了 AJAX 的原理后，很容易的就可以做到，但是在真正的网站中，这样不会有太大的实际用途，前边我们说 AJAX 是一种与服务器交换数据并更新部分网页的艺术，那么既然称之为艺术，因此我们需要使用 AJAX 去请求一些更实用、更复杂的东西，这样才能完美的体现他存在的价值。比如说我们可以去请求动态数据，例如去请求一个装着数据的 JSON 文件。
(1)、读取数组
首先，新建一个 TXT 文件命名为 arr.txt，随意存一个数组，比如[1,2,3,4,5,6]，放在之前的 ajax 文件夹下，然后就可以开始编写程序了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>AJAX 读取数组</title>
<script src="js/ajax.js"></script>
<script>
window.onload = function (){
var oBtn = document.getElementById('btn');
oBtn.onclick = function (){
ajax('ajax/arr.txt?t=' + new Date().getTime(), function (str){
// str 是服务器返回的内容，弹出来看一下
//alert(str); 返回：[,,,,,]
// 那么再弹出内容的长度
//alert(str.length); // 返回：
// 返回对象的类型：string
//alert(typeof str);
// eval() 函数用于把字符串转换为 JS 代码执行
//alert(eval(str)); // 返回：,,,,,
// 现在可以返回内容的长度
//alert(eval(str).length); // 返回：
// 可以把这个函数保存为变量，查看每项的值
var arr = eval(str);
alert(arr[]); // 返回：
}, function (){
alert('失败');
});
};
};
</script>
</head>
<body>
<button type="button" id="btn">读取</button>
</body>
</html>
上面的实例中，str 是服务器返回给我们的内容，弹出来之后，是我们定义的数组，没有问题，那么弹出数组的长度，却返回 13，数组的长度本应该是 6 啊，怎么会是 13 呢，我们再弹出这个对象的类型，结果返回 string，尽管他长的很像数组，但他确实是一个字符串，这是为什么呢？其实通过 AJAX 的方式读取的任何对象都是以字符串形式存在的，那么这个字符串的长度就应该是13，方括号加上标点。如果要把一个字符串中存的数组提取出来，就要使用 eval(string) 函数，该函数可计算某个字符串，并把他作为 JavaScript 代码来执行，也就是可以把一个语句中的内容解析为 JS 可以识别的语句，该方法只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。那么使用该方法之后再次返回数组的内容和长度，就没有问题了。我们也可以把这个函数保存在一个变量中，来查看每项的值。虽然 eval() 的功能非常强大，但在实际使用中用到他的情况并不多。
(2)、读取 JSON 数据
首先，还是需要新建一个 JSON 文件，可以命名为 json.json，可以随意存入一个数组对象，比如[{a:9, b:6, c:15}, {a:5, b:7, c:12}]，然后放在 ajax 文件夹下，最后开始编写程序。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>AJAX 读取数组</title>
<script src="js/ajax.js"></script>
<script>
window.onload = function (){
var oBtn = document.getElementById('btn');
oBtn.onclick = function (){
ajax('ajax/arr.txt?t=' + new Date().getTime(), function (str){
// str 是服务器返回的内容，弹出来看一下
//alert(str); 返回：[,,,,,]
// 那么再弹出内容的长度
//alert(str.length); // 返回：
// 返回对象的类型：string
//alert(typeof str);
// eval() 函数用于把字符串转换为 JS 代码执行
//alert(eval(str)); // 返回：,,,,,
// 现在可以返回内容的长度
//alert(eval(str).length); // 返回：
// 可以把这个函数保存为变量，查看每项的值
var arr = eval(str);
alert(arr[]); // 返回：
}, function (){
alert('失败');
});
};
};
</script>
</head>
<body>
<button type="button" id="btn">读取</button>
</body>
</html>
上面的实例，使用 eval() 函数解析出来之后，还是一个数组，返回数组的第0个元素，也就是{a:9, b:6, c:15}，他还是一个 JSON 数据，所以返回 obj，那么再返回第0个元素中 a 的值，可以看到，使用方法和读取数组的方法是一样的。那如果 JSON 中保存的数据更复杂一些，比如是一组用户信息，要如何去读取，然后并以列表形式显示在网页中呢？
下面是 JSON 用户信息数据，可以复制替换一下，这里在保存 JSON 时需要注意编码格式，一旦文件中出现中文了，就必须保存为 UTF-8 的格式，为了方便区分，我们可以把这个文件命名为 date.json 。
[
{
"user": "小白",
"sex": "男",
"age":
},
{
"user": "初夏",
"sex": "女",
"age":
},
{
"user": "小明",
"sex": "男",
"age":
},
{
"user": "静静",
"sex": "女",
"age":
}
]
(3)、创建 DOM 元素显示 JSON 数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>AJAX 读取JSON</title>
<script src="js/ajax.js"></script>
<script>
window.onload = function (){
var oBtn = document.getElementById('btn');
var oUl = document.getElementById('u');
oBtn.onclick = function (){
ajax('ajax/date.json?t=' + new Date().getTime(), function (str){
var arr = eval(str);
//循环遍历返回的对象
for(var i=; i<arr.length; i++){
//每次循环的时候创建一个li元素
var oLi = document.createElement('li');
//向li元素插入内容
oLi.innerHTML = '姓名：<strong>' + arr[i].user + '</strong> 性别：<span>' + arr[i].sex + '</span> 年龄：<span>' + arr[i].age + '</span>';
//将创建好的li元素插入到ul中
oUl.appendChild(oLi);
}
},function (){
alert('失败');
});
};
};
</script>
</head>
<body>
<input id="btn" type="button" name="user" value="读取">
<!-- 点击按钮生成json数据列表 -->
<ul id="u">
<!-- <li>姓名：<strong>小白</strong> 性别：<span>男</span> 年龄：<span></span></li> -->
</ul>
</body>
</html>
上面的代码，写起来也没什么难度，都是一些基础的知识，在浏览器打开自定义的个人站点，点击读取按钮之后，JSON 文件中存的数据，就会以为列表的形式显示在页面上，这里只是简单的做了一个效果，我们还可以给他定义样式，或者可以创建一个表格，让他更友好的显示。
这里在网上看到了一个方法，在处理 AJAX 请求得到 JSON 数据响应时，也就是服务器返回的 JSON 字符串，需要做一次对象化处理，可以不使用 eval() 方法，而是使用 new Function() 代替，新的 Function() 构造就类似于 eval()，或者使用 jQuery 提供的 $.getJSON() 方法获得服务器返回，那么就可以不使用 eval() 方法了。具体操作如下：
//var arr = eval(str);
var arr = (new Function('', 'return' + str)());
此时的 arr 就会被解析成一个 JSON 对象了，然后再使用循环遍历，将数据插入到新建的 li 元素中。
10、AJAX 总结
我们只是重点讲了一些 AJAX 最基础的知识，到这里，就可以使用 AJAX 做一些基本的应用了，但是 AJAX 不仅仅在于此，他有很多非常高级而且很实际的应用，比如一些大型系统如何使用 AJAX 搭建，如何编写一套完整的 AJAX 交互程序，还有跨域，还有JSONP等，要想真正的掌握 AJAX 这门艺术，我们的路还很长。