AJAX

编程基础

传统网站中存在的问题

1. 网速慢的情况下，页面加载时间长，用户只能等待
2. 用户提交表单后，如果有个别项的内容不合格，页面跳转则需要重新填写所有表单内容
3. 页面跳转需要重新加载页面，造成资源浪费，增加了用户的等待时间

概述

Ajax，中文音译：阿贾克斯

他是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验

应用场景

1. 页面上拉加载数据
2. 列表数据无刷新分页
3. 表单项离开焦点数据验证
4. 搜索框文字自动提示文字下拉项
   …

运行环境

Ajax技术需要运行在网站环境中才能生效，可使用Node创建服务器作为网站服务器

const express = require('express');
//引入express框架
const path = require('path');
//路径处理模块
const app = express();
//创建web服务器

app.use(express.static(path.join(_dirname,'public')));
//静态资源访问服务器功能
//use拦截请求，交给express.static处理，实现静态资源访问，并把静态资源文件夹定义为public文件夹，后续html文件需要放到public文件夹中

app.listen(3000);
//监听端口
//在浏览器中可用locallhost:3000访问静态资源文件夹中的静态资源文件
console.log('服务器启动成功');
//控制台提示输出

运行原理

正常情况下，浏览器端向服务器端发出请求，服务器端接收到请求后，会向浏览器端回复响应

Ajax是由浏览器端创建，用来代替浏览端向服务器端发送请求与接收服务器端的响应，接收到数据后使用dom方法将服务器端的数据添加到浏览器端

实现步骤

1. 创建Ajax对象

var xhr = new XMLHttpRequest();
//HttpRequest是Http请求的意思

2. 告诉Ajax请求的地址以及请求方式

xhr.open('get','http://www.example.com');

3. 发送请求

xhr.send();

4. 获取服务器端给与客户端的响应数据

xhr.onload = function () {
    console.log(xhr.responseText);
}

实现步骤

1. 在命令行工具（windows Powershell）中使用nodemon app.js命令开启网站服务器

2. 建立html文件，并在script标签中编辑Ajax代码

var xhr = XMLHttpRequest();
//创建ajax对象
xhr.open('get','http://localhost:3000/first');
//告诉ajax对象发送请求的目标与方式
//1）请求方式 2）请求地址
xhr.send();
//发送请求
xhr.onload = fucntion(){
    console.log(xhr.responseText)
    //打印响应的文本
}
//获取服务器端的响应数据
//onload事件为ajax接受完服务器端的响应

3. 建立app.js文件，作为服务器端

const express = require('express');
//引入express框架
const path = require('path');
//路径处理模块
const app = express();
//创建web服务器

app.use(express.static(path.join(_dirname,'public')));
//静态资源访问服务器功能
//use拦截请求，交给express.static处理，实现静态资源访问，并把静态资源文件夹定义为public文件夹，后续html文件需要放到public文件夹中

app.get('/first',(req,res) => {
    res.send('Hello Ajax');
});
//创建路由，用于响应客户端的请求
//req是请求对象，res是响应对象

app.listen(3000);
//监听端口
//在浏览器中可用locallhost:3000访问静态资源文件夹中的静态资源文件
console.log('服务器启动成功');
//控制台提示输出

服务器响应的数据格式

在真实地项目中服务器端大多数情况下会以JSON对象作为响应数据的格式。当客户端拿到响应数据时，要将JSON数据和HTML进行字符串拼接，然后将拼接结果展示在页面中

在http请求与响应的过程中，无论是请求参数内容还是响应内容，如果是对象类型，最终都会被转化为对象字符串进行传输

html文件部分

var xhr = XMLHttpRequest();
//创建ajax对象

xhr.open('get','http://localhost:3000/responseDate');
//告诉ajax对象发送请求的目标与方式
//1）请求方式 2）请求地址

xhr.send();
//发送请求

xhr.onload = fucntion(){
    //console.log(xhr.responseText)
    //console.log(typeof xhr.resoinseText)
    //证明打印响应的文本在http请求与响应的过程中，无论是请求参数内容还是响应内容，如果是对象类型，最终都会被转化为对象字符串进行传输

    JOSN.parse();//将JSON字符串转换为JSON对象

    var str = '<h2>' + resoinseText + '</h2>';
    //字符串拼接

    document.body.innerHTML = str;
    //使用dom把拼接的结果显示到页面上

}

//获取服务器端的响应数据
//onload事件为ajax接受完服务器端的响应

js文件部分

const express = require('express');
//引入express框架
const path = require('path');
//路径处理模块
const app = express();
//创建web服务器
app.use(express.static(path.join(_dirname,'public')));
//静态资源访问服务器功能
//use拦截请求，交给express.static处理，实现静态资源访问，并把静态资源文件夹定义为public文件夹，后续html文件需要放到public文件夹中

app.get('/first',(req,res) => {
    res.send('name','zs');
});
//创建路由，用于响应客户端的请求

app.listen(3000);
//监听端口
//在浏览器中可用locallhost:3000访问静态资源文件夹中的静态资源文件
console.log('服务器启动成功');
//控制台提示输出

请求参数传递

传统网站表单提交

<form method="GET" action="http://www.example.com">
    <input type="text" name="username">
    <input type="password" name="password">
</form>

GET请求方式：

xhr.open('get','http://www.example.com?name=hao&age=20');
//

