AJAX学习笔记上（学习自用）

AJAX

原生AJAX

1.1AJAX简介

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

1.2XML简介

XML可扩展标记语言。

XML被设计用来传输和存储数据。

XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来标傲世一些数据。

<student>
	<name>John</name>
	<age>18</age>
</student>

现在已经被JSON取代了。

{"name":"John","age":18}

1.3AJAX的特点

1.3.1AJAX的优点

1）可以无需刷新页面而与服务端进行通信

2）允许你根据用户事件来更新部分页面内容

1.3.2AJAX的缺点

1）没有浏览历史，不能回退

2）存在跨域问题（同源）

3）SEO不友好（网页内容无法爬虫）

1.4HTTP

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

1.4.1请求报文

重点是格式和参数

行	GET  /s?ie=utf-8  HTTP/1.1
头	Host: atguigu.com
	Cookie: name=guigu
	Content-type: application/x-www-form-urlencoded
	user-Agent: chrome 83
空行
体	username=admin&password=admin

1.4.2响应报文

行	HTTP/1.1  200  OK
头	Content-Type: text/html;charset=utf-8
	 Content-length: 2048
	 Content-encoding: gzip
空行
体	<html>
		<head>
		</head>
		<body>
			<h1>HHHHello</h1>
		</body>
	</html>

注：

发送GET请求：在页面检查里面打开网络，刷新页面，发出请求、接收响应，打开最上面的请求，Header中有Response Headers和Request Headers，还有Query String Parameters。Query String Parameters中是对请求的url中的内容做的解析结果，Request Headers中是请求行和请求头的位置，Response Headers是响应行和响应头，点击Response是响应体。

发送POST请求：Headers中的Query String Parameters，会变成其他的。

xhr是XMLHttpRequest的首字母，在网页检查的网络中的XHR是对AJAX请求的筛选。

AJAX发送GET请求在url中携带参数，先用问号分割，然后直接写，用&连接

http:127.0.0.1:8080/server?a=100&b=200&c=300

AJAX发送GET请求在xhr.send()中携带参数

//3.发送
xhr.send('a=100&b=200&c=300');
xhr.send('a:100&b:200&c:300');
xhr.send('1231212313');

AJAX发送GET请求

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX GET 请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>

    <script>
        //获取button元素
        const btn=document.getElementsByTagName('button')[0];
        const result=document.getElementById('result')
        //绑定事件
        btn.onclick=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 都是成功
                    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.innerHTML=xhr.response
                    }else{

                    }
                }
            }

        }
    </script>
</body>
</html>

AJAX发送POST请求

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX POST 请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #903;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        //获取元素对象
        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');
            //3.发送
            xhr.send('a=100&b=200&c=300');
            //4.事件绑定
            xhr.onreadystatechange=function(){
                //判断
                if(xhr.readyState===4){
                    if(xhr.status>=200&&xhr.status<300){
                        //处理服务端返回的结果
                        result.innerHTML=xhr.response;
                    }
                }
            }
        })
    </script>
</body>
</html>

对应的后端server.js

js 复制代码

const express=require('express')

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

//创建路由规则
//req是对请求报文的封装
//res是对响应报文的封装
app.get('/server',(req,res)=>{
    //设置响应头,设置允许跨域
    res.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    res.send('ok');
})

app.post('/server',(req,res)=>{
    //设置响应头,设置允许跨域
    res.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    res.send('okkkk');
})

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

自定义请求头

//自定义请求头，需要在后端设置好，否则会报错
xhr.setRequestHeader('name','hhhhhh')

对应的后端设置

js 复制代码

//可以接收任意类型的请求
app.all('/server',(req,res)=>{
    //设置响应头,设置允许跨域
    res.setHeader('Access-Control-Allow-Origin','*');
    //响应体
    res.setHeader('Access-Control-Allow-Headers','*');
    //设置响应体
    res.send('okkkk');
})

首先res.setHeader('Access-Control-Allow-Headers','*');设置接收所有响应头，接着app.all，表示接收任意类型的请求，因为会传回options类型的请求，无法得到回应，所以改成all接收。

服务端响应JSON数据

js 复制代码

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

响应体中只能是字符串或buffer，所以要转换类型。

客户端接收到的是字符串，可以转换为JSON对象，有两种方式，一种是自动转换，一种是手动转换。

手动转换：

const data=JSON.parse(xhr.response)
result.innerHTML=data.name;

自动转换：

 //设置响应体数的类型
xhr.responseType='json';
result.innerHTML=xhr.response.name;