Ajax基础(中)
这节主要在上节的基础上学会如何使用Ajax
源码下载：
链接：https://pan.baidu.com/s/1kG-vACFxneAZqONdo97XrQ
提取码：k21y
在WebStorm中打开整个工程，首先需要关注的是bin、routes、views文件夹下的内容。
在上一节介绍过如何启动web服务器，这里再介绍一种服务器的方法：选中AjaxServer-->bin-->www（服务器完成后这部分代码会自动生成），
右击，选择Run 'www'，同样也可以启动服务器，这样输入网址就可以访问服务器资源了。
为什么输入localhost：3000就会返回一个页面呢？
构建服务器的时候，会生成一个routes和views文件夹，在输入网址的时候，首先会访问这两文件夹里面的内容。
routes--->index.js index title就是index.ejs中的title，如果Express修改为其他的，返回的页面内容也会有相应的变化
var express = require('express');
var router = express.Router();
/* GET home page. 页面路由*/
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
views-->index.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
我把Express--->Ajax学习大本营，返回的页面也变化了
上面能够返回页面的叫做页面路由，那么怎么返回数据呢？返回数据的叫做接口路由，这里接口路由返回一json数据。
var express = require('express');
var router = express.Router();
/* GET home page. 页面路由:是返回页面的*/
router.get('/', function(req, res, next) {
res.render('index', { title: 'Ajax学习大本营' });
});
/*接口路由：返回数据*/
router.get('/api/one',function (req,res,next){
res.json({
"state":200,
data:{
"name":"zxtang",
"age":20
}
});
});
module.exports = router;
同样的，使用Postman来测试
接下来修改一下页面路由，页面上是一个button
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="send">发起get请求</button>
<script>
window.addEventListener('load',function (){
var btn=document.getElementById('send');
btn.addEventListener('click',function (){
alert('点击我')
})
});
</script>
</body>
</html>
如何使用Ajax？
在前面的基础上，我们已经知道了Ajax的一些基础，客户端发送请求是通过js来发送的，为了在客户端和服务器之间交换一些数据，我们需要在js中创建一个对象，这就要创建XMLHttpRequest对象。
所有现代浏览器均支持 XMLHttpRequest 对象，XMLHttpRequest 用于在客户端与服务器交换数据，通过该对象可以在不重新加载整个网页的情况下，对网页的某部分进行更新，使用的步骤如下：
1）创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
2）准备发送
xhr.open('get', './01check.js?username='+uname+'&password='+pw,true);
3）执行发送动作
xhr.send()
xhr.seng（String）主要用于POST方法
4）指定回调函数
onreadystatechange 事件：当请求被发送到服务器时，我们需要执行一些基于响应的任务，每当 readyState 改变时，就会触发 onreadystatechange 事件
案例1：通过XMLHttpRequest来发起请求
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="send">发起get请求</button>
<script>
window.addEventListener('load',function (){
var btn=document.getElementById('send');
btn.addEventListener('click',function (){
//1.创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//2.准备发送
xhr.open('get','http://localhost:3000/api/one',true);
//3.发送请求
xhr.send();
//4.监听服务器的响应
xhr.addEventListener('readystatechange',function (){
//响应完成，但不一定正确
if(xhr.readyState===4){
console.log("响应完成");
}
if(xhr.status===200) {
console.log("响应正确");
}
})
})
});
</script>
</body>
</html>
显示数据内容 console.log(xhr.response);
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="send">发起get请求</button>
<script>
window.addEventListener('load',function (){
var btn=document.getElementById('send');
btn.addEventListener('click',function (){
//1.创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//2.准备发送
xhr.open('get','http://localhost:3000/api/one',true);
//3.发送请求
xhr.send();
//4.监听服务器的响应
xhr.addEventListener('readystatechange',function (){
//响应完成，但不一定正确
if(xhr.readyState===4){
console.log("响应完成");
}
if(xhr.status===200) {
console.log("响应正确");
//数据内容
console.log(xhr.response);
} })
})
});
</script>
</body>
</html>
案例2：在客户端浏览器附加上输入账号和密码，然后通过按钮将账号和密码数据发送给服务器，服务器接收之后，将数据封装成一个json返回 给客户端。
参照：xhr.open('get', './01check.js?username='+uname+'&password='+pw,true);
www代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<label>
<input id="account" type="text" name="account"><input>
</label>
<label>
<input id="pwd" type="text" name="pwd"><input>
</label>
<button id="send">发起get请求</button>
<script>
window.addEventListener('load',function (){
var btn=document.getElementById('send');
btn.addEventListener('click',function (){
//1.创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
var account=document.getElementById('account').value;
var pwd=document.getElementById('pwd').value;
xhr.open('get','http://localhost:3000/api/two?account='+account+'&pwd='+pwd,true)
xhr.send();
xhr.addEventListener('readystatechange',function (){
if(xhr.readyState === 4 && xhr.status === 200){
console.log(xhr.responseText);
}
})
})
});
</script>
</body>
</html>
index.js代码：
var express = require('express');
var router = express.Router();/*接口路由：返回数据*/
router.get('/api/two',function (req,res,next){
console.log(req.query);
//返回json数据
res.json({
"state":200,
data: req.query
});
});
module.exports = router;
req.query表示返回客户端发给服务器的数据，即拼接的account和pwd内容
index.ejs代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<label>
<input id="account" type="text" name="account"><input>
</label>
<label>
<input id="pwd" type="text" name="pwd"><input>
</label>
<button id="send">发起get请求</button>
<script>
window.addEventListener('load',function (){
var btn=document.getElementById('send');
btn.addEventListener('click',function (){
//1.创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
var account=document.getElementById('account').value;
var pwd=document.getElementById('pwd').value;
xhr.open('get','http://localhost:3000/api/two?account='+account+'&pwd='+pwd,true)
xhr.send();
xhr.addEventListener('readystatechange',function (){
if(xhr.readyState === 4 && xhr.status === 200){
console.log(xhr.responseText);
}
})
})
});
</script>
</body>
</html>
案例2：在客户端浏览器label表单输入账号和密码，然后通过按钮将账号和密码数据发送给服务器，服务器接收之后，将数据封装成一个json返回 给客户端。
index.js代码
var express = require('express');
var router = express.Router();
/* GET home page. 页面路由:是返回页面的*/
router.get('/', function(req, res, next) {
res.render('index', { title: 'Ajax学习大本营' });
});
/*接口路由：返回数据*/
router.get('/api/two',function (req,res,next){
console.log(req.query);
//返回一json数据给客户端，使用req.query可以获取浏览器中的拼接数据
res.json({
"state":200,
data: req.query
});
});
module.exports = router;
index.ejs代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<label>
<input id="account" type="text" name="account">
</label>
<label><input id="pwd" type="text" name="pwd">
</label>
<button id="send">发起get请求</button>
<script>
window.addEventListener('load',function (){
var btn=document.getElementById('send');
btn.addEventListener('click',function (){
//1.创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
var account=document.getElementById('account').value;
var pwd=document.getElementById('pwd').value;
xhr.open('get','http://localhost:3000/api/two?account='+account+'&pwd='+pwd,true)
xhr.send();
xhr.addEventListener('readystatechange',function (){
if(xhr.readyState === 4 && xhr.status === 200){
console.log(xhr.responseText);
}
})
})
});
</script>
</body>
</html>
首先在浏览器中输入localhost:3000返回页面，然后在label中输入账户和密码，通过button发送账户和密码给服务器，服务器将数据返回给客户端。
304表示从缓存读取数据
GET请求方法封装
在public文件夹下新建一个js文件，再添加AjaxTool.js
(function (window){
function AjaxTool(){
}
AjaxTool.ajaxRequest=function (url,paramObj,successCallback, failedCallback){
var xhr=new XMLHttpRequest();
xhr.open('get', url + '?' + getStrWithObject(paramObj), true);
xhr.send();
xhr.addEventListener('readystatechange', function (ev2) {
if(xhr.readyState === 4){
if(xhr.status === 200){
// 请求成功
successCallback && successCallback(xhr);
}else {
// 请求失败
failedCallback && failedCallback(xhr);
}
}
});
};
/*
{
name: "张三"，
age: 18
}
[‘name="张三"’， “age=18”, "random=323323232"]
name="张三"&age=18
*/
/**
* 把对象转换成字符串
*/
function getStrWithObject(paramObj) {
var resArr=[];
//1.转换对象
for(var key in paramObj)
{
var str = key + '=' + paramObj[key];
resArr.push(str);
}
//2.拼接时间戳
resArr.push('random='+getRandomStr());
//3.数组转成字符串
return resArr.join('&');
}
/**
* 获取随机时间戳
* @returns {number}
*/
function getRandomStr() {
return Math.random() + (new Date().getTime());
}
window.AjaxTool = AjaxTool;
})(window)
index.js添加以下：
router.get('/api/three', function(req, res, next) {
res.json({
"state": 200,
"data": req.query
});
});
index.ejs代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<label>
<input id="account" type="text" name="account">
</label>
<label><input id="pwd" type="text" name="pwd">
</label>
<button id="send">发起get请求</button>
<script src="/js/AjaxTool.js"></script>
<script>
window.addEventListener('load',function (){
var btn=document.getElementById('send');
btn.addEventListener('click',function (){
//1.创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
var account=document.getElementById('account').value;
var pwd=document.getElementById('pwd').value;
// 2. 参数对象
var paramsObj = {
"account": account,
"pwd": pwd
}
AjaxTool.ajaxRequest('http://localhost:3000/api/three', paramsObj, function (xhr) {
// 处理成功的回调
console.log('请求成功：', xhr.responseText);
}, function (xhr) {
// 处理失败的回调
console.log('请求失败');
})
})
});
</script>
</body>
</html>
那如果要测试请求失败，怎么？
AjaxToolOne.js
(function (window){
function AjaxTool(){
}
AjaxTool.ajaxRequest=function (url,paramObj,timeOut,successCallback, failedCallback){
var xhr=new XMLHttpRequest();
xhr.open('get', url + '?' + getStrWithObject(paramObj), true);
xhr.send();
xhr.addEventListener('readystatechange', function (ev2) {
if(xhr.readyState === 4){
if(xhr.status === 200){
// 请求成功
successCallback && successCallback(xhr);
clearTimeout(timer);//清除定时器
}else {
// 请求失败
failedCallback && failedCallback(xhr);
}
}
});
// timeOut0 代表不限制请求的时间
//如果时间超过timeOut，那么返回一个加载超时
var timer = null;
if(timeOut > 0){
//创建定时器
timer = setTimeout(function () {
// 取消请求
xhr.abort();
}, timeOut);
}
};
/*
{
name: "张三"，
age: 18
}
[‘name="张三"’， “age=18”, "random=323323232"]
name="张三"&age=18
*/
/**
* 把对象转换成字符串
*/
function getStrWithObject(paramObj) {
var resArr=[];
//1.转换对象
for(var key in paramObj)
{
var str = key + '=' + paramObj[key];
resArr.push(str);
}
//2.拼接时间戳
resArr.push('random='+getRandomStr());
//3.数组转成字符串
return resArr.join('&');
}
/**
* 获取随机时间戳
* @returns {number}
*/
function getRandomStr() {
return Math.random() + (new Date().getTime());
}
window.AjaxTool = AjaxTool;
})(window)
index,.js
router.get('/api/four', function(req, res, next) {
//给服务器设置延时，测试请求延时
setTimeout(function () {
res.json({
"state": 200,
"data": "测试请求延时"
});
}, 2000);
});
index.ejs
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<label>
<input id="account" type="text" name="account">
</label>
<label><input id="pwd" type="text" name="pwd">
</label>
<button id="send">发起get请求</button>
<script src="/js/AjaxToolOne.js"></script>
<script>
window.addEventListener('load',function (){
var btn=document.getElementById('send');
btn.addEventListener('click',function (){
//1.创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
var account=document.getElementById('account').value;
var pwd=document.getElementById('pwd').value;
// 2. 参数对象
var paramsObj = {
"account": account,
"pwd": pwd
}
AjaxTool.ajaxRequest('http://localhost:3000/api/four', paramsObj,2000, function (xhr) {
// 处理成功的回调
console.log('请求成功：', xhr.responseText);
}, function (xhr) {
// 处理失败的回调
console.log('请求失败');
})
})
});
</script>
</body>
</html>
POST请求方法
index.js添加POST请求路由：
router.post('/api/five', function(req, res, next) {
console.log(req.body);
res.json({
"state": 200,
"data": "你发起的是一个post请求"
});
});
和GET请求不同，POST请求需要设置一个请求头，index.ejs:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
body {
background-color: skyblue;
}
</style>
</head>
<body>
<label>
<input id="account" type="text" name="account">
</label>
<label>
<input id="pwd" type="text" name="pwd">
</label>
<button id="send">发起Post请求</button>
<script>
window.addEventListener('load', function (ev) {
var btn = document.getElementById('send');
btn.addEventListener('click', function (ev1) { // 1. 获取用户输入的内容
var account = document.getElementById('account').value;
var pwd = document.getElementById('pwd').value; // 2. 创建网络请求对象
var xhr = new XMLHttpRequest();
xhr.open('post', 'http://localhost:3000/api/five', true);
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('name=zs&age=19');
xhr.addEventListener('readystatechange', function (ev2) {
if(xhr.readyState === 4 ){
if(xhr.status === 200){
console.log(xhr.responseText);
}else {
console.log('请求失败！');
}
}
});
});
});
</script>
</body>
</html>
req.body表示服务器接收到客户端发送过来的数据
Ajax基础(中)的更多相关文章
- 史上最全的Ajax基础详解
同步请求和异步请求 先解释一下同步和异步的概念: 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯 ...
- 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】
一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...
- Ajax基础知识《一》
对于网站开发人员,一定不会陌生的Ajax技术,本篇就让我们认识一下它,或许在日后的开发过程中我们就可以使用到.Ajax在那方面使用的比较多呢?答案:表单注册,传统的表单注册,有时需要填写大量的信息,当 ...
- Ajax基础2
什么是服务器 网页浏览过程的分析 如何配置自己的服务器程序(AMP) 什么是Ajax 无刷新数据读取 异步,同步 Ajax基础(2) 使用Ajax 基础请求显示txt的文件 字符集编码 缓存,阻止缓存 ...
- Ajax基础--JavaScript实现
ajax原理 1.ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. 通俗地讲就是:AJAX 通过在后台与 ...
- jQuery基础---Ajax基础教程（二）
jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一篇中, ...
- jQuery基础---Ajax基础教程
jQuery基础---Ajax基础 内容提纲: 1.Ajax 概述 2.load()方法 3.$.get()和$.post() 4.$.getScript()和$.getJSON() 5.$.ajax ...
- Ajax基础知识（二）
接上一篇 Ajax基础知识(一) 在上一篇博客里,抛弃了VS中新建aspx页面,拖个button写上C#代码的方式.使用ajax的方式,异步向服务器请求数据.我们让服务器只简单的返回一个" ...
- 原生AJAX基础讲解及兼容处理
原文:原生AJAX基础讲解及兼容处理 AJAX = Asynchronous JavaScript and XML (异步的JavaScript和XML). AJAX不是新技术 ,但却是热门的技术.它 ...
随机推荐
- 手把手教你搭建JAVA分布式爬虫
在工作中,我们经常需要去获取一些数据,但是这些数据可能需要从第三方平台才可以获取到.这个时候,爬虫系统就可以帮助我们来完成这些事情. 提到爬虫系统,很多人都会想到使用python.但实际上,语言只是一 ...
- 02_Linux基础-文件系统层次结构-提示符-进程-命令格式-隐藏文件-通配符-绝对相对路径-{1..100}-ls-mkdir-其他基础命令
02_Linux基础-ls-mkdir-cd-pwd-man-useradd-su-rm-tree-tab-passwd-w-ssh-touch-date-stat-cp-mv-du-文件系统层次结构 ...
- 【必知必会】手把手教你配置MySQL环境变量——图文详解
一.先决条件 假设我们已经成功安装MySQL数据库.如果还有小伙伴不知道如何安装MySQL数据库,可以在本文下留言,留言数超20,则出一期"手把手教你安装MySQL数据库--图文详解&quo ...
- KingbbaseES V8R6集群维护案例之---集群之间数据迁移
案例说明: 生产环境是集群环境,测试环境是集群,现需要将生产环境的数据迁移到测试集群中运行,本文档详细介绍了从集群环境迁移数据的操作步骤,可以作为生产环境迁移数据的参考. 适用版本: Kingbase ...
- e1000e网卡驱动在麒麟3.2.5上编译安装
一.清空原驱动 因为系统安装完毕后系统中自带了e1000e的网卡驱动,会影响后面自行编译的驱动 所以先用find命令找出并删除掉所有关于e1000e的驱动文件 find / -name "* ...
- ES6之前，JS的继承
继承的概念 谈到继承,就不得不谈到类和对象的概念. 类是抽象的,它是拥有共同的属性和行为的抽象实体. 对象是具体的,它除了拥有类共同的属性和行为之外,可能还会有一些独特的属性和行为. 打个比方: 人类 ...
- 无线WIFI连接
家里的无线网络覆盖一直不全, 最近想改善一下.买了一个mercury的小路由器MW156RM 其实,我还是不理解WDS, repeater, bridge模式有什么区别. 目标就是实现最少的改动,保持 ...
- 在 Fedora 中使用 Cockpit 创建虚拟机
本文向你展示如何在 Fedora 31 上使用安装 Cockpit 所需软件来创建和管理虚拟机.Cockpit 是一个交互式管理界面,可让你在任何受支持的 Web 浏览器上访问和管理系统.随着 vir ...
- JuiceFS 在 Elasticsearch/ClickHouse 温冷数据存储中的实践
企业数据越存越多,存储容量与查询性能.以及存储成本之间的矛盾对于技术团队来说是个普遍难题.这个难题在 Elasticsearch 与 ClickHouse 这两个场景中尤为突出,为了应对不同热度数据对 ...
- 源码学习之MyBatis的底层查询原理
导读 本文通过MyBatis一个低版本的bug(3.4.5之前的版本)入手,分析MyBatis的一次完整的查询流程,从配置文件的解析到一个查询的完整执行过程详细解读MyBatis的一次查询流程,通过本 ...