封装ajax原理
- 首先处理 用户如果不传某些参数,设置默认值
- type默认get
- 默认url为当前页
- 默认async方式请求
- data数据默认为{}
- 处理用户传进来的参数对象
- 遍历,拼接成key=value&key=value形式,加入数组
- 通过XMLHttpRequest对象创建xhr,早期的IE浏览器不支持XMLHttpRequest对象,通过
var xhr = new ActiveXObject(‘Msxm12.XMLHTTP‘)
创建 - 判断用户请求的方法
- get:将数据拼接在url后面,
- post:需要加一个请求头,并且用send方法传递数据
- 判断数据是否请求成功
xhr.readyState == 4 && xhr.status == 200
表示请求成功
- 根据服务器端返回的数据类型进行加工,再用callback传递出去
- 如果返回的是json格式的数据,就转换成js对象
json.parse
- 如果是xml格式,就将DOM文档对象返回
- 将处理好的数据用callback传递出去
- 如果返回的是json格式的数据,就转换成js对象
- 优化!!!
- 将用户需要传入的参数挂载到options对象上,用户只需要传入一个对象就可以使用了
function ajax(options){ //默认值的处理,用户不传某些参数的时候,设置一些默认值 //设置type的默认值为get options.type = options.type || "get"; //设置请求地址的默认值为当前页地址 options.url = options.url || location.href; // //设置async的默认值 options.async = options.async || "true"; //设置options.data的默认值 options.data = options.data || {}; //处理用户传进来的请求参数(data)对象 //{key: "123", age: 1, gender: "male"} //key=123&age=1&gender=male var dataArr = []; for(var k in options.data){ dataArr.push(k + "=" + options.data[k]); } var dataStr = dataArr.join("&"); var xhr = new XMLHttpRequest(); xhr.open(options.type, options.type == "get"? options.url + "?" + dataStr : options.url, options.async); if(options.type == "post"){ xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } xhr.send(options.type == "get"? null : dataStr); if(options.async){ xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var type = xhr.getResponseHeader("Content-Type"); var result; if(type.indexOf("json") != -1){ result = JSON.parse(xhr.responseText); }else if(type.indexOf("xml") != -1){ result = xhr.responseXML; }else{ result = xhr.responseText; } options.success(result); } } }else{ var type = xhr.getResponseHeader("Content-Type"); var result; if(type.indexOf("json") != -1){ result = JSON.parse(xhr.responseText); }else if(type.indexOf("xml") != -1){ result = xhr.responseXML; }else{ result = xhr.responseText; } options.success(result); } } function get(options){ options.type = "get"; ajax(options); } function post(options){ options.type = "post"; ajax(options); } // ajax({ // url: "json.php", // data: {key: "123", age: 1, gender: "male"}, // success: function(data){ // console.log(data); // } // }); get({ url: "json.php", success: function(data){ console.log(data); } }) // ajax({ // url: "xml.php", // type: "get", // data: {key: "123", age: 1, gender: "male"}, // success: function(data){ // console.log(data); // } // });
时间: 2024-10-11 22:57:25