一、ajax 流程原理
- ajax,即在不重新加载整个网页的情况下，对网页的某部分进行更新。
下面演示ajax 的实现原理
配置：
cd ajax参考：http://www.expressjs.com.cn/starter/generator.html
express --view=ejs myappcd myappnpm 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>// 结果：/*234{"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>前端打印：
234{"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?
ajax
原文地址：https://www.cnblogs.com/friday69/p/10262358.html