Ajax学习（一）

一、什么是Ajax

1.原生Ajax

AJAX 全称为Asynchronous Javascript And XML。就是异步的JS和XML。通过AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据，即懒加载。AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。仍用Javascript

2.XML

可扩展标记语言。XML被设计用来传输和存储数据。
xml和html相似，均用标签。不同的是html是展现在网页浏览器中的，都是预定义标签。而XML中没有预定义标签，全部都是自定义标签，用来表示一些数据。

最初服务器返回给浏览器的就是xml格式的字符串，js再进行解析。目前已经被JSON取代。

二、HTTP协议

HTTP全称为hypertext transport protocol 协议【超文本传输协议】，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

浏览器------>服务器 请求
服务器------->浏览器 相应
发送的内容----请求报文

1.请求报文

行：POST /URL HTTP 协议版本
头： Host:值 Cookie: 值 Content-type:值 User-Agent:值等等
空行：
体：如果是GET请求体为空，如果是POST可以不为空

2.响应报文

行：HTTP协议版本 响应状态码 响应状态字符串
头： Content-type: 值 Content-length: 值 Content-encoding: 值 等
空行：
体：HTML语法内容

三、Ajax案例准备

1、安装express

什么是express？

官方给出的概念：Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。 通俗的理解：Express 的作用和 Node.js 内置的 http 模块类似，是专门用来创建 Web 服务器的。 Express 的本质：就是一个 npm 上的第三方包，提供了快速创建 Web 服务器的便捷方法。

Express 的中文官网： http://www.expressjs.com.cn/

怎样安装express？

vscode----右击一个英文命名的js文件----在终端打开—初始化：npm init --yes -----再输入npm i express 即可安装成功。
注：npm是node.js下的一个包管理工具。

2、创建一个服务器

//1.引入express
const express = require('express');

//2.创建应用对象
const app = express();

//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/', (request, response) => {
    //设置响应头
     response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应
    response.send('HELLO EXPRESS');
})

//4.监听端口启动服务
app.listen(8000, () => {
    console.log('服务已经启动，8000端口监听中...');
})

在终端 输入 npm 文件名 即可启动服务。注意端口号。
端口释放：Ctrl+c
网页打开：

四、发送Ajax请求

1、发送GET请求

需求：点击按钮发送Ajax请求，然后将相应体放到div中。

1-GET.html

<script>
    //获取button元素 const定义常量 
    const btn = document.getElementsByTagName('button')[0];
    const result = document.getElementById('result');
    btn.addEventListener('click', function() {
    //1.创建对象 发送请求
    const xhr = new XMLHttpRequest();
    //2.初始化，设置请求的方法和url； ajax传参数，？分隔前面的内容。多个参数用&分隔
    xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300');
    //3.发送
    xhr.send();

    //4.事件绑定，处理服务端返回的结果
    //on 当……的时候
    //readyState是xhr对象中的属性,表示状态,属性值是0 1 2 3 4 
    //其中0-未初始化 1-open调用完毕 2-send调用完毕 3-服务端返回了部分结果 4-服务端返回了所有结果
    //change 改变
    xhr.onreadystatechange = function () {
        //判断服务端是否返回了所有结果
        if(xhr.readyState === 4) {
            //判断响应状态码 200 404 403 401 500
            // 2xx ,2开头都表示成功
            if(xhr.status >= 200 && xhr.status < 300){
                //如果响应成功处理结果 行 头 空行 体
                console.log('状态码:',xhr.status); //状态码
                console.log('状态字符串:',xhr.statusText); //状态字符串
                console.log('响应头:',xhr.getAllResponseHeaders()); //所有的响应头
                console.log('响应体:',xhr.response); //响应体

                //设置result文本  js知识
                result.innerHTML = xhr.response;
            }
        }
    }
})

   </script>

server.js

//1.引入express
const express = require('express');

//2.创建应用对象
const app = express();

//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server', (request, response) => {
     //设置响应头
     response.setHeader('Access-Control-Allow-Origin', '*');

     //设置响应体
     response.send('HELLO AJAX');
})

//4.监听端口启动服务
app.listen(8000, () => {
    console.log('服务已经启动，8000端口监听中...');
})

网页效果：

2、发送POST请求

需求：鼠标经过div发送Ajax请求，将请求体显示在div中。

<script>
        const result = document.querySelector('#result');
       // mouseover鼠标离开触发事件
        result.addEventListener('mouseover' ,function() {
      //1.创建对象
   const xhr = new XMLHttpRequest();
      //2.初始化 设置类型与url
   xhr.open('POST','http://127.0.0.1:8000/server');
   //设置请求头:固定写法,第一个参数设置请求体内容类型,第二个参数是参数查询字符串的类型
   xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
   //3.发送请求，在这里传参，任意类型都可以
   xhr.send('a=1&b=2&c=3');
   // xhr.send('a:1&b:2&c:3'); 
   // xhr.send('1232142412421312');
   //4.绑定事件
   xhr.onreadystatechange = function() {
       //判断服务端是否返回所有结果
       if(xhr.readyState === 4) {
           //判断响应是否成功
           if(xhr.status >=200 && xhr.status<300) {
               //处理服务端返回的结果  即下文json响应修改的地方
               result.innerHTML = xhr.response;
           }
       }
   }
})

</script>
    

注意: 发送POST请求时， server.js中要新加如下内容（或app.all）

app.post('/server', (request, response) => {
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO AJAX POST');
})

另：记得重启服务，在终端打开—ctrl+c关闭服务—node 文件名

3、JSON响应

服务器响应也可以设置为一个数据发送过去，但是不能直接写，要通过JSON.stringify(数据)把数据转换为JSON字符串。因为response.send();中只能写字符串。

app.all('/json-server', (request, response) => {
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin', '*');
      //响应一个数据
      const data = { name: 'ryy' };
      //对 对象进行字符串转换
      let str = JSON.stringify(data); 
      //设置响应体
      response.send(str);
})

页面在拿到json响应体的时候是无法直接识别的，需要将json字符串转化为js对象。有以下两种方法。

（1）手动转化

借助JSON.parse(xhr.response)

app.all('/json-server', (request, response) => {
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin', '*');
      //响应一个数据
      const data = { name: 'ryy' };
      //对 对象进行字符串转换
      let str = JSON.stringify(data); 
      //设置响应体
      response.send(str);
})

let data = JSON.parse(xhr.response);
console.log(data);  //js对象：{ name: 'ryy' }
result.innerHTML = data.name;

网页效果：

（2）自动转化

借助 xhr.responseType = 'json';

 xhr.responseType = 'json';

if(xhr.readyState === 4) {
            //判断响应是否成功
            if(xhr.status >=200 && xhr.status<300) {
            //处理服务端返回的结果。         
                console.log(xhr.response);        
                result.innerHTML = xhr.response.name;
            }
        }