JavaScript高级程序设计（第3版）阅读笔记第03天-ajax和Comet

最新推荐文章于 2024-09-15 19:20:58 发布

stubbor

最新推荐文章于 2024-09-15 19:20:58 发布

阅读量501

点赞数

分类专栏：阅读笔记文章标签： ajax 其他跨域技术 javascript

阅读笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第21章ajax与Comet

本章内容

*使用XMLHttpRequest对象

*使用XMLHttpRequest事件

*跨域Ajax通信的限制

　　ajax是对Asynchronous JavaScript+XML的简写。这一技术能够向服务器请求额外的数据而无需卸载页面。

　　ajax技术的核心是XMLHttpRequest对象（简称XHR）,可以使用XHR对象获取新数据，然后再通过DOM将新数据插到页面中。

使用XMLHttpRequest构造函数

var xhr = new XMLHttpRequest();

调用这个方法

xhr.open("get","example.txt",false);
xhr.send(null);

　　这里的send（）方法接收一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null，因为这个参数对于有些浏览器是必需的。调用send（）之后，请求就会被分派到服务器。

　　由于这次请求时同步的，JavaScript代码会等到服务器响应之后再继续执行。在收到响应后，响应的数据会自动填充XHR对象的属性。

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

　　*responseXML：如果响应的是”text/xml”或”application/xml”，这个属性中将保存着响应数据的XML DOM文档。

　　*status：响应的HTTP状态。

　　*statusText：HTTP状态的说明。

　　在接收到响应后，第一步是检查status属性，以确定响应已经成功返回。一般来说，可以将HTTP状态代码为200作为成功的标志。304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本。

　　多数情况，要发送异步请求，才能让JavaScript继续执行而不必等待响应。同城，支队readyState值为4，所有数据都已经就绪。必须在调用open()之前制定onreadystatechange时间处理程序才能保证浏览器兼容性。

var xhr = createXHR();
xhr.onreadystatechange = function(){
    if(xhr.readystate == 4){
        if((xhr.status>=200 && xhr.status<300)||xhr.status == 304){
            alert(xhr.responseText);
        }else{
            alert("request was successful:"+xhr.status);
        }
    }
};
xhr.open("get","example.txt",true);
xhr.send(null);

　　在接收响应之前还可以调用abort()方法来取消异步请求。

xhr.abort()

HTTP头部信息

　　*accept：浏览器能够处理的内容类型。

　　*connection：浏览器与服务器之间连接的类型。

　　*cookie：当前页面设置的任何cookie。

　　*host：发出请求的页面所在的域。

　　*referer：发出请求的页面的url。

其他跨域技术：

1.图像Ping

　　图像Ping是与服务器进行简单、单向的跨域通信的一种方式。响应可以是任何内容，通常是像素图或204响应。通过图像Ping，浏览器得不到任何具体的数据，可以通过监听load和error事件，能知道响应是什么时候接收到的。

var img= new Image();
img.onload = img.onerror = function(){
    alert("done");
};
img.src = "http://www.example.com/...";

图像Ping最常用于跟踪用户点击页面或动态广告曝光次数。有两个缺点，一是只能发送GET请求，二是无法访问服务器的响应文本。只能用于浏览器与服务器间的单向通信。

2.JSONP

　　JSONP是JSON with padding （填充式JSON或参数式JSON）的简写，看起来和JSON差不多，只不过是被包含在函数调用的函数。

callback({"name":"nicholas"});

　　JSONP由两部分组成：回调函数和数据。

http://freegeoip.net/json/?callback=handlePesponse

　　这个地址是在请求一个jsonp地理定位服务，这里指定的回调函数的名字是handlePesponse（）

　　JSONP是通过动态`<script>`元素来使用的，使用时可以为src属性制定一个跨域URL，可以不受限制的从其他域加载资源。因为JSONP是有效的JavaScript代码，所以在请求完成后，即在JSONP响应加载到页面中以后，就会立即执行。

function handleResponse(response){
    alert("you are at ip address"+response.ip+"，which isin"+response.city+", "+response.region_name);
}
var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script,document.body.firstChild);