<script> // 创建XMLHttpRequest对象的实例（就是创建异步对象） var xhr = new XMLHttpRequest(); // 监听请求和响应的状态 xhr.onreadystatechange = function(){ // 表示请求完成 //状态等于4时响应完成，但页面404时仍可接收到响应，所以这里要status(页面状态)==200，既页面正常才给接收响应 if(xhr.readyState == 4){ // 表示响应成功 if(xhr.status == 200){ // 获取响应报文 var resStr = xhr.responseText; // console.log(resStr); // console.log("222"); // JSON 对象 // 把json格式的字符串转成json对象 var res = JSON.parse(resStr); console.log(res); // 把json对象转json字符串 // var str = JSON.stringify(res); // console.log(str); } } } // 定义变量 var url = 'http://127.0.0.1:8082/sort'; var type = 'get'; // 表示与服务端建立联系 xhr.open(type,url+"?type_number=0",true); // 发送请求主体 xhr.send(null);
- 同步：是一种阻塞的线程(执行顺序 从上往下)
console.log(1); console.log(2); console.log(3);
输出1，2，3
- 异步：是一种非阻塞的线程 (不按照顺序执行)
console.log(1); setTimeout(function(){ console.log(2); },0) console.log(3);
输出1，3，2
AJAX-v1.0封装
// 请求接口地址 url // 请求数据方式 type 【 get / post 】 // 请求接口时提交的数据（给服务端） data // 请求响应回来的数据格式 dataType 【json / xml 】 // 是否异步请求数据 async 【true】 // 请求之前执行的回调函数 beforeSend:function(){} // 请求成功执行的回调函数 success:function(res){} // 请求失败执行的回调函数 error: function(err){} // 请求完成执行的回调函数 complete:function(){} // 定义对象 $ var $ = {} // 添加ajax方法 $.ajax = function (option) { // 判断option是否为对象 if (typeof option === 'object') { // 处理ajax的逻辑 var url = option.url; var type = option.type || "get"; var async = option.async || true; var dataType = option.dataType; var data = option.data; // page=0&pageSize=10 服务端接收的格式 // 处理提交给服务端的参数 var dataStr = ""; if (typeof data == 'object') { // 遍历对象 for (var key in data) { dataStr += key + "=" + data[key] + "&" } // 减掉字符串最后一个字符 dataStr = dataStr.substr(0, dataStr.length - 1); } // 判断是否跨域 if (dataType == "jsonp") { // 跨域的逻辑 } else { // 创建XMLHttpRequest对象的实例 var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { // 兼容写法 xhr = new ActiveXObject("Microsoft.XMLHTTP"); } // 监听请求和响应的状态 xhr.onreadystatechange = function () { // 请求之前 if (xhr.readyState == 1) { //执行请求完成的回调函数 if (option.beforeSend) { option.beforeSend(); } } // 请求完成 if (xhr.readyState == 4) { // 响应成功 if (xhr.status == 200) { // 处理数据格式的逻辑 // 获取响应头的Content-Type属性值 var cType = xhr.getResponseHeader('Content-Type'); // 定义变量记录后台响应的数据 var res; // 判断响应的数据格式 dataType if (cType.indexOf("json") > -1) { // 把json格式字符串转json对象 res = JSON.parse(xhr.responseText) } else if (cType.indexOf("xml") > -1) { // 记录xml字符串 res = xhr.responseXML; } else { // 普通文档 res = xhr.responseText; } // 执行请求成功的回调函数 if (option.success) { option.success(res); } } else { // 执行请求失败的回调函数 if (option.error) { option.error("请求失败,检查服务环境是否异常"); } } // 执行请求完成的回调函数 if (option.complete) { option.complete(); } } } // 发起请求动作 xhr.open(type, type == 'get' ? url + "?" + dataStr : url, async); // 判断请求方式是为post if (type == 'post') { // 设置请求头信息 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); } // 发送请求主体 xhr.send(type == 'get' ? null : dataStr); } } }
