Ajax在jQuery中的用法

Ajax在jQuery中的用法

1 $.ajax()方法

1.1 ajax方法基本使用

$.ajax({
	// 请求方式
	type: 'post',
	// 请求地址
	url: '/base',
	// 请求成功以后函数被调用
	success: function (response) {
		// response为服务器端返回的数据
		// 方法内部会自动将json字符串转换为json对象
		console.log(response);
	},
	// 请求失败以后函数被调用
	error: function (xhr) {
		console.log(xhr)
	}
})

//服务器端代码如下（访问成功与失败）：
app.get('/base', (req, res) => {
	res.send({
		name: 'zhangsan',
		age: 30
	})
});
app.post('/base', (req, res) => {
	res.status(400).send({
		name: 'zhaoliu',
		age: 35
	})
});

1.2 ajax传递请求参数

$.ajax({
	// 请求方式
	type: 'post',
	// 请求地址
	url: '/user',
    // 向服务器端发送的请求参数
	// name=zhangsan&age=100
	// data: {
	// 	name: 'zhangsan',
	// 	age: 100
	// },
	data: JSON.stringify(params),
	// 指定参数的格式类型
	contentType: 'application/json',
	// 请求成功以后函数被调用
	success: function (response) {
		// response为服务器端返回的数据
		// 方法内部会自动将json字符串转换为json对象
		console.log(response);
	}
})

//服务器端代码（req.query用来获取get方法传递的参数）：
app.get('/user', (req, res) => {
	res.send(req.query);
});
//req.body用来获取post方法传递的参数
app.post('/user', (req, res) => {
	res.send(req.body)
});

1.3 beforeSend方法

在请求发送之前调用。

// 在请求发送之前调用
beforeSend: function () {
	alert('请求不会被发送')
	// 请求不会被发送
	return false;
},

1.4 serialize方法

作用：将表单中的数据自动拼接成字符串类型的参数。

$('#form').on('submit', function () {
// 将表单内容拼接成字符串类型的参数
// var params = $('#form').serialize();
// console.log(params)
serializeObject($(this));
return false;
});

函数的代码如下：

// 将表单中用户输入的内容转换为对象类型
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;
}

2 get、post和jsonp请求

2.1 get、post请求

$('#btn').on('click', function () {
			// $.get('/base', 'name=zhangsan&age=30', function (response) {
			// 	console.log(response)
			// })
			
			$.post('/base', function (response) {
				console.log(response)
			})
		});

2.2 $.ajax方法发送jsonp请求

<script>
	function fn (response) {
		console.log(response)
	}

	$('#btn').on('click', function () {
		$.ajax({
			url: '/jsonp',
			// 向服务器端传递函数名字的参数名称
			jsonp: 'cb',
			//不想调用sucess，而是调用fn，需要在全局范围类调用。
			jsonpCallback: 'fn',
			// 代表现在要发送的是jsonp请求
			dataType: 'jsonp'/*,
			success: function (response) {
				console.log(response)
			}*/
		})
	});
	</script>

服务器端代码：

app.get('/jsonp', (req, res) => {
	const cb = req.query.cb
	const data = cb+"({name: 'zhaoliu'})"
	res.send(data);
	// res.jsonp({
	// 	name: 'lisi',
	// 	age:50
	// })
});

3 全局事件

只要页面中有Ajax请求被发送，对应的全局事件就会被触发。

.ajaxStart()     // 当请求开始发送时触发
.ajaxComplete()  // 当请求完成时触发

NProgress：纳米级进度条，使用逼真的涓流动画来告诉用户正在发生的事情！

<link rel='stylesheet' href='nprogress.css'/>
<script src='nprogress.js'></script>

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

4 RESTful与XML基础

4.1 RESTful API的应用

一套关于设计请求的规范：

• GET： 获取数据
• POST： 添加数据
• PUT： 更新数据
• DELETE： 删除数据

服务器端的代码：

// 获取用户列表信息
app.get('/users', (req, res) => {
	res.send('当前是获取用户列表信息的路由');
});

// 获取某一个用户具体信息的路由
app.get('/users/:id', (req, res) => {
	// 获取客户端传递过来的用户id
	const id = req.params.id;
	res.send(`当前我们是在获取id为${id}用户信息`);
});

// 删除某一个用户
app.delete('/users/:id', (req, res) => {
	// 获取客户端传递过来的用户id
	const id = req.params.id;
	res.send(`当前我们是在删除id为${id}用户信息`);
});

// 修改某一个用户的信息
app.put('/users/:id', (req, res) => {
	// 获取客户端传递过来的用户id
	const id = req.params.id;
	res.send(`当前我们是在修改id为${id}用户信息`);
});

客户端的代码：

// 获取用户列表信息
$.ajax({
	type: 'get',
	url: '/users',
	success: function (response) {
		console.log(response)
	}
})

// 获取id为1的用户信息
$.ajax({
	type: 'get',
	url: '/users/1',
	success: function (response) {
		console.log(response)
	}
})

// 获取id为1的用户信息
$.ajax({
	type: 'delete',
	url: '/users/10',
	success: function (response) {
		console.log(response)
	}
})

// 获取id为1的用户信息
$.ajax({
	type: 'put',
	url: '/users/10',
	success: function (response) {
	console.log(response)
	}
})

4.2 XML介绍

XML 的全称是 extensible markup language，代表可扩展标记语言，它的作用是传输和存储数据。
服务器端代码如下：

app.get('/xml', (req, res) => {
	res.header('content-type', 'text/xml');
	res.send('<message><title>消息标题</title><content>消息内容</content></message>')
});

客户端代码如下：

<button id="btn">发送请求</button>
<div id="container"></div>
<script type="text/javascript">
	var btn = document.getElementById('btn');
	var container = document.getElementById('container');
		btn.onclick = function () {
		var xhr = new XMLHttpRequest();
		xhr.open('get', '/xml');
		xhr.send();
		xhr.onload = function () {
			// xhr.responseXML 获取服务器端返回的xml数据
			var xmlDocument = xhr.responseXML;
			var title = xmlDocument.getElementsByTagName('title')[0].innerHTML;
			container.innerHTML = title;
		}
	}
</script>