ajax

最新推荐文章于 2024-07-12 16:27:40 发布

banpao6896

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量91

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/api9527/p/10661336.html

版权

（一）、起源：2005年，Adaptive Path公司的Jesse James Garrett发明了Ajax一词

（二）、作用：概括异步加载页面内容

（三）、生活用处：我们的web应用涉及大量的F5，例如：点击某个链接，请求发送回服务器，然后服务器再根据客户操作返回新页面，即使客户要看的只是时间一小块，也要刷新和重新加载整个页面

（四）、Ajax的核心用处：对页面请求以异步方式发送到服务器，当想查看时间或者公司标志等等的时候，刷新页面的时候以异步发送到服务器。而服务器不会用整个页面来影响请求，它会在后台处理请求，与此同时用户还能继续和页面交互。

1）XMLHttpRequest对象

ajax技术的核心就是XMLHttpRequest对象。XMLHttpRequest充当着浏览器中的客户端与服务器之间的中间人角色。曾经请求都是要浏览器发出，而javascript通过XMLHttpRequest这个对象可以自己发送请求，同时也可以自己处理。

举个例子体验一下：

文件：

代码：

1）example.txt

这里是example.txt文件。

2）ajax.html

 1 <!DOCTYPE html>
 2 <html lang = "en">
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>Ajax</title>
 6 </head>
 7 <body>
 8     <div id = "new"></div>
 9     <script src="scripts/addLoadEvent.js"></script>
10     <script src="scripts/getHTTPObject.js"></script>
11     <script src="scripts/getNewContent.js"></script>
12 </body>
13 
14 </html>

3) getNewContent.js

 1 function getNewContent(){
 2     var request = getHTTPObject();
 3     if(request){
 4         request.open("GET","example.txt",true);
 5         request.onreadystatechange = function(){//onreadystatechange 是一个事务处理函数 6             if(request.readyState == 4){
 7                 var para = document.createElement("p");
 8                 var txt = document.createTextNode(request.responseText);
 9                 para.appendChild(txt);
10                 document.getElementById('new').appendChild(para);
11             }
12         };
13         request.send(null);
14     }else{
15         alert('sorry,your browse doesn \'t support XMLHttpRequest');
16     }
17 }
18 addLoadEvent(getNewContent);

4）getHTTPObject.js

 1 function getHTTPObject(){
 2     if(typeof XMLHttpRequest == "undefined")
 3     XMLHttpRequest = function(){
 4         try{ return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
 5         catch(e){}
 6         try{ return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
 7         catch(e){}
 8         try{ return new ActiveXObject("Msxml2.XMLHTTP");}
 9         catch(e){}
10         return false ;
11 
12     }
13     return new XMLHttpRequest();
14 }

5）addLoadEvent.js

 1 function addLoadEvent(func) {
 2     var oldonload = window.onload;
 3     if (typeof window.onload != 'function') {
 4       window.onload = func;
 5     } else {
 6       window.onload = function() {
 7         oldonload();
 8         func();
 9       }
10     }
11   }

理解：

1）exaple.txt文件充当服务器脚本的输出

在IE中创建新的对象使用这个代码：

var request = new ActiveXObject(Msxml2.XMLHTTP.3.0)

其他的浏览器也是基于XMLHttpRequest来创建对象：

1 var request = new XMLHttpRequest();

2）通过getHTTPObject.js来检测XMLHttpRequest

如果失败，就继续检测其他的方法，最终返回false

3）XMLHttpRequest对象有很多种方法，例如：

 1 XMLHttpRequest.abort()
 2 
 3 如果请求已经被发送,则立刻中止请求.
 4 
 5 XMLHttpRequest.getAllResponseHeaders()
 6 
 7 以字符串的形式返回所有用CRLF分隔的响应头，如果没有收到响应，则返回null。
 8 
 9 XMLHttpRequest.getResponseHeader()
10 
11 返回包含指定响应头的字符串，如果响应尚未收到或响应中不存在该报头，则返回null。
12 
13 XMLHttpRequest.open()
14 
15 初始化一个请求。该方法只能JavaScript代码中使用，若要在native code中初始化请求，请使用openRequest()。
16 
17 XMLHttpRequest.overrideMimeType()
18 
19 重写由服务器返回的MIME type。
20 
21 XMLHttpRequest.send()
22 
23 发送请求。如果请求是异步的（默认），那么该方法将在请求发送后立即返回。
24 
25 XMLHttpRequest.setRequestHeader()
26 
27 设置HTTP请求头的值。您必须在open()之后、send()之前调用setRequestHeader()这个方法

其中最有用的是open方法，用来指定服务器上将要访问的文件，指定的类型：GET , POST , SEND 。这三个参数用于指定请求是否以异步方式发送和处理。

4）当页面加载完成之后，getNewContent.js文件就会发起一个GET请求，请求与ajax.html文件位于同一目录的example.txt文件

request.open("GET","example.txt",true);

其中呢，onreadystatechange 是一个事物处理函数，作用就是在服务器给XMLHttpRequest对象送回相应的时候被触发执行。在这个函数中，可以根据服务器的具体相应做相应的处理。所以我们在代码中给它指定了一个处理函数：

1  request.onreadystatechange = function(){
2             if(request.readyState == 4){　　　　　　//处理相应
3                 var para = document.createElement("p");
4                 var txt = document.createTextNode(request.responseText);
5                 para.appendChild(txt);
6                 document.getElementById('new').appendChild(para);
7             }
8         };

为什么判断request.readyState == 4？

服务器在向XMLHttpRequest对象发回响应的时候，这个对象有很多的属性是可以使用的，浏览器就很在不同的阶段更新出readyState 的属性值，那么这个属性值有5中，分别是：

0表示未初始化
1表示正在加载
2表示加载完毕
3表示正在交互
4表示完成

所有说只有readyState 的属性值返回4的时候才可以访问服务器发送回来的数据。

5）如何访问服务器发送回来的数据啊？

很简单，通过2个属性就OK啦。

responseText属性

用于保存文本字符串形式的数据

responseXML属性

用于保存Content-Type头部中指顶为“text/xml”的数据，其实是一个DomcumentFragment对象。我可以使用各种DOM方法来处理这个对象。而这也是XMLHttpRequest这个名称里面有XML的原因。

6）

1 if(request.readyState == 4){
2                 var para = document.createElement("p");
3                 var txt = document.createTextNode(request.responseText);
4                 para.appendChild(txt);
5                 document.getElementById('new').appendChild(para);
6             }

onreadystatechange 事务处理函数等到readyState的值等于4之后，就会从responseText属性里面取得文本数据，然后把数据放到一个段落中去，再将新段落添加到DOM里。

最后打开：

转载于:https://www.cnblogs.com/api9527/p/10661336.html

banpao6896

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax

（一）、起源：2005年，Adaptive Path公司的Jesse James Garrett发明了Ajax一词（二）、作用：概括异步加载页面内容（三）、生活用处：我们的web应用涉及大量的F5，例如：点击某个链接，请求发送回服务器，然后服务器再根据客户操作返回新页面，即使客户要看的只是时间一小块，也要刷新和重新加载整个页面（四）、Ajax的核心用处：对页...
复制链接

扫一扫

ajax

“相关推荐”对你有帮助么？