ajax基础实践
2017-04-23 本文已影响0人
柏龙
ajax 是什么？有什么作用？
-
AJAX代表异步JavaScript和XML。
它是使用 XMLHttpRequest 对象与服务器端脚本进行通信。
它可以发送以及接收各种格式的信息，包括JSON，XML，HTML，甚至文本文件。
AJAX最吸引人的特性是，它的“异步”性质，这意味着它可以做所有这一切，而不必刷新页面。
这让您可以根据用户事件更新页面的某些部分。 -
作用
1.向服务器发出请求，而不重新加载页面
2.接收和处理服务器中的数据
前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
- 注意事项： 请求接口url，接口请求方式：post/get，传递参数说明：参数名称、数量和对应的值，返回响应数据格式：json/text
- 如何 mock 数据：
在 node.js 环境下安装 server-mock （npm install -g server-mock）
在项目文件夹下，创建 router.js 文件，写好对应接口的响应函数，创造一些假数据
app.get('/hello', function(req, res) {
res.send({
status: 0,
msg: "hello hunger valley"
})
});
index.html
$.get('/hello').done(function(ret){
console.log(ret);
});
作为静态服务器运行
server start or mock start or server open
Success: server start success, open the link http://localhost:8080 in browser
点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
添加一个锁，用 true 和 false 来判断
var getData = document.getElementById('getData');
var lock = true;
getData.addEventListener('click', function(){
if(!lock){
return;
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if( xhr.status === 200 || xhr.status === 304){
console.log( JSON.parse(xhr.responseText) );
}
lock = true;
}
}
xhr.open('get', '/getFriends?username=', true)
xhr.send();
lock = false;
});
封装一个 ajax 函数，能通过如下方式调用。后端在本地使用server-mock来 mock 数据
function ajax(opts){
// todo ...
}
document.querySelector('#btn').addEventListener('click', function(){
ajax({
url: '/login', //接口地址
type: 'get', // 类型， post 或者 get,
data: {
username: 'xiaoming',
password: 'abcd1234'
},
success: function(ret){
console.log(ret); // {status: 0}
},
error: function(){
console.log('出错了')
}
})
});
实现代码如下：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX XMLHttpRequest</title>
<style>
input{outline: none}
</style>
</head>
<body>
<input type="text" name="username" id="username" placeholder="输入 xiaoming">
<input type="text" name="username" id="password" placeholder="输入 abcd1234">
<button id="btn">查询</button><br/>
<span id="data"></span>
<script>
var btn = document.querySelector('#btn');
var username = document.querySelector('#username');
var password = document.querySelector('#password');
var data = document.getElementById('data');
var lock = true;
btn.addEventListener('click', function(){
ajax({
url: '/login', //接口地址
type: 'post', // 类型， post 或者 get,
data: {
username: username.value,
password: password.value
},
success: function(ret){
data.innerText = ret; // {status: 0}
},
error: function(){
data.innerText = '出错了';
}
})
});
function ajax(opts){
if( !lock ){ return; }
opts.type = opts.type || 'get';
opts.dataType = opts.dataType || 'json';
opts.data = opts.data || {};
opts.success = opts.success || function(){};
opts.error = opts.error || function(){};
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
data.innerText = '';
if( xhr.status === 200 || xhr.status === 304){
opts.success( xhr.responseText );
}else{
opts.error();
}
lock = true;
}
}
var parameter = "";
for(var key in opts.data){
parameter += key + '=' + opts.data[key] + "&";
}
parameter = parameter.substring(0,parameter.length-1); // 格式化参数
if(opts.type.toLowerCase() === 'post'){
xhr.open(opts.type, opts.url, true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(parameter);
}
if(opts.type.toLowerCase() === 'get'){
xhr.open(opts.type, opts.url+'?'+parameter, true);
xhr.send();
}
lock = false;
}
</script>
</body>
</html>
后台router.js
/**
* 当 http://localhost:8080/login 的GET请求到来时被下面匹配到进行处理
* 通过req.query获取请求的参数对象
* 通过 req.send发送响应
*/
app.get('/login', function(req, res) {
var username = req.query.username; // 通过 req.query获取请求参数
var password = req.query.password; // 通过 req.query获取请求参数
var status;
if(username === 'xiaoming' && password === 'abcd1234'){
status = 'get登录成功！';
}else{
status = 'get登录失败!';
}
res.send(status);
});
/**
* 当 http://localhost:8080/login 的POST请求到来时被下面匹配到进行处理
* 通过req.body获取请求的参数对象
* 通过req.send发送响应
*/
app.post('/login', function(req, res) {
console.log(req.body);
var username = req.body.username; // 通过 req.body获取请求参数
var password = req.body.password; // 通过 req.body获取请求参数
var status;
if(username === 'xiaoming' && password === 'abcd1234'){
status = 'post登录成功！';
}else{
status = 'post登录失败!';
}
res.send(status);
});
