AJAX+http入门

最新推荐文章于 2024-02-15 16:12:24 发布
最新推荐文章于 2024-02-15 16:12:24 发布
阅读量223 收藏 2
点赞数
分类专栏： Ajax 文章标签： ajax http
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuzhanhui0715/article/details/118295823
版权

文章目录

一 Ajax

1 jQuery中的Ajax

1.1 get发起请求 $.get (‘url’,{携带参数}，fn())

在这里插入图片描述

1.2 post发起请求 $.post(url, [data], [callback])

在这里插入图片描述
在这里插入图片描述

1.3 $.ajax()函数的语法（综合）

$.ajax({
   type: '', // 请求的方式，例如 GET 或 POST
   url: '',  // 请求的 URL 地址
   data: { },// 这次请求要携带的数据
   success: function(res) { } // 请求成功之后的回调函数
})

在这里插入图片描述

1.4 接口测试工具 PostMan

访问 PostMan 的官方下载网址 https://www.getpostman.com/downloads/，下载所需的安装程序后，直接安装即可。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2 form表单（3部分组成）

表单在网页中主要负责数据采集功能
在这里插入图片描述
表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等

1. 标签的属性

标签用来采集数据，标签的属性则是用来规定如何把采集到的数据发送到服务器。

在这里插入图片描述

enctype
在这里插入图片描述
在这里插入图片描述

2. 表单提交数据存在问题

在这里插入图片描述

3 通过Ajax提交表单数据

3.1 监听表单提交事件
//1.
$('#form1').submit(function(e) {
   alert('监听到了表单的提交事件')
})
//2.
$('#form1').on('submit', function(e) {
   alert('监听到了表单的提交事件')
})
3.2 阻止表单默认提交行为 e.preventDefault()
$('#form1').submit(function(e) {
   // 阻止表单的提交和页面的跳转
   e.preventDefault()
})

$('#form1').on('submit', function(e) {
   // 阻止表单的提交和页面的跳转
   e.preventDefault()
})
3.3 快速获取表单中的数据jquery 中的 serialize()

注意：在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加 name 属性
在这里插入图片描述

<form id="form1">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
</form>
//
$('#form1').serialize()
// 调用的结果：
// username=用户名的值&password=密码的值

3 art-template模板引擎

art-template 是一个简约、超快的模板引擎。中文官网首页为 http://aui.github.io/art-template/zh-cn/index.html
在这里插入图片描述

1 art-template的使用步骤

在这里插入图片描述

2 art-template 标准语法

art-template 提供了 {{ }} 这种语法格式，在 {{ }} 内可以进行变量输出，或循环数组等操作，这种 {{ }} 语法在 art-template 中被称为标准语法。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

过滤器

在这里插入图片描述

<div>注册时间：{{regTime | dateFormat}}</div>

在这里插入图片描述

3 模板引擎的实现原理

3 .1 基本语法 exec()

正则与字符串操作
在这里插入图片描述
在这里插入图片描述

3 .2 字符串的replace函数

replace() 函数用于在字符串中用一些字符替换另一些字符
在这里插入图片描述
多次replace

var str = '<div>{{name}}今年{{ age }}岁了</div>'
var pattern = /{{\s*([a-zA-Z]+)\s*}}/

var patternResult = pattern.exec(str)
str = str.replace(patternResult[0], patternResult[1])
console.log(str) // 输出 <div>name今年{{ age }}岁了</div>

patternResult = pattern.exec(str)
str = str.replace(patternResult[0], patternResult[1])
console.log(str) // 输出 <div>name今年age岁了</div>

patternResult = pattern.exec(str)
console.log(patternResult) // 输出 null

使用while循环replace

var str = '<div>{{name}}今年{{ age }}岁了</div>'
var pattern = /{{\s*([a-zA-Z]+)\s*}}/

var patternResult = null
while(patternResult = pattern.exec(str)) {
   str = str.replace(patternResult[0], patternResult[1])
}
console.log(str) // 输出 <div>name今年age岁了</div>

replace替换为真值

var data = { name: '张三', age: 20 }
var str = '<div>{{name}}今年{{ age }}岁了</div>'
var pattern = /{{\s*([a-zA-Z]+)\s*}}/

