Ajax
概念理解
- 全称：Ajax是对Asynchronous Javascript + XML的简写。
- 作用：能够向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验。
- 技术核心：XMLHttpRequest对象（简称XHR）。XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据。即可以使用XHR对象取得新数据，然后再通过DOM将新数据插入到页面中。
- 数据格式：虽然名字中包含XML的成分，但Ajax通信与数据格式无关。这种技术就是无须刷新页面即可从服务器取得数据，但不一定是XML数据。
创建Ajax
-
创建XMLHttpRequest对象
var xhr; if (window.XMLHttpRequest){ //IE7+,Firefox,Chrome,Opera,Safari xhr=new XMLHttpRequest(); }else{ // 兼容 IE6,IE5 xhr=new ActiveXObject("Microsoft.XMLHTTP"); } -
对于异步请求，不必等待服务器响应，JS代码继续执行。
可以检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。0:未初始化。尚未调用open()方法。 1:启动。已经调用open()方法，尚未调用send()方法。 2:发送。已经调用send()方法，尚未接收响应。 3:接收。已经接收到部分响应。 4:完成。已经接收到全部响应数据。
只要readyState属性的值由一个值变成另一个值，就会触发onreadyStatechange事件，利用这个事件来检测每次状态变化后readyState值，获取服务器的响应也在这个事件中处理。
xhr.onreadyStatechange = function(){ If(xhr.readyState == 4){ if(xhr.status >=200 && xhr.status = 304){ alert(xhr.responseText); }else{ alert(“Request was unsuccessful: ”+ xhr.status); } } }; -
创建一个新的HTTP请求,并指定请求的方法、URL及异步(true)/同步(false)
xhr.open(method,url,async); 注意：open 的参数要牢记，很多面试官爱问这样的细节 1)method：请求的类型；GET 或 POST 2)url：文件在服务器上的位置 3)async：true（异步）或 false（同步） 注意：post请求一定要设置请求头的格式内容 xhr.open("post","ajax_test.html",true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //使用XHR模仿表单提交 xhr.send("fname=Henry&lname=Ford"); -
发送HTTP请求
xmlhttp.send(); 若是post请求，参数为作为请求主体发送的参数。 若是get请求，参数为null。
-
获取同步发送请求返回的数据
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ alert(xhr.responseText); }else{ alert(“Request was unsuccessful: ”+ xhr.status); } - 使用JavaScript和DOM实现局部刷新