HTML文件代码

<p>
    <input type="text" name="" id="username">
</p>
<p>
    <input type="text" name="" id="age">
</p>
<p>
    <input type="button" value="提交" id="btn">
</p>

<script>
    var btn = document.getElementById('btn');
    var username = document.getElementById('username');
    var age = document.getElementById('age');

    btn.onclick = function () {
        var xhr = new XMLHttpRequest();
        //创建ajax对象
        
        var nameValue = username.value;
        var ageValue = age.value;
        //获取用户在文本框中输入的值

        var params = 'username' + nameValue + '&age=' + ageValue;
        //拼接请求参数

        xhr.open('get','http://localhost:3000/get?' + params);
        //配置ajax对象,拼接值放在?后面
        xhr.send();

        xhr.onload = function () {
            console.log(xhr.responseText)
        }
    }
</script>

JS文件代码

const express = require('express');
//引入express框架
const path = require('path');
//路径处理模块
const app = express();
//创建web服务器
app.use(express.static(path.join(_dirname,'public')));
//静态资源访问服务器功能
//use拦截请求，交给express.static处理，实现静态资源访问，并把静态资源文件夹定义为public文件夹，后续html文件需要放到public文件夹中

app.get('/get' , (req,res) => {
    res.send(req.query);
    //响应并返回客户端

app.listen(3000);
//监听端口
//在浏览器中可用locallhost:3000访问静态资源文件夹中的静态资源文件
console.log('服务器启动成功');
//控制台提示输出
});

POST请求方式：

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send('name=zhangsan&age=20');

HTML文件代码

<p>
    <input type="text" name="" id="username">
</p>
<p>
    <input type="text" name="" id="age">
</p>
<p>
    <input type="button" value="提交" id="btn">
</p>

<script>
    var btn = document.getElementById('btn');
    var username = document.getElementById('username');
    var age = document.getElementById('age');

    btn.onclick = function () {
        var xhr = new XMLHttpRequest();
        //创建ajax对象
        
        var nameValue = username.value;
        var ageValue = age.value;
        //获取用户在文本框中输入的值

        var params = 'username' + nameValue + '&age=' + ageValue;
        //拼接请求参数

        xhr.open('post','http://localhost:3000/post');
        //配置ajax对象

        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        //设置请求参数格式的类型（post请求必须设置，get则不必）

        xhr.send(params);
        //获取服务器端响应的数据
        xhr.onload = function () {
            console.log(xhr.responseText)
        }
    }
</script>

JS文件代码

const express = require('express');
//引入express框架
const path = require('path');
//路径处理模块



const app = express();
//创建web服务器
app.use(express.static(path.join(_dirname,'public')));
//静态资源访问服务器功能
//use拦截请求，交给express.static处理，实现静态资源访问，并把静态资源文件夹定义为public文件夹，后续html文件需要放到public文件夹中


const express = require('express');
//引入express框架
const path = require('path');
//路径处理模块
const app = express();
//创建web服务器

const.bodyParser = require('body-parser');
//post的配套模块

app.use(express.static(path.join(_dirname,'public')));
//静态资源访问服务器功能
//use拦截请求，交给express.static处理，实现静态资源访问，并把静态资源文件夹定义为public文件夹，后续html文件需要放到public文件夹中

app.get('/post' , (req,res) => {
    res.send(req.body);
    //响应并返回客户端
});

app.listen(3000);
//监听端口
//在浏览器中可用locallhost:3000访问静态资源文件夹中的静态资源文件
console.log('服务器启动成功');
//控制台提示输出

请求参数的格式

1. 属性名称 = 属性值

name = zhangsan & age = 20 & sex = 男

2. json格式

{name: 'zhangsan' , age: '20' , sex: '男'}

在请求头中指定Content-Type属性的值是application/json，告诉服务器当前请求的格式是json（通知服务器端）

xhr.setRequestHeader('Content-Type','application/json');

需要把json参数转化成json字符串放入send函数中

JSON.stringify()

get请求不能提交json对象数据格式，传统网站表单提交不支持json对象数据格式

EG

HTML代码

var xhr = XMLHttpRequest();
//创建ajax对象
xhr.open('get','http://localhost:3000/json');
//告诉ajax对象发送请求的目标与方式
//1）请求方式 2）请求地址
xhr.setRequestHeader('Content-Type','application/json');

xhr.send(JSON.stringify({name: 'lisi' , age: '50' , sex: '男'}));
//发送请求

xhr.onload = fucntion(){
    console.log(xhr.responseText)
    //打印响应的文本
}
//获取服务器端的响应数据
//onload事件为ajax接受完服务器端的响应

JS文件代码

const express = require('express');
//引入express框架
const path = require('path');
//路径处理模块
const app = express();
//创建web服务器
app.use(express.static(path.join(_dirname,'public')));
//静态资源访问服务器功能
//use拦截请求，交给express.static处理，实现静态资源访问，并把静态资源文件夹定义为public文件夹，后续html文件需要放到public文件夹中

const.bodyParser = require('body-parser');
//post的配套模块

app.post('/post' , (req,res) => {
    res.send(req.body);
    //响应并返回客户端
});

app.listen(3000);
//监听端口
//在浏览器中可用locallhost:3000访问静态资源文件夹中的静态资源文件
console.log('服务器启动成功');
//控制台提示输出
});