原生ajax
Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
传统请求（同步方式）的问题
当网速比较慢或服务器太忙时，客户端(浏览器)在没有收到服务端返回的响应之前一直处在线等待状态，用户体验不好。
Ajax优势和作用
使用ajax技术后用户体验好，同时可以减轻服务端的压力。
ajax的应用场景：百度搜索框、百度地图、检查用户是否注册过、页面的局部刷新等。
Ajax请求与传统请求的区别：
传统方式请求：
ajax方式请求
ajax原理（方法，属性 ）
XMLHttpRequest
let xhr =new XMLHttpRequest();
描述：创建 ajax对象
open
xhr.open('请求方式','请求地址',true/false); //true：表示异步 false:表示同步
描述：创建请求给ajax对。
send
语法：
xhr.send(string)
描述：ajax对象将请求发送到服务器。string：仅用于 POST 请求
属性
readyState
xhr.readyState
描述：在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态值。
包含的状态值：
(1)0：请求未初始化，还没有调用open
(2)1：请求已经建立，但是还没有发送send
(3)2：请求已经发送
(4)3：请求正在处理中，通常响应中已经有部分数据可以用了
(5)4：响应已经完成，可以获取并使用服务器的响应
tatus
语法：
xhr.status
描述：无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，该信息使用“ajax.status”所获得；（由数字1XX,2XX三位数字组成)
常见状态码：200，304，404，500
responseText
语法：
xhr.responseText
描述：获得来自服务器的响应
事件
语法：
xhr.onreadystatechange = callback
描述：当请求被发送到服务器时，每当 readyState 改变时，就会触发 onreadystatechange 事件处理服务端返回的响应
ajax实现步骤
(1)创建Ajax对象
(2)Ajax请求的地址与请求方式
(3)发送请求
(4)获取服务器响应给客户端的数据
(5)处理服务器响应数据JSON.parse和JSON.stringify
ajax的get和post传参
get
语法：
xhr.open('get', 'http://www.api.com?username=ujiuye&password=123456')
描述：get传参只需要在url地址后按照?key=value格式进行传递
服务端代码如下：
const experss = require('express');
const path = require('path');
const app = experss();
app.listen(3000, () => {
console.log(——web服务器工作在3000端口——);
});
//设置ejs:
app.set('view engine', 'ejs'); //设置模板引擎为ejs
app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('ejs').__express);
//注册用户界面：
app.get('/zhuce', (req, res) => {
res.render('zhuce.html');
});
//检查用户是否注册过：
app.get('/checkuser', (req, res) => {
//获取用户：
let uname = req.query.uname ? req.query.uname : '';
if (uname == 'demo') { //已注册
res.send({ "msg": "用户已注册", "status": 500 });
} else { //未注册
res.send({ "msg": "用户可用", "status": 200 });
}
});
zhuce.html文件代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>帐号：<input type="text" name="usr" id="usr"><span id="usrmsg"></span></div>
<div>密码：<input type="password" name="pwd" id="pwd"></div>
<div>密码：<input type="password" name="repwd" id="repwd"></div>
<div><input type="submit" value="注册"></div>
<script>
let usrObj = document.getElementById('usr');
let spanObj = document.getElementById('usrmsg');
//第一步：创建ajax对象：new XMLHttpRequest()
let xhr = new XMLHttpRequest();
usrObj.onblur = function() {
//获取用户输入的帐号：
let usrval = usrObj.value;
// alert(usrval);
//true:表示异步 false:表示同步
//第二步：创建请求给ajax对象：xhr.open('get/post','请求资源',true/false)
xhr.open('get', ——/checkuser?uname=${usrval}——, true);
//注册事件：处理服务器返回的响应
xhr.onreadystatechange = mytest;
//第三步：ajax对象发送请求给服务器: xhr.send([参数])
xhr.send();
}
function mytest() {
// alert(xhr.readyState);
//第四步：服务端处理完请求并返回响应给ajax对象
if (xhr.readyState == 4) {
//200:为http协议状态码
if (xhr.status == 200) { //表示ajax对象与服务端交互是正常的
//第五步：ajax对象获取返回的响应并填充到页面相关位置
// alert(xhr.responseText);
let resObj = JSON.parse(xhr.responseText);
spanObj.innerHTML = resObj.msg;
if (resObj.status == 200) {
spanObj.style.color = 'green';
} else {
spanObj.style.color = 'red';
}
}
}
}
</script>
</body>
</html>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h64279.shtml
