代码语言：javascript复制
<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封装
代码语言：javascript复制// 请求接口地址 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);
}
}
}
