AJAX学习总结一

一、 原生Ajax

1.1Ajax简介

在网页不刷新的情况下，向服务端发送http请求，得到http响应。
最大的优势：无刷新获取数据

1.2 XML简介

XML可扩展标记语言。
XML被设计用来传输和存储数据。
XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签,全都是自定文标签，用来表示一些数据。（已经被JSON取代）

1.3Ajax的特点

1.3.1 AJAX的优点

1可以无需刷新页面面与服务器端进行通信,
2)允许你根据用户事件来更新部分页面内容。

1.3.2 AJAX的缺点

1)没有浏览历史，不能回退
存在跨域问题（同源）
3SEO（搜索引擎优化）不友好（不能在源代码中查找到）

二、 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案例准备工作

使用vscode的过程中，打开终端的方式：
（1）使用快捷键： ctrl +· ；注意这个点是键盘上 esc 下面的那个；
（2） 选择vscode的 “查看”，然后选择“集成终端” ，打开即可；

1.安装express

打开vscode -> 终端 -> 当前目录中 -> 输入npm i express

2.创建一个服务端

在当前目录新建个js文件，然后在终端 => 当前目录下 => 输入node 文件名启动服务

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

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

//3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/',(request,response)=>{
    //设置响应
    response.send('hello express');
});

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

打开浏览器：

端口释放：Ctrl+c

四、发送AJAX请求

1.发送GET请求

点击按钮发送AJAX请求给服务器，然后响应体返回到div中。

 <button>点击发送请求</button>
 <div id="result"></div>

 //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById("result");
        //绑定事件
        btn.click = function(){
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2 初始化  设置请求方法和url
            xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200');
            //3 发送
            xhr.send();
            //4. 事件绑定  处理服务端返回的结果
            //on   when当...时候
            //readystate  是 xhr 对象中的属性，表示状态 0 1 2 3 4
            //change 改变
            xhr.onreadystatechange = function(){
                //判断（服务端返回来所有的结果）
                if(xhr.readyState === 4){
                    //判断响应状态码  200 404 403 401 500
                    //2xx  2开头的都表示成功
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理结果  行 头 空行 体
                        //1.响应行
                        console.log(xhr.status);//状态码
                        console.log(xhr.statusText);//状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体


                        //设置 result 的文本
                        result.innerHTML = xhr.response;
                    }else{

                    }
                }
            }
        }

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');
 });

app.post('/server',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应头  
    response.setHeader('Access-Control-Allow-Headers','*');

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

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

2.发送POST请求

鼠标经过div时发送AJAX请求，然后响应体返回放在div中

<div id="result"></div>

//获取元素对象
        const result = document.getElementById("result");
        //绑定事件
        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=100&b=200&c=300');
            //4. 事件绑定
            xhr.onreadystatechange = function(){
                //判断
                if(xhr.readyState === 4){
                    if(xhr.readyState === 4){
                        if(xhr.status >=200 && xhr.status < 300){
                            //处理服务端返回的结果
                            result.innerHTML = xhr.response;
                        }
                    }
                }
            }
        })

server.js文件

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

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

//3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装

app.post('/server',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应头  
    response.setHeader('Access-Control-Allow-Headers','*');

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

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