var patternResult = null
while ((patternResult = pattern.exec(str))) {
   str = str.replace(patternResult[0], data[patternResult[1]])
}
console.log(str)
3 .3 实现简易的模板引擎

在这里插入图片描述
在这里插入图片描述
封装template函数

function template(id, data) {
  var str = document.getElementById(id).innerHTML
  var pattern = /{{\s*([a-zA-Z]+)\s*}}/
var pattResult = null
 while ((pattResult = pattern.exec(str))) {
    str = str.replace(pattResult[0], data[pattResult[1]])
  }
  return str
}

5. 导入并使用自定义的模板引擎

 <script src="./js/template.js"></script>

4 Ajax 加强

1 XMLHttpRequest的基本使用

在这里插入图片描述

1 使用xhr发起GET请求

在这里插入图片描述

// 1. 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数，指定 请求方式 与 URL地址
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
// 3. 调用 send 函数，发起 Ajax 请求
xhr.send()
// 4. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
    // 4.1 监听 xhr 对象的请求状态 readyState ；与服务器响应的状态 status
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 4.2 打印服务器响应回来的数据
        console.log(xhr.responseText)
    }
}

在这里插入图片描述

1.2 get 请求携带参数时 && 编码，译码

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2 使用xhr发起post请求

在这里插入图片描述

// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open()
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
// 3. 设置 Content-Type 属性（固定写法）
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4. 调用 send()，同时将数据以查询字符串的形式，提交给服务器
xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')
// 5. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
    }
}
2 数据交换格式

在这里插入图片描述

2.1 JSON语法注意点 本质是一个字符串

在这里插入图片描述

2.2 JSON和JS对象的互转 Json.parse() && JSON .stringify

在这里插入图片描述
序列化 && 反序列化
在这里插入图片描述

3. 封装自己的Ajax函数
<!-- 1. 导入自定义的ajax函数库 -->
<script src="./itheima.js"></script>

<script>
    // 2. 调用自定义的 itheima 函数，发起 Ajax 数据请求
    itheima({
        method: '请求类型',
        url: '请求地址',
        data: { /* 请求参数对象 */ },
        success: function(res) { // 成功的回调函数
            console.log(res)     // 打印数据
        }
    })
</script>

在这里插入图片描述

在这里插入图片描述

/**
 * 处理 data 参数
 * @param {data} 需要发送到服务器的数据
 * @returns {string} 返回拼接好的查询字符串 name=zs&age=10
 */
function resolveData(data) {
  var arr = []
  for (var k in data) {
    arr.push(k + '=' + data[k])
  }
  return arr.join('&')
}

在这里插入图片描述

function itheima(options) {
  var xhr = new XMLHttpRequest()
  // 拼接查询字符串
  var qs = resolveData(options.data)

  // 监听请求状态改变的事件
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var result = JSON.parse(xhr.responseText)
      options.success(result)
    }
  }
}

在这里插入图片描述

  if (options.method.toUpperCase() === 'GET') {
    // 发起 GET 请求
    xhr.open(options.method, options.url + '?' + qs)
    xhr.send()
  } else if (options.method.toUpperCase() === 'POST') {
    // 发起 POST 请求
    xhr.open(options.method, options.url)
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.send(qs)
  }
4. XMLHttpRequest Level2的新特性

在这里插入图片描述
在这里插入图片描述

1 设置HTTP请求时限 xhr.timeout

在这里插入图片描述

2 FormData对象管理表单数据

Ajax 操作往往用来提交表单数据。为了方便表单处理，HTML5 新增了一个 FormData 对象，可以模拟表单操作：

    // 1. 新建 FormData 对象
      var fd = new FormData()
      // 2. 为 FormData 添加表单项
      fd.append('uname', 'zs')
      fd.append('upwd', '123456')
      // 3. 创建 XHR 对象
      var xhr = new XMLHttpRequest()
      // 4. 指定请求类型与URL地址
      xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
      // 5. 直接提交 FormData 对象，这与提交网页表单的效果，完全一样
      xhr.send(fd)

