什么是ajax
AJAX即"Asynchronous Javascript And XML"（异步javaScript和XML），
是指一种创建交互式网页应用的网页开发技术, 可以用于创建快速动态网页的技术，
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着
可以在不重新加载整个网页的情况下，对网页的某部分进行更新。刚好解决了传统方法的缺陷。
使用ajax的步骤
在我们通常使用ajax请求数据的时候,遵循5个步骤
同步和异步
首先因为javascript是一门单线程的语言,一次只能执行一个任务,如果同时有多个任务的话就需要排队执行,这样就会产生很长的等待时间,所以javascript就把所有任务分成两种,同步任务和异步任务
- 同步任务: 浏览器在请求数据的过程中,不会一直等待,这段时间还可以做其他的操作
- 异步任务:浏览器在请求数据的过程中,会一直等待事件的相应,知道返回结果才会执行其他的操作
执行的过程中,同步任务会进入"主线程",而异步任务会进入"任务队列",而执行过程中"主线程"的任务执行完后才会开始执行"任务队列"的任务,简单理解就是同时有多个任务时,同步任务会先执行,全部执行完之后才开始执行异步任务
请求数据的方式--GET/POST
在我们使用ajax请求数据的时候我们也需要设置一下请求的方式,这里就提一下get方式和post的方式
GET请求
get请求用于向服务器查询某些信息,必要时,需要在get请求的url后面添加查询的字符串参数. 对于XHR来说,查询字符串必须正确编码后添加到url之后,然后再传给open()方法
POST请求
post请求一般用于向服务器发送应该保存的数据,每个post请求都会在请求体中携带提交的数据.在这里post的请求体可以包含非常多的数据,而且数据可以是任何格式. 如果要初始化post请求,只需要给open()方法的第一个参数传"post"即可
使用ajax
接下来就让我们一起创建ajax吧
- 创建ajax对象
javascript
var xhr = new XMLHttpRequest();- 设置open方法----
open(参数1,参数2,参数3)
- 参数1 : 请求的方式 get/post
- 参数2 : 请求的地址
- 参数3 : 是否异步----- true异步/false同步
javascript
xhr.open('get','./data/1.txt',true);- 使用
send()方法发送信息
javascript
xhr.send();- 等待服务器返回信息
-
事件监听ajax的状态 :
onreadystatechange -
ajax的状态 : readyState
scss0 (初始化)还没调用open()方法<br /> 1 (载入) 已调用send()方法，正在发送请求<br /> 2 (载入完成) send()方法完成，已收到全部响应内容<br /> 3 (解析)正在解析响应内容<br /> 4 (完成)响应内容解析完成，可以在客户端调用了 -
服务器的状态 : status
xml1开头：消息<br /> 2开头：成功<br /> 3开头：重定向<br /> 4开头：请求错误<br /> 5开头：服务器错误 -
数据:
responseText
javascript
xhr.onreadystatechange = function(){
// ajax成功
if(xhr.readyState === 4){
// 服务器成功返回
if(xhr.status === 200){
console.log(xhr.responseText);
}
}
}get方式
get方式的数据是放在地址里面的,要加一个?,数据放在?后面
javascript
// 1、创建ajax对象{}
var xhr = new XMLHttpRequest();
// 2、open（参数1，参数2，参数3）
xhr.open('get','./data/1.txt?count=10',true);
// 3、send() 发送信息
xhr.send();
// 4、注册事件 onreadystatechange 状态改变就会调用
xhr.onreadystatechange = function(){
// ajax成功
if(xhr.readyState === 4){
// 服务器成功返回
if(xhr.status === 200){
console.log(xhr.responseText);
}
}
}post方式
post请求一定要在send()方法前面设置请求头才行,不然就会报错
javascript
// 1、创建ajax对象{}
var xhr = new XMLHttpRequest();
// 2、open（参数1，参数2，参数3）
xhr.open('POST','./data/1.txt',true);
// post请求一定要send前设置请求头才行不然会报错 编码方式
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
// 3、send() 发送信息
// 发送请求，数据作为参数传入
xhr.send('name=name&age=1808');
// 4、注册事件 onreadystatechange 状态改变就会调用
xhr.onreadystatechange = function(){
// ajax成功
if(xhr.readyState === 4){
// 服务器成功返回
if(xhr.status === 200){
console.log(xhr.responseText);
}
}
}封装ajax
因为我们会经常用到ajax请求数据,包括很多时候我们也会对ajax进行二次封装,所以接下来我们一起封装一下吧
javascript
function ajax(methods, url, data, callback) {
// 创建ajax对象
var xhr = new XMLHttpRequest();
if (methods.toLowerCase() === 'get') { //在这里统一转成大写或者小写
// get请求
if (data) {
url += '?' + data;
}
xhr.open('get', url, true);
xhr.send();
} else if (methods.toLowerCase() === 'post') {
// post请求
xhr.open('post', url, true);
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
}
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 请求成功
callback && callback(xhr.responseText);
} else {
// 报错
throw new Error('请求失败，错误码是：' + xhr.status);
}
}
}
}完美封装ajax
javascript
// 防止 污染全局 将方法挂到widnow上
~ function (window) {
// 如果使用低版本浏览器可能不识别常规写法,所以这里需要简单处理一下兼容问题
// 处理IE 兼容问题
function createXHR() {
if (window.ActiveXObject) { //IE的低版本 ie 5 6 7 8
return new ActiveXObject("Microsoft.XMLHttp");
} else { //标准 ie 9 10 11
return new XMLHttpRequest;
}
}
// ajax方法
// options {...}
function ajax(options) {
//用户不传递是默认参数 传递了就是传递进来的参数
// 默认的对象
var _default = { //值都是默认值
method: "get", //请求方式 默认值是get
url: null, //请求的url地址
async: true, //同步还是异步
dataType: null, //返回的数据格式
getHead: null, //获取响应头信息
success: null, //获取响应主体内容 成功的回调
error: null,//失败的回调函数
complete: null //不管成功还是失败都调用-----可以知道请求是否接通
setRequest: null, //设置请求头
data: null //传入的数据格式
};
//将默认对象的值进行覆盖
//循环遍历用户传递进来的对象 给默认对象重新赋值
for (var key in options) {
// 只循环遍历私有的属性
if (options.hasOwnProperty(key)) {
_default[key] = options[key];
}
}
//创建ajax实例
var xhr = createXHR();
// GET请求有缓存 如果是get请求处理缓存
// 先转为小写 再进行比较
// 中url后面接了个随机数，是为了欺骗浏览器或代理服务器用的；某些代理服务器会无视 no - cache 之类的标识，
// 对响应结果进行强行缓存；而当url请求不改变的时候，有时候会导致浏览器不向服务器发送请求，
// 而直接取调用缓存中的数据。加上随机数就是欺骗浏览器url改变了，要每次向服务器发送请求而不去调用缓存中的数据；
// 还有另一种解决办法：
// 在Jquery中有属性设置cache: false即可；
if (_default.method.toLowerCase() === "get") {
// url: "json/data.json?_="+Math.random(), //请求的url地址
// url: "json/data.json?name=哈哈&age=100&_=" + Math.random(), //请求的url地址
//如果用户传递的url 没有传递参数 ?_="+Math.random() 传递了&_=" + Math.random()
_default.url += _default.url.indexOf("?") > 0 ? "&_=" + Math.random() : "?_=" + Math.random();
}
//配置请求参数
xhr.open(_default.method, _default.url, _default.async);
// 监听请求状态
xhr.onreadystatechange = function () {
// 请求状态成功
if (/^2\d{2}$/.test(xhr.status)) {
// ajax的处理进度为2 获取响应头信息
if (xhr.readyState === 2) {
// 函数存在 将这个函数执行并且让这个函数中的this指向第一个参数
_default.getHead && _default.getHead.call(xhr);
}
// ajax处理进度为4 获取响应主体内容
if (xhr.readyState === 4) {
// 服务器返回的数据
var jsonData = xhr.responseText;
if (_default.dataType &&_default.dataType.toUpperCase() === "JSON") {
// 转为JSON格式对象
jsonData = "JSON" in window ? JSON.parse(jsonData) : eval('(' + jsonData + ')');
}
_default.success && _default.success.call(xhr, jsonData);
}
}
}
// 设置请求头信息
_default.setRequest ? xhr.setRequestHeader("content-type", _default.setRequest) : null;
//发送请求
xhr.send(_default.data);
}
// 将自己的ajax函数挂载到window上
window.ajax = ajax;
}(window);
// 调用
ajax({
method:'post',
url:'./data/data.json',
success:function(data){
console.log(data);
}
})