1.封装XMLHttpRequest对象
// 封装通用的xhr,兼容各个版本 function createXHR() { //判断浏览器是否将XMLHttpRequest作为本地对象实现,针对IE7,Firefox,Opera等浏览器 if (typeof XMLHttpRequest != "undefined") { return new XMLHttpRequest(); } else if (typeof ActiveXObject != "undefined") { //将所有可能出现的ActiveXObject版本放在一个数组中 var xhrArr = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP']; //遍历创建XMLHttpRequest对象 var len = xhrArr.length; for (var i = 0; i <len; i++) { try { //创建XMLHttpRequest对象 xhr = new ActiveXObject(xhrArr[i]); //如果创建XMLHttpRequest对象成功,则跳出循环 break; } catch (ex) {} } } else { throw new Error("No XHR object available."); } }
2.创建http请求
xhr.open('get', './ser/se.json', true);
//xhr.open('post','./ser/se.json',ture);
//如果使用post 就必须适应setRequestHeader()添加http开头 然后在send()方法中规定希望的数据
//语法:xmlhttp【xhr对象】.setRequestHeader(header,value)
//使用:xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
3.发送请求
xhr.send(null);
//post xhr.send({user:"zhangsan",id:6});
4.响应请求
xhr =createXHR()
//响应XMLHttpRequest对象状态变化的函数 //在我们readystate 属性发生改变时候 xhr.onreadystatechange = function() { //异步调用成功
//readyStae 有5给状态值 分别为0-4
//0是初始化 表示还没有调用send方法 XMLHttpRequest对象还没有初始化
//1是载入完成 send()方法已经执行完成 XMLHttpRequest对象的请求发送成功
//2是载入完成 send()方法已经执行完成 XMLHttpRequest对象的请求发送成功
//3是解析 正则解析响应的内容 XMLHttpRequest对象读取服务器响应的结束
//4是完成 异步调用完成 响应解析完成 XMLHttpRequest对象读取服务响应结束
//当readyState发生改变的时候 会触发Ajax自带的事件 onreadystatechang
if (xhr.readyState=== 4) {
//status是状态码 常见的有200和400 200表示请求成功 100表示客户端需要继续发送请求 404页面找不到
//304 表示资源没有被修改 可以使用浏览器缓存 也就是表示之前一定请求成功过,而且你请求的资源距离上次请求没有发送改变
if ((xhr.status >= 200 && xhr.status <300) || xhr.status === 304) { //获得服务器返回的数据 //eval 转换为js来使用
/*
responseText 从服务器进程返回数据的字符串形式
reponseXML 从服务器进程返回的DOM兼容的文档数据对象
status 从服务器返回的数字代码 如404未找到 和200已就绪
status Text 伴随状态码的字符信息
*/
date = JSON.parse(xhr.resoibseText) //date = eval("("+xhr.responseText+")"); console.log(date.slider);
} } };
5.总结
就是获取XMLHttpRequestHttp对象,通过open创建HTTP请求,用send发送,然后用onreadystatechang检测是否请求成功,如果成功获取数据
6.
JavaScript值 JavaScript的eval()类似于JSON.parse()方法,可以将json字符串转换为json对象,但是,eval()可以执行不符合JSON格式的代码,有可能会包含恶意代码,所以尽量少用
stringify() 语法:JSON.stringify() 功能:用于将一个值转为字符串,该字符串应该符合JSON格式,并且可以被JSON.parse()方法还原