Ajax高级笔记 JavaScript高级程序设计笔记

发布时间：2020-12-15 23:17:58 所属栏目：百科来源：网络整理

导读：Ajax通信与数据格式无关，从服务器获取的数据不一定是XML数据。 Ajax的核心：XMLHttpRequest对象(简称XHR) 在XHR对象之前，Ajax通信通常使用hack手段，如使用隐藏的或内嵌的框架。 XHR对象为向服务器发送信息和解析服务器响应提供了流畅的接口。 1.XMLHttpRe

Ajax通信与数据格式无关，从服务器获取的数据不一定是XML数据。

Ajax的核心：XMLHttpRequest对象(简称XHR)

在XHR对象之前，Ajax通信通常使用hack手段，如使用隐藏的或内嵌的框架。

XHR对象为向服务器发送信息和解析服务器响应提供了流畅的接口。

1.XMLHttpRequest对象

IE5是第一款引进XHR对象的浏览器，通过MSXML库中的ActiveX对象实现(有3个版本)。

　　兼容所有浏览器，创建XHR对象：

<div class="jb51code">
<pre class="brush:js;">
function createXHR(){
if (typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined"){
if (typeof arguments.callee.activeXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i,len;

  for (i=0,len=versions.length; i < len; i++){
    try {
      new ActiveXObject(versions[i]);
      arguments.callee.activeXString = versions[i];
      break;
    } catch (ex){
      //skip
    }
  }
}

return new ActiveXObject(arguments.callee.activeXString);

} else {
throw new Error("No XHR object available.");
}
}

之后就能在所有浏览器创建XHR对象：var xhr = createrXHR();

2.原生XHR对象 (支持的浏览器: IE7+、FF、Chrome、Opera、Safari)

通过XMLHttpRequest构建函数，创建XHR对象：

3.XHR用法

3-1.open()

open() 3个参数: 发送的类型、请求的URL、表是否异步的布尔值

①URl为相对于执行代码的当前页，或绝对地址；

②false为同步，JavaScript代码会在服务器响应后再继续执行；

③调用open()只是启动一个请求以备发送，还没真正发送；

④只能在同个域中使用相同端口和协议的URL发送请求。

3-2.send()

send() 1个参数: 请求主体发送的数据，不需要通过请求主体发送数据则传入null。

调用send()后，请求被分派到服务器。

3-3. 收到响应后，响应数据会自动填充XHR对象的属性：

responseText：作为响应的主体被返回的文本；

responseXML：若响应的内容类型”text/xml”或”application/xml”，此属性保存响应数据XML DOM文档

status：响应的HTTP状态；

statusText：HTTP状态的说明。

☆：无论什么内容类型，响应主体的内容都会保存在responseText属性中。对于非XML数据，responseXML属性值为null。 3-4.status属性确认响应是否成功返回

HTTP状态代码：

200：响应有效，responseText属性已就绪，内容类型正确下的responseXML也可访问。

304：响应有效，只是请求的资源并为修改，可直接使用浏览器中缓存的版本。

正确检查上述2种状态代码:

status判断

= 200 && xhr.status <=300) || xhr.status == 304) { alert(xhr.responseText); } else { alert("Request was unsuccessful:" + xhr.status); };

3-5.readystate属性

该属性存储请求/响应过程的当前活动状态。

0 : 未初始化，未调用open()； 1 : 启动，调用了open()； 2 : 发送，调用了send()，未接受响应； 3 : 接受，已接受部分响应； 4 : 完成，已接受全部响应，且可在客户端使用。

3-6.readystatechange事件

该事件，在readystate属性值改变时触发。

readystatechange事件句柄

= 200 && xhr.status < 300) || xhr.status == 304){ alert(xhr.responseText); } else { alert("Request was unsuccessful: " + xhr.status); } } }; xhr.open("get","example.txt",true); xhr.send(null);

①必须在调用open()之前知道readystatechange事件的事件处理程序，确保兼容。

②该事件处理程序中没有传递event对象，必须通过XHR对象本地来确定下一步怎么做；

