Web复习之Ajax（一）

起风的秋天@

已于 2023-09-25 14:32:55 修改

阅读量45

点赞数

分类专栏： Ajax 文章标签： ajax

于 2023-09-22 17:47:16 首次发布

本文链接：https://blog.csdn.net/weixin_61791370/article/details/133174197

版权

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了HTTP的基本概念，包括请求报文和响应报文，以及如何在Express中进行基本使用，如创建应用对象、设置路由和监听端口。此外，还详细讲解了Ajax的GET和POST请求，包括使用步骤、相关属性和设置请求头。

摘要由CSDN通过智能技术生成

一、HTTP基础知识

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

1.请求报文

请求行      POST  /s?ie=utf-8  HTTP/1.1 
请求头      Content-type: application/x-www-form-urlencoded
空行
请求体      username=admin&password=admin

2.响应报文

请求行      HTTP/1.1  200  OK
请求头      Content-Type: text/html;charset=utf-8
空行    
请求体      <html>
                <body>
                    <h1>我爱web</h1>
                </body>
            </html>

二、express基本使用

基于 Node.js 平台，快速、开放、极简的 Web 开发框架。

1. 引入express

const express = require('express');

2. 创建应用对象

const app = express();

3. 创建路由规则

app.get('/', (request, response)=>{
    //设置响应
response.send('HELLO EXPRESS');
    });

4. 监听端口启动服务

    //8000 为端口 可自行设置
app.listen(8000, ()=>{
    //服务启动时提示信息
console.log("服务已经启动, 8000 端口监听中....");
    });

express基本使用完整代码：

    //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 端口监听中....");
});

三、Ajax基础

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML），用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

3.1 get请求

3.1.1 使用步骤

创建xhr对象
```
const xhr = new XMLHttpRequest();
```

设置请求方法 url

xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300');
            // url 
            // 127.0.0.1 回环地址 用于测试 => 固定的
            // 8000 端口 可自己设置 需要与服务器端一致
            
            //传参数直接在后面拼接'？a=100&b=200&c=300'

发送
```
xhr.send();
```

处理服务端返回的结果

xhr.onreadystatechange = function(){
    console.log('我是服务端返回的结果')
     if(xhr.readyState === 4){
         if(xhr.status >= 200 && xhr.status <300){
            result.innerHTML = xhr.response
          }
      }
}

3.1.2 xhr的相关属性

属性	含义	例子
xhr.status	状态码	200 404 403 401 500
xhr.response	响应体
xhr.readyState	状态	0 1 2 3 4
xhr.statusText	状态字符串	OK
xhr.getAllResponseHeaders	所有响应头

常见状态码及其含义

状态码	含义
200	响应成功
401	未授权
403	被禁止
404	找不到
500	内部错误

五种状态及对应含义

状态	含义
0	未初始化
1	open方法调用完毕
2	send方法调用完毕
3	服务端返回部分结果
4	服务端返回所有结果

3.2post请求

3.2.1 使用步骤

创建xhr对象
```
    const xhr = new XMLHttpRequest();
```

设置请求方法 url

    xhr.open('POST', 'http://127.0.0.1:8000/server');
            //不可在这传参数

发送

    xhr.send('a=100&b=200&c=300');
            // post 在这传参 可以用多种方式
            // xhr.send('a:100&b:200&c:300');  //冒号
            // xhr.send('1233211234567');   //数字

处理服务端返回的结果

xhr.onreadystatechange = function(){
           //判断
          if(xhr.readyState === 4){
              if(xhr.status >= 200 && xhr.status < 300){
                   //处理服务端返回的结果
                   result.innerHTML = xhr.response;
               }
          }
}

3.2.2 设置请求头

setRequestHeader

    //2. 初始化 设置类型与 URL
xhr.open('POST', 'http://127.0.0.1:8000/server');
      //设置请求头
      /第一个参数 'Content-Type' 为请求头名字
      //第二个参数 'application/x-www-form-urlencoded' 为请求头的值
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

设置请求头位置

请求头的设置必须在第二步’初始化设置类型与 URL‘，也就是open之后，send之前。

起风的秋天@

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web复习之Ajax（一）

HTTP（hypertext transport protocol）协议『超文本传输协议』，协议详细规定了浏览器和万维网服务器之间互相通信的规则。请求头的设置必须在第二步’初始化设置类型与 URL‘，也就是。上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。ML（异步JavaScript和XML），用来描述一种使用。平台，快速、开放、极简的 Web 开发框架。, XML, XSLT, 以及最重要的。使用Ajax技术网页应用能够快速地将。
复制链接

扫一扫

专栏目录