aui ajax,Ajax使用

1、Ajax封装

function ajax (options) {

// 默认值

var defaults = {

type: 'get',

url: '',

async: true,

data: {},

header: {

'Content-Type': 'application/x-www-form-urlencoded'

},

success: function () {},

error: function () {}

}

// 使用用户传递的参数替换默认值参数

Object.assign(defaults, options);

// 创建ajax对象

var xhr = new XMLHttpRequest();

// 参数拼接变量

var params = '';

// 循环参数

for (var attr in defaults.data) {

// 参数拼接

params += attr + '=' + defaults.data[attr] + '&';

// 去掉参数中最后一个&

params = params.substr(0, params.length-1)

}

// 如果请求方式为get

if (defaults.type == 'get') {

// 将参数拼接在url地址的后面

defaults.url += '?' + params;

}

// 配置ajax请求

xhr.open(defaults.type, defaults.url, defaults.async);

// 如果请求方式为post

if (defaults.type == 'post') {

// 设置请求头

xhr.setRequestHeader('Content-Type', defaults.header['Content-Type']);

// 如果想服务器端传递的参数类型为json

if (defaults.header['Content-Type'] == 'application/json') {

// 将json对象转换为json字符串

xhr.send(JSON.stringify(defaults.data))

}else {

// 发送请求

xhr.send(params);

}

} else {

xhr.send();

}

// 请求加载完成

xhr.onload = function () {

// 获取服务器端返回数据的类型

var contentType = xhr.getResponseHeader('content-type');

// 获取服务器端返回的响应数据

var responseText = xhr.responseText;

// 如果服务器端返回的数据是json数据类型

if (contentType.includes('application/json')) {

// 将json字符串转换为json对象

responseText = JSON.parse(responseText);

}

// 如果请求成功

if (xhr.status == 200) {

// 调用成功回调函数, 并且将服务器端返回的结果传递给成功回调函数

defaults.success(responseText, xhr);

} else {

// 调用失败回调函数并且将xhr对象传递给回调函数

defaults.error(responseText, xhr);

}

}

// 当网络中断时

xhr.onerror = function () {

// 调用失败回调函数并且将xhr对象传递给回调函数

defaults.error(xhr);

}

}

2、模板引擎

使用步骤

下载 art-template 模板引擎库文件并在 HTML 页面中引入库文件

准备 art-template 模板

告诉模板引擎将哪一个模板和哪个数据进行拼接

var html = template('tpl', {username: 'zhangsan', age: '20'});

将拼接好的html字符串添加到页面中

document.getElementById('container').innerHTML = html;

通过模板语法告诉模板引擎，数据和html字符串要如何拼接

{{ username }}

3、jsonp封装

function jsonp (options) {

// 动态创建script标签

var script = document.createElement('script');

// 拼接字符串的变量

var params = '';

for (var attr in options.data) {

params += '&' + attr + '=' + options.data[attr];

}

// myJsonp0124741

var fnName = 'myJsonp' + Math.random().toString().replace('.', '');

// 它已经不是一个全局函数了

// 我们要想办法将它变成全局函数

window[fnName] = options.success;

// 为script标签添加src属性

script.src = options.url + '?callback=' + fnName + params;

// 将script标签追加到页面中

document.body.appendChild(script);

// 为script标签添加onload事件

script.onload = function () {

document.body.removeChild(script);

}

}

4、jQuery中的Ajax

1、发送Ajax请求

var params = {name: 'hehehe', age: 35};

$.ajax({

// 请求方式

type: 'get',

// 请求地址

url: '/user',

//向服务器端发送的请求参数

// name=zhangsan&age=100

// data: {

// name: 'hehe',

// age: 36

// },

// data:'name=zhangsan&age=100',

data: JSON.stringify(params),

//指定参数格式类型默认application/x-www-form-urlencoded；

contentType: 'application/json',

// 请求成功以后函数被调用

success: response => {

console.log(response);

},

// 请求失败以后函数被调用

error: error => {

console.log(error)

}

});

2、发送jsonp请求

$.ajax({

url: 'http://www.example.com',

// 指定当前发送jsonp请求

dataType: 'jsonp',

// 修改callback参数名称

jsonp: 'cb',

// 指定函数名称

jsonCallback: 'fnName',

success: function (response) {}

})

3、serialize方法：将表单中的数据自动拼接成字符串类型的参数

var params = $('#form').serialize();

// name=zhangsan&age=30

// 将表单中用户输入的内容转换为对象类型

function serializeObject(obj) {

// 处理结果对象

var result = {};

// [{name: 'username', value: '用户输入的内容'}, {name: 'password', value: '123456'}]

var params = obj.serializeArray();

// 循环数组 将数组转换为对象类型

$.each(params, function (index, value) {

result[value.name] = value.value;

})

// 将处理的结果返回到函数外部

return result;

}

4、全局事件

ajaxStart() // 当请求开始发送时触发

.ajaxComplete() // 当请求完成时触发

// 当页面中有ajax请求发送时触发

$(document).on('ajaxStart', function () {

NProgress.start()

})

// 当页面中有ajax请求完成时触发

$(document).on('ajaxComplete', function () {

NProgress.done()

})

5、NProgress

NProgress.start(); // 进度条开始运动

NProgress.done(); // 进度条结束运动