③使用xhr对象而不使用this对象，是因为onreadystatechange事件处理程序的作用域问题。使用this对象在一些浏览器会导致函数执行失败或发生错误。

3-7.abort()

调用此方法可取消异步请求：xhr.abort();

调用后，xhr对象停止触发事件，不允许访问如何与响应相关的属性；

终止请求后，应对XHR对象进行解引用操作，不建议重用XHR对象。

4、HTTP头部信息

发送请求时的头部信息：

Accept：浏览器能够处理的内容类型

Accept-Charset：浏览器能够显示的字符集

Accept-Encoding：浏览器能够处理的压缩编码

Axxept-Language：浏览器当前设置的语言

Connection：浏览器与服务器之间连接的类型

Cookie：当前页面设置的如何Cookie

Host：发送请求耳洞页面所在域

Referer：发出请求的页面的URI

User-Agent：浏览器的用户代理字符串

setRequestHeader()

设置自定义头部信息。

2个参数：头部字段名称、头部信息值。

需在open()方法之后调用send()之前调用setRequestHeader()，才能成功发送请求头部信息。

自定义HTTP头部信息

= 200 && xhr.status < 300) || xhr.status == 304){ alert(xhr.responseText); } else { alert("Request was unsuccessful: " + xhr.status); } } }; xhr.open("get",true); xhr.setRequestHeader("MyHeader","MyValue"); xhr.send(null);

getRequestHeader()

获取指定的相应头部信息

获取一个包含所有头部信息的长字符串

xhr.getAllRequestHeader();

5、GET请求

　　对于XHR对象，位于opne()的URL末尾的查询字符串需经过编码，使用encodeURIComponent()编码。

　　名-值对需用和号(&)分隔。

　　自定义函数，添加URL查询字符串参数：

var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script,document.body.firstChild);

headleResponse()为回调函数，将在响应到来后执行。

8-2-3.JSONP之所以流行，是因为：

　　　　①能够直接访问响应文本；

　　　　②支持浏览器与服务器之间的双向通信。

　　不足：

　　　　①JSONP从其他域加载代码执行，因此该域必须安全可靠；

　　　　②很难确保JSONP请求是否失败。

8-3Comet ”服务器推送" 【不兼容IE】

　　Ajax从页面想服务器请求数据，Comet则是服务器向页面推送数据，Comet能近乎实时地向页面推送信息。

8-3-1.实现Comet的2种方式：长轮询和流

　　①长轮询：与短轮询相反，页面发送一个请求，服务器一直保持连接打开，直到有数据可发送时就向页面发送数据。接收完数据后浏览器关闭连接，随机又发送一个新请求，在页面打开期间如此循环...

　　【短轮询是服务器立即发送数据，即使数据无效，长轮询是等待发送响应。】

　　轮询的优点是，所有浏览器都支持。通过XHR对象和setTimeout()实现。

　　②HTTP流：它在网页的整个生命周期内只使用一个HTTP连接。浏览器发送一个请求，服务器保持连接打开，再周期性向浏览器发送数据.

PHP例子

　　　　//等几秒
　　　　sleep(10);

　　　　$++;
　　}
...

实现HTTP流的关键：所有服务器端语言都支持打印到输出缓存然后刷新的功能。(将输出缓存中的内容一次性全部发送给客户端)

使用XHR实现HTTP流的典型例子

xhr.open("get",true);
xhr.onreadystatechange = function(){
var result;

if (xhr.readyState == 3){

//get only the new data and adjust counter
result = xhr.responseText.substring(received);
received += result.length;

//call the progress callback
progress(result);

} else if (xhr.readyState == 4){
finished(xhr.responseText);
}
};
xhr.send(null);
return xhr;
}

var client = createStreamingClient("streaming.php",function(data){
alert("Received: " + data);
},function(data){
alert("Done!");
});

以上就是编程之家小编为大家分享的Ajax高级笔记的相关内容，对于学习ajax的朋友应该是个不错的入门讲解。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!