Ajax
AjaxAjax能够向服务器请求额外的数据而无需卸载页面。 XMLHttpRequest对象Ajax技术的核心是XMLHttpRequest对象(简称XHR),XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器取得更多信息,意味着用户单击后们可以不必刷新页面也能取得新数据。也就是说,可以使用XHR对象取得新数据没然后再通过DOM将新数据插入到页面中。 IE7+、Firefox、Opera、Chrome和Safari都支持原生的XHR对象,在这些浏览器中创建XHR对象只要像下面这样使用XMLHttpRequest构造函数: var xhr = new XMLHttpRequest(); XHR的用法在使用XHR对象时,要调用的第一个方法是open(),它接受三个参数:要发送的请求的类型(“get”、"post"等)、请求的URL和表示是否异步发送请求的布尔值。 xhr.open("get","example.php",false); open()方法并不会真正发送请求,而只是启动一个请求以备发送。 注意:只能向同一个域中使用相同端口和协议的URL发送请求。 ? 要发送特定的请求,必须像下面这样调用send()方法: xhr.send(null); ?XMLHttpRequest.send()?方法接受一个可选的参数,其作为请求主体;如果请求方法是 GET 或者 HEAD,则应将请求主体设置为 null。 ? 服务器在收到响应后,响应的的数据会自动填充XHR对象的属性。相关的属性如下: responseText:返回的文本 responseXML:如果响应的内容类型是“text/xml”或“application/xml”,这个属性中将保存着响应数据的XML DOM文档 status:响应的HTTP状态 statusText:HTTP状态的说明 在接收到响应后,第一步是检查status属性,以确定响应已经成功返回。 像前面这样发送同步请求当然没问题,但是,要发送异步请求,需要检测XHR对象的readyState属性,该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下:
只要readyState属性的值由一个值变成另一个值,都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。必须在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if(xhr.readyState == 4) { if(xhr.status >=200 && xhr.status <300) || xhr.status == 304 ) { console.log(xhr.responseText); } else { console.log("Request was unsuccessful: " + xhr.status); } } }; xhr.open("get","example.txt",true); xhr.send(null);
另外,在接收到响应之前还可以调用abort()方法来取消异步请求。 ? GET请求GET是最常见的请求类型,最常用于向服务器查询某些信息。必要时们可以将查询字符串参数追加到URL的末尾,以便将信息发送给服务器。 GET 方法请注意,查询字符串(名称/值对)是在 GET 请求的 URL 中发送的: /test/demo_form.asp?name1=value1&name2=value2 有关 GET 请求的其他一些注意点:
POST请求POST请求通常用于向服务器发送应该被保存的数据。 POST 方法请注意,查询字符串(名称/值对)是在 POST 请求的 HTTP 请求主体中发送的: POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2
有关 POST 请求的其他一些注意点:
比较 GET 与 POST下面的表格比较了两种 HTTP 方法:GET 和 POST。
GET和POST还有一个重大区别,简单的说: GET产生一个TCP数据包;POST产生两个TCP数据包。 对于GET方式的请求,浏览器会把http header和data一并发送出去,服务器响应200(返回数据); 而对于POST,浏览器先发送header,服务器响应100 continue,浏览器再发送data,服务器响应200 ok(返回数据)。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |