## ajax():2005年——技术更新跟进,创新超越的能力要有!
## xml:可扩展标记语言
## json
浏览器---ajax---服务器
[1]实现页面无刷新更新数据
[2]分页技术,加载更多数据
[3]表单校验
## 注意:ajax运行在网络环境下
即需要有后台
不是很清晰,或者说灵活应用
get请求方式:不能提供json对象数据格式
form表单也是不行,
只有post方式可以。
应用:
//1 POST请求
app.post('/post', (req, res) => {
// console.log(111);
res.send(req.body);
});
// 处理POST请求
//post请求
var xhr = new XMLHttpRequest();
xhr.open('post', 'http://localhost:7788/post');
//设置请求参数格式类型[除非有上传文件的格式不同]
// xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//json格式
xhr.setRequestHeader('Content-Type', 'application/json');
// xhr.send(params);
xhr.send(JSON.stringify({
"uname": uname.value,
"pwd": pwd.value
}));
xhr.onload = function() {
console.log(xhr.responseText);
};
//get请求
//ajax:通过对象;原生ajax使用
//1 创建ajax对象
var xhr = new XMLHttpRequest();
//2 配置 请求方式和请求地址
xhr.open('get', 'http://localhost:7788/jsonData');
//3 发送请求
xhr.send();
//4 监听事件 onload 接收完整的服务器响应数据
xhr.onload = function() {
console.log(xhr.responseText); //服务器返回回来的都是字符串,而不是对象
//json字符串-->json对象
var resText = JSON.parse(xhr.responseText);
document.getElementsByTagName('h1')[0].innerHTML = resText.age;
};