标签：配置 pen request对象 route document nload soft generator math
下面演示ajax 的实现原理
配置：
cd ajax参考：http://www.expressjs.com.cn/starter/generator.html
express --view=ejs myapp
cd myapp
npm install完整的ajax流程：
1、 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();2、准备发送
xhr.open('get', './01check.js?username='+uname+'&password='+pw,true);
?
3、执行发送动作
xhr.send(null);
?
4、监听response 回调函数
onreadystatechange 事件:每当 readyState 改变时，就会触发 onreadystatechange 事件。
?
index.js 路由
......
router.get('/api/one',(req,res,next)=>{
res.json({
status:200,
result:'this is one.....'
})
});
/* GET home page. */
router.get('/one', function(req, res, next) {
res.render('index1', { title: 'Express' });
})
...........index.ejs:
<body>
<button id="send">发送1个请求</button>
<script>
var btn = document.getElementById('send');
btn.addEventListener('click',function () {
// 使用原生的ajax 技术，发送一个网络请求
// 1.创建XMLHttpRequest对象
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
// 2.准备发送
/*
参数1: 请求方式 (get/post)
参数2: 请求url
参数3: 是否异步
*/
xhr.open('get','http://localhost:3000/api/one',true);
// 3. 发送
xhr.send();
// 4. 监听服务器的响应
// 一旦服务器响应回来之后, 就会执行这个函数
xhr.onreadystatechange = function () {
console.log(xhr.readyState);
if(xhr.readyState === 4){ // 代表服务器已经给了响应, 不代表响应成功
if(xhr.status === 200){
console.log(xhr.response);
}
}
}
});
</script>
</body>
// 结果：
/*
2
3
4
{"status":200,"result":"this is one....."}
*/?
?
?
index.js 路由：
router.get('/api/two',(req,res,next)=>{
console.log(req.query);
res.json({
status:200,
result:'this is two.....'
})
});
router.get('/two', function(req, res, next) {
res.render('index2', { title: 'Express' });
});index2.ejs
<body>
<input id="account" type="text" name="account">
<input id="pwd" type="text" name="pwd">
<button id="send">发送一个请求</button>
<script>
window.onload=function () {
var btn = document.getElementById('send');
btn.onclick = function () {
// 使用原生的ajax 技术，发送一个网络请求
// 1.创建XMLHttpRequest对象
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
// 从页面获取需要传递的数据
var userName = document.getElementById('account').value;
var pwd = document.getElementById('pwd').value;
// 2.准备发送
/*
参数1: 请求方式 (get/post)
参数2: 请求url
参数3: 是否异步
*/
// 后面跟一个随机数值，保证每次发送ajax请求，都是真的发然后从响应中获取最新数据，而不是从缓存中取得
xhr.open('get', 'http://localhost:3000/api/two?account=' + account + '&pwd=' + pwd + '&random=' + getRandomStr(), true);
// 3. 发送
xhr.send();
// 4. 监听服务器的响应
// 一旦服务器响应回来之后, 就会执行这个函数
xhr.onreadystatechange = function () {
// 5. 处理响应的数据 (对方说话)
console.log(xhr.readyState);
if(xhr.readyState === 4){ // 代表服务器已经给了响应, 不代表响应成功
if(xhr.status === 200){
console.log(xhr.response);
}
}
}
}
}
function getRandomStr() {
return Math.random() + (new Date().getTime())
}
</script>
</body>前端打印：
2
3
4
{"status":200,"result":"this is two....."}服务端打印：
{ account: '[object HTMLInputElement]',
pwd: '123456',
random: '1547356096169.2708' }
GET /api/two?account=[object%20HTMLInputElement]&pwd=123456&random=1547356096169.2708 200 8.824 ms - 42
?
标签：配置 pen request对象 route document nload soft generator math
原文地址：https://www.cnblogs.com/friday69/p/10262358.html
