ajax基础

异步的js和xml 实现异步懒加载,无刷新获取加载发送的是http协议

xml：用来传输和存储数据，与HTML不同，其没有预定义标签全都是自定义标签现在xml已被json替代

http：超文本传输协议，规定了浏览器和万维网之间相互通讯的规则。其规范格式实例如下：请求报文：行 Post(或Get) /s?ie=utf-8 HTTP/2.0 头

Host:123456.com
Cookie:name=zhushengjie
Content-type:application/x-www-form-urlencoded

1
2
3

空行

体(POST请求要有请求体) username=admin&password=admin

响应报文：行 HTTP/2.0 200 OK 头

Content-Type:text/html;charset=utf-8
Content-length:2048
Content-encoding:gzip

1
2
3

空行体

<html>
<head></head>
<body></body>
</html>

1
2
3
4

1.什么是HTTP 
  Hyper Text Transfer Protocol:超文本传输协议
  规范了数据如何打包以及传递

2.详解
  1.请求（request）消息
    客户端带给服务器的数据都有哪些，由三部分组成
  1.请求的起始行
    1.请求方法
      1.GET
        表示客户端向服务器获取资源时使用
        特点：
       1.无请求主体
       2.靠地址栏传递查询字符串
      2.POST
        表示想传递数据给服务器时使用
    特点：
       1.有请求主体
      3.PUT
        表示客户端想放置文件到服务器（禁用）
      4.DELETE
        表示客户端要删除服务器端的数据（禁用）
      5.HEAD
        表示客户端只想获取指定的响应头
      6.CONNECT
        测试连接
      7.TRACE
        追踪请求路径
      8.OPTIONS
        选项，保留以后使用
    2.请求URL

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

vscode打开终端 npm init --yes 下载express工具 npm i express 1.然后创建js文件，引入express const express=require('express'); 2.创建应用对象 const app =express(); 3.创建路由规则函数里的参数命名随意，但一般推荐规范命名，request是对请求报文的封装，response是对响应报文的封装其中 '/' 斜杠后面跟的就是需要的请求报文行地址 app.get('/',(request,response)=>{response.send("hello express")})//里面设置了简单响应 可以在里面设置响应头来允许跨域，后面的*表示通配，也可以指定只有某个域址可以跨域

response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:8000/server');//表示只有该域址可以跨域
response.setHeader('Access-Control-Allow-Headers', '*');//表示能够自定义响应头
response.setHeader('Access-Control-Allow-Methods', '*');//表示可以设置任意请求允许使用的方法

1
2
3
4

4.监听窗口启动服务

app.listen(8000,()=>{console.log("服务已经启动，8000端口监听中...")})//设置了8000端口，是80端口的重定向

5.此文件用终端打开，输入node 此文件名 6.在浏览器中输入127.0.0.1:8000可以看到我们输出的结果

下面为完整示例：

const express=require('express');
const app =express();
app.get('/serve',(request,response)=>{//这里是get请求，post请求要单独设置一个
	//设置响应头,第一部分是头的名字，后面是值。作用是为了允许跨域
	response.setHeader('Access-Controll-Allow-Origin','*');
	//设置响应体
	response.send("hello ajax")
});//里面设置了简单响应
app.post('/serve',(request,response)=>{//这里是post请求
	response.setHeader('Access-Controll-Allow-Origin','*');
	response.send("hello ajax post")
});
app.all('/json-serve', (request, response) => {//all表示可以接受所有类型的请求
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置可自定义响应头
    //response.setHeader('Access-Control-Allow-Headers', '*');
    response.send("hello ajax json")
});
app.listen(8000,()=>{console.log("服务已经启动，8000 端口监听中...");});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

上面端口是127.0.0.1:8000/serve 如果该端口正在运行，Ctrl +c 释放该端口

xhr的页面应用使用上面端口进行get请求的初步应用

<body>
    <button>发送请求</button>
    <div id="result"></div>
</body>
<script>
    let btn = document.querySelector('button');
    let result = document.querySelector('#result');
    btn.onclick = function () {
        // 1.创建对象,为什么命名xhr是因为其英文代表ajax方便理解
        const xhr = new XMLHttpRequest();
        // 2.初始化，设置请求方法和url
        xhr.open('GET','http://127.0.0.1:8000/serve');
        // 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,2开头表示成功
                if (xhr.status >= 200 && xhr.status < 300) {
                    // 处理结果
                    // result.innerHTML = xhr.response;
					result.innerHTML=xhr.response
                }
            }
        }
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

ajax的设置请求路径参数设置参数用？来分割，如果有多个参数就用&来连接

xhr.open('GET','http://127.0.0.1:8000/serve?a=100&b=200&c=300');

进行post请求的初步运用

<body>
    <div id="result"></div>
    <script>
        const result=document.querySelector('#result');
        result.addEventListener('mouseover',function(){
// 创建对象
const xhr = new XMLHttpRequest();
xhr.open('POST','http://127.0.0.1:8000/serve');
 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//设置请求头，必须放在open下面
xhr.send();
xhr.onreadystatechange=function(){
    if (xhr.readyState === 4) {
                // 继续判断响应状态 200 404 403 401 500,2开头表示成功
                if (xhr.status >= 200 && xhr.status < 300) {
                    // 处理结果
                    // result.innerHTML = xhr.response;
result.innerHTML=xhr.response
                }
            }
}
        });
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

post设置请求体，直接在send（）内传参

xhr.send('a=100&b=200&c=300');

设置请求头信息

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//设置请求头，第一个为请求体内容的类型，第二个为请求体参数类型，为固定写法
xhr.setRequestHeader('name','jack');//也可以自定义设置请求头信息，但是必须在引入press的js中添加一个新的响应头response.setHeader('Access-Controll-Allow-Headers','*');然后将post改成all

1
2

安装nodemon 在面板里输入

npm install -g nodemon

然后直接使用nodemon server.js就能自主获取而不需要每次都去刷新了如果报错，就一管理员身份打开powerShell,然后输入set-ExecutionPolicy RemoteSigned，Y回车。

编辑

上次更新: 2023/7/11 18:57:41

← ajax ajax关于同源→