1.什么是Ajax
Ajax:是Asynchronous Javascript And XML的简写,即异步JavaScript和XML
用途:动态刷新局部数据,无需卸载整个页面,从而带来更好的用户体验
Ajax核心:XMLHttpRequest对象(简称XHR)
2.如何创建XHR对象
function createXHR() { if (typeof XMLHttpRequest !== "undefined") { return new XMLHttpRequest(); }else if{ if (typeof ActiveXString != "undefined") { var versions = [ "MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp" ]; for ( var i = 0,len = versions.length; i < len; i++) { try { var xhr = new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i]; break; } catch (error) { // ... } } } return new ActiveXObject(arguments.callee.activeXString); }else { throw new Error("No XHR object avaliable."); } }
XMLHttpRequest这个对象的属性:
responseText 作为响应主体返回的文本。
responseXML 如果响应的内容类型是"text/xml"或"application/xml",这个属性将保存包含着响应数据的xml DOM文档。
status 响应的http状态
statusText http状态的说明
当XHR对象把一个HTTP请求发送到服务器的过程中会经历几个状态,直到请求被处理,然后才接收一个回应。readyState是XHR请求的状态属性,它本身有5个属性值:
3.实现Ajax的步骤
A.创建一个XHR对象
var xhr= createXHR();
B.设置响应HTTP请求状态变化的函数
xhr.onreadystatechange = function() { if(xhr.readyState==4){ if(xhr.status >= 200 && xhr.status < 300 &&xhr.status == 304){ xxx.innerHTML = xhr.responseText;//刷新了xxx中的数据 } else { alert("Request was Failed:"+xhr.status); } } };
C.创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及表示是否异步发送请求的布尔值
xhr.open("get","getAjaxData.PHP",true);//true表示异步发送请求
D.设置自定义请求头部(可选)
xhr.setRequestHeader("myHeader","myValue");//jsonp跨域请求时会用到自定义的头部
E.发送http请求
xhr.send(null);//作为请求主体发送的数据,无数据必须传入null,post请求时经常会发送数据
完整代码如下:
var xhr= createXHR(); xhr.onreadystatechange = function() { if(xhr.readyState==4){ if(xhr.status >= 200 && xhr.status < 300 &&xhr.status == 304){ xxx.innerHTML = xhr.responseText; } else { alert("Request was Failed:"+xhr.status); } } }; xhr.open("get",true); xhr.setRequestHeader("myHeader","myValue"); xhr.send(null);
原文地址:https://www.jb51.cc/ajax/162345.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。