FormData对象也可以用来获取网页表单的值，示例代码如下：

 // 获取表单元素
 var form = document.querySelector('#form1')
 // 监听表单元素的 submit 事件
 form.addEventListener('submit', function(e) {
    e.preventDefault()
     // 根据 form 表单创建 FormData 对象，会自动将表单数据填充到 FormData 对象中
     var fd = new FormData(form)
     var xhr = new XMLHttpRequest()
     xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
     xhr.send(fd)
     xhr.onreadystatechange = function() {}
})
3 上传文件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

 // 创建 XHR 对象
 var xhr = new XMLHttpRequest()
 // 监听 xhr.upload 的 onprogress 事件
 xhr.upload.onprogress = function(e) {
    // e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度
    if (e.lengthComputable) {
        // e.loaded 已传输的字节
        // e.total  需传输的总字节
        var percentComplete = Math.ceil((e.loaded / e.total) * 100)
    }
 }

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5. jQuery高级用法

5.1 jQuery实现文件上传

在这里插入图片描述

    <!-- 导入 jQuery -->
    <script src="./lib/jquery.js"></script>

    <!-- 文件选择框 -->
    <input type="file" id="file1" />
    <!-- 上传文件按钮 -->
    <button id="btnUpload">上传</button>

在这里插入图片描述

   
 $('#btnUpload').on('click', function() {
     // 1. 将 jQuery 对象转化为 DOM 对象，并获取选中的文件列表
     var files = $('#file1')[0].files
     // 2. 判断是否选择了文件
     if (files.length <= 0) {
         return alert('请选择图片后再上传！‘)
     }
 })

在这里插入图片描述

 // 向 FormData 中追加文件
 var fd = new FormData()
 fd.append('avatar', files[0])

在这里插入图片描述

 $.ajax({
     method: 'POST',
     url: 'http://www.liulongbin.top:3006/api/upload/avatar',
     data: fd,
     // 不修改 Content-Type 属性，使用 FormData 默认的 Content-Type 值
     contentType: false,
     // 不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
     processData: false,
     success: function(res) {
         console.log(res)
     }
 })
5.2 jQuery实现loading效果

在这里插入图片描述

 // 自 jQuery 版本 1.8 起，该方法只能被附加到文档
 $(document).ajaxStart(function() {
     $('#loading').show()
 })

注意： $(document).ajaxStart() 函数会监听当前文档内所有的 Ajax 请求
在这里插入图片描述

 // 自 jQuery 版本 1.8 起，该方法只能被附加到文档
 $(document).ajaxStop(function() {
     $('#loading').hide()
 })

6. axios

在这里插入图片描述

6.2 axios发起GET请求 axios.get(‘url’, { params: { /参数/ } }).then(callback)

axios.get(‘url’, { params: { /参数/ } }).then(callback)

 // 请求的 URL 地址
 var url = 'http://www.liulongbin.top:3006/api/post'
 // 要提交到服务器的数据
 var dataObj = { location: '北京', address: '顺义' }
 // 调用 axios.post() 发起 POST 请求
 axios.post(url, dataObj).then(function(res) {
     // res.data 是服务器返回的数据
     var result = res.data
     console.log(result)
 })

在这里插入图片描述

 axios({
     method: '请求类型',
     url: '请求的URL地址',
     data: { /* POST数据 */ },
     params: { /* GET参数 */ }
 }) .then(callback)

在这里插入图片描述

7 跨域与JSONP

1 同源策略 （协议，域名和端口）相同

在这里插入图片描述
同源指的是两个 URL 的协议、域名、端口一致，反之，则是跨域。
注意：浏览器允许发起跨域请求，但是，跨域请求回来的数据，会被浏览器拦截，无法被页面获取到

2 如何实现跨域数据请求 jsonp && cors

在这里插入图片描述

3 JSONP (只能发起get 请求)

在这里插入图片描述
在这里插入图片描述

 <script>
   function success(data) {
     console.log('获取到了data数据：')
     console.log(data)
   }
 </script>

通过 

<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=zs&age=20"></script>

在这里插入图片描述

4 jQuery中的JSONP

jQuery 提供的 $.ajax() 函数，除了可以发起真正的 Ajax 数据请求之外，还能够发起 JSONP 数据请求，例如：

 $.ajax({
    url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
    // 如果要使用 $.ajax() 发起 JSONP 请求，必须指定 datatype 为 jsonp
    dataType: 'jsonp',
    success: function(res) {
       console.log(res)
    }
 })

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

二 HTTP协议

在这里插入图片描述

1 http 协议交互模型

在这里插入图片描述

2 HTTP请求消息（请求行 请求头，空行 请求体）

在这里插入图片描述

1. 请求行 （请求方式、URL 和 HTTP 协议版本）

在这里插入图片描述

2 请求头部

请求头部用来描述客户端的基本信息，从而把客户端相关的信息告知服务器
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3. 空行

在这里插入图片描述

4. 请求体 (POST 方式 get 没有)

在这里插入图片描述

5. 总结

在这里插入图片描述

3. HTTP响应消息 （响应报文）状态行、响应头部、空行 和 响应体

HTTP响应消息由状态行、响应头部、空行 和 响应体 4 个部分组成，如下图所示：
在这里插入图片描述

1. 状态行 （协议版本、状态码和状态码的描述文本 ）

在这里插入图片描述

2. 响应头部（描述服务器的基本信息）

在这里插入图片描述
在这里插入图片描述

3. 空行

在这里插入图片描述

4. 响应体

在这里插入图片描述

5. 总结

在这里插入图片描述

4. HTTP请求方法

在这里插入图片描述

5. HTTP响应状态码

在这里插入图片描述

1 2** 成功相关的响应状态码

在这里插入图片描述

2. 3** 重定向相关的响应状态码

在这里插入图片描述

3 4** 客户端错误相关的响应状态码

在这里插入图片描述

4 5** 服务端错误相关的响应状态码

在这里插入图片描述

@海海人生
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端_网页编程 HTTP协议（进阶）
←か淡定☆ ヾ 的博客
08-30 291
文章目录内容1. HTTP协议简介1.1 什么是通信1.1.1 现实生活中的通信1.1.2 互联网中的通信1.2 什么是通信协议1.2.1 现实生活中的通信协议1.2.2 互联网中的通信协议1.3 HTTP1.3.1 什么是HTTP协议1.3.2 HTTP协议的交互模式2. HTTP请求消息2.1 什么是HTTP请求消息2.2 HTTP请求消息的组成部分2.2.1 请求行2.2.2 请求头部2.2.3 空行2.3.4 请求体2.3.5 小结3. HTTP响应消息3.1 什么是HTTP响应消息3.2 HTTP
【必看】2020年新型前端HTML5+CSS3+JS+Canvas+AJAX+Http前后端交互
06-17
课程为零基础学习开发的学员而准备，无需...JS包含核心语法、面向对象编程、复杂的项目案例、HTTP网络协议、AJAX前后端异步交互等；新型前端开发大部分回归原始开发，核心编程能力非常重要，本课程教会你如何玩转前端。
HTTP/Ajax
weixin_53137201的博客
04-26 360
该篇文章笔记记录了JavaScript原生请求以及Ajax请求，对于请求的格式，HTTP协议，请求，响应，以及传参都有对应的讲解。
Ajax与http
BlackeggXian的博客
12-08 427
一、Ajax的介绍 1、客户端与服务器 概念 客户端：在因特网中，负责获取和消费资源电脑 服务器：在因特网中，负责存放和对外提供给资源的电脑 客户端与服务器通信的过程 服务器对外提供的资源 数据也是资源 网页中的数据，也是服务器对外提供的一种资源。需要通过：请求、处理、响应的方式进行获取 网页请求数据 网页中请求数据：如果要在服务器上请求资源，则需要XMLHttpReqest对象 XMLHttpReqest（简称xhr）是浏览器提供的js成员，通过它，可以请求服务器上的数据资源
Ajax与Http协议
qq_42129143的博客
05-09 303
一、Ajax与http详解 Ajax全名为Asynchronous javascript and xml 是指围绕（由js向服务器发起http请求），这个功能而开发的一整套完整做法 处理网络请求的四个步骤： 1、创建Xhr对象 2、发出HTTP请求 3、接收...
AJAX——HTTP协议
最新发布
weixin_48719464的博客
02-15 1096
HTTP协议：规定了浏览器发送及服务器返回内容的格式请求报文：浏览器按照HTTP协议要求的格式，发送给服务器的内容。
ajax+nodejs教材代码
12-26
**二、Node.js入门** 1. **安装与环境配置**：首先需要安装Node.js，然后创建项目文件结构，初始化npm（Node Package Manager）并设置依赖。 2. **Express框架**：在Node.js中，Express是最常用的Web应用框架，它...
AJAX 简介及入门实例
10-29
在学习和使用AJAX时，理解异步请求的工作原理、掌握JavaScript的DOM操作以及熟悉HTTP请求的构建和处理是非常重要的。同时，对于跨域请求、错误处理和性能优化等方面也需要有深入的了解，以便在实际项目中更好地运用...
AJAX+servlet入门实例用户注册
08-26
【AJAX + Servlet 入门实例：用户注册】 在Web开发中，AJAX（Asynchronous JavaScript and XML）和Servlet是两种关键的技术，它们共同构建了动态、交互性强的Web应用程序。这个入门实例将向我们展示如何利用AJAX与...
JavaWeb入门（学生管理系统前后端开发，ajax+servlet+tomcat+vue+maven+mysql...)
07-15
JavaWeb入门是一个面向初学者的项目，通过构建一个学生管理系统，涵盖了前端与后端的开发技术，旨在帮助学习者快速掌握现代Web应用开发的核心技能。这个项目的特点是功能明确、界面美观、逻辑清晰，适合作为学习材料...
HTTP和Ajax详解
L081773的博客
06-09 225
ajax
【异步请求】异步操作ajax、axios
weixin_52479803的博客
02-06 321
AJAX
史上最全的AJAX之XMLHttpRequest方法和属性详解
安卓程序员小黄的专栏
02-05 9580
转载请标明出处 本文出自HCY的博客 概述AJAX是“Asynchronous Javascript And XML”的缩写，中文译作“异步JavaScript和XML”。使用AJAX可以通过HTTP协议与服务器交互数据，可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页如果需要更新内容，必须重新加载整个网页页面。此外，它也是实现前端与后端解耦的重要技术手段。为了实现
对原生AJAX和HTTP的理解
前端小贤
02-10 2237
AJAX的全称：Asynchronous JavaScript and XML (异步的JavaScript和XML)ajax不是某种编程语言，是一种在无需重新加载整个网页的情况下能够更新部分网页的技术传统的网页（即不适用ajax技术的网页）想要更新内容或者提交一个表单就需要重新加载页面使用了ajax技术的网页通过在后台跟服务器进行少量的数据交换，网页就可以实现异步局部更新概念介绍：    1.运...
前端之Ajax(HTTP)
wzj_110的博客
06-15 931
一，传统的网络应用     的采用的英文同步响应模式 -------即：一次HTTP请求对应一个新的页面，每次请求都会丢弃当前页面来重新加载新页面！     案例1：仔细观察一个form表单的提交，你就会发现，一旦用户点击“submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了，如果不幸由于网络太慢或者其他原因，就会得到一个404页面。     弊端(特点...
ajax 返回信息处理实例,ajax的http请求发送函数和处理返回信息函数及实例（The Ajax HTTP requests the sending function and processes ...
weixin_39957951的博客
08-06 248
ajax的http请求发送函数和处理返回信息函数及实例(The Ajax HTTP requests the sending function and processes the returned information function and instances)ajax的http请求发送函数和处理返回信息函数及实例(The Ajax HTTP requests the sending fun...
Ajax + HTTP
m0_65552590的博客
08-03 381
介绍Ajax和HTTP
ajax基本语法
Marychers的博客
01-08 2271
——贼尴尬，拿到一个web项目，修改的时候发现是用的ajax，很久没用了，居然连基础语法都忘了，经历非常坎坷，记录下来省的以后又忘记！ 刚开始的时候发现其它页面用的ajax，因为我要做的功能不多，所以就直接添加ashx了！ 第一步 写ashx：这个步骤很简单，就跟写aspx的后台一样，没什么需要特别注意的地方！硬是要说的话，可能就是一个context了！ 第二步 发送请求：（就是忘记了这
ajax技术的入门.docx
09-15
"这篇文档是关于AJAX技术的入门教程，特别针对Eclipse开发环境。文档详细介绍了AJAX的基本概念、优势、核心组件以及如何在实际应用中使用AJAX进行开发，包括创建基本的AJAX请求的步骤和XMLHttpRequest对象的使用方法...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值