Ajax——(笔记)

落空呀

已于 2022-06-08 13:08:01 修改

阅读量752

点赞数 1

分类专栏： JavaScript 文章标签： ajax javascript 服务器

于 2022-05-29 11:14:24 首次发布

本文链接：https://blog.csdn.net/qq_49066502/article/details/125028569

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Ajax

在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式

URL统一资源定位符
http://www.cnblogs.com/liulongbinblogs/p/11649393.html
通信协议://服务器名称/资源在服务器的具体位置
请求 ——> 处理 ——> 响应

jQuery中的Ajax

$.get()

获取资源：$.get(url, [data], [callback])

$.get(
	'http://www.liulongbin.top:3006/api/getbooks', // 请求的资源地址
	{ id: 2 }, // 请求资源期间要携带的参数
	function(res){ // 请求成功时的回调函数
		console.log(res);
	}
)

$.post()

提交数据：$.post(url, [data], [callback])

$.post(
	'http://www.liulongbin.top:3006/api/addbook', // 提交数据的地址
	{ bookname: '水浒传', author: '施耐庵', publisher: '上海图书出版社' }, // 要提交的数据
	function(res){ // 数据提交成功时的回调函数
		console.log(res);
	}
)

$.ajax()

$.ajax({
	type: 'GET', // 请求的方式，例如 GET 或 POST
	url: 'http://www.liulongbin.top:3006/api/getbooks',  // 请求的 URL 地址
	data: { id: 2 },// 这次请求要携带的数据
	success: function(res) { // 请求成功之后的回调函数
		console.log(res);
	} 
})

$.ajax({
	type: 'POST', // 请求的方式，例如 GET 或 POST
	url: 'http://www.liulongbin.top:3006/api/addbook',  // 请求的 URL 地址
	data: { bookname: '水浒传', author: '施耐庵', publisher: '上海图书出版社' },// 这次请求要携带的数据
	success: function(res) { // 请求成功之后的回调函数
		console.log(res);
	} 
})

接口

使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称接口）。同时，每个接口必须有请求方式。

接口文档

接口名称：用来标识各个接口的简单说明，如登录接口，获取图书列表接口等。
接口URL：接口的调用地址。
调用方式：接口的调用方式，如 GET 或 POST。
参数格式：接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容。
响应格式：接口的返回值的详细描述，一般包含数据名称、数据类型、说明3项内容。
返回示例（可选）：通过对象的形式，例举服务器返回数据的结构。

图书管理案例

function getBookList(){ // 获取 渲染 图书管理
	$.get(' http://www.liulongbin.top:3006/api/getbooks',function(rel){
	if(rel.status !== 200) return alert("获取失败");//不等于200是错的
		var rows = [];//存放数据
		$.each(rel.data,function(i,ele){
			var id = ele.id
			var bookname = ele.bookname;
			var author = ele.bookname;
			var publisher = ele.bookname;
			rows.push("<tr><td>"+id+"</td><td>"+bookname+"</td><td>"+author+"</td><td>"+publisher+"</td><td><a href='javascript:;' data-id="+ele.id+">删除</a></td></tr>");
					//数组追加数据
		});
	$("#tb").empty().append(rows.join(""));//将之前渲染的去掉重新追加数据将数组拆分成字符串
	})
}

form表单

属性	值	描述
action	URL地址	向何处发送表单数据，当提交表单后，页面会立即跳转到 action 属性指定的 URL 地址
method	get或post	规定以何种方式把表单数据提交到 action URL
enctype	application/x-www-form-urlencoded	规定在发送表单数据之前如何对其进行编码
target	_blank 在新窗口中打开 _self 默认	用来规定在何处打开 action URL

在涉及到文件上传的操作时，必须将 enctype 的值设置为 multipart/form-data

Ajax提交表单

submit：监听事件
阻止默认行为：e.preventDefault()

$('#form1').submit(function(e) {
   // 阻止表单的提交和页面的跳转
   e.preventDefault()
})

$('#form1').on('submit', function(e) {
   // 阻止表单的提交和页面的跳转
   e.preventDefault()
})

jQuery中的serialize()：获取表单中的所有数据表单元素必须有name属性

<form id="form1">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
</form>

$('#form1').serialize() // 原生reset()：清空表单内容
// 调用的结果：
// username=用户名的值&password=密码的值

评论列表案例

function getCmtList() { // 获取评论列表
    $.get('http://www.liulongbin.top:3006/api/cmtlist', function (res) {  
      if(res.status !== 200) {
        return alert('获取评论列表失败！')
      }
      var rows = []
      $.each(res.data, function (i, item) { // 循环拼接字符串
        rows.push('<li class="list-group-item">'+ item.content +'<span class="badge cmt-date">评论时间：'+ item.time +'</span><span class="badge cmt-person">评论人：'+ item.username +'</span></li>')
      })
      $('#cmt-list').empty().append(rows.join('')) // 渲染列表的UI结构
    })
  }

$('#formAddCmt').submit(function(e) { // 发表评论
    e.preventDefault() // 阻止表单的默认提交行为
    // 快速得到表单中的数据
    var data = $(this).serialize() // 查询字符串格式
    $.post('http://www.liulongbin.top:3006/api/addcmt', data, function(res) {
      if (res.status !== 201) {
        return alert('发表评论失败！')
      }
      // 刷新评论列表
      getCmtList()
      // 快速清空表单内容
      $('#formAddCmt')[0].reset()
    })
})

模板引擎

通过字符串拼接的形式，来渲染UI结构。如果UI结构比较复杂，则拼接字符串的时候需要格外注意引号之前的嵌套。且一旦需求发生变化，修改起来也非常麻烦。

模板引擎，顾名思义，它可以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面

art-template

art-template 是一个简约、超快的模板引擎。中文官网首页为 http://aui.github.io/art-template/zh-cn/index.html
（模板结构）+（数据）=（渲染页面）

标准语法

在 {{ }} 内可以进行变量输出，或循环数组等操作

输出

{{value}} // 变量
{{obj.key}} // 对象属性
{{obj['key']}}
{{a ? b : c}} // 三元表达式
{{a || b}} // 逻辑或
{{a + b}} // 加减乘除

原文输出

{{@ value }} // 原文输出 保证 HTML 标签被正常渲染

条件输出

{{if value}} 按需输出的内容 {{/if}}  
{{if v1}} 按需输出的内容 {{else if v2}} 按需输出的内容 {{/if}}

循环输出

{{each arr}}
    {{$index}} {{$value}} // $index下标 $value 值
{{/each}}

过滤器

{{value | filterName}} // 使用过滤器
定义过滤器
template.defaults.imports.filterName = function(value){/*return处理的结果*/}

模板结构

<script type="text/html" id="tpl-user"> // 定义模板结构
    <h1>{{name}}    ------    {{age}}</h1>
    {{@ test}}

    <div>
      {{if flag === 0}}
      flag的值是0
      {{else if flag === 1}}
      flag的值是1
      {{/if}}
    </div>

    <ul>
      {{each hobby}}
      <li>索引是:{{$index}}，循环项是:{{$value}}</li>
      {{/each}}
    </ul>

    <h3>{{regTime | dateFormat}}</h3>
  </script>

数据

<script>
    // 定义处理时间的过滤器
    template.defaults.imports.dateFormat = function (date) {
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      var d = date.getDate()

      return y + '-' + m + '-' + d
    }

    // 2. 定义需要渲染的数据
    var data = { name: 'zs', age: 20, test: '<h3>测试原文输出</h3>', flag: 1, hobby: ['吃饭', '睡觉', '写代码'], regTime: new Date() }

    // 4. 调用 template 函数 
    // HTML结构 = template(模板结构,数据)
    var htmlStr = template('tpl-user', data)
    console.log(htmlStr)
    // 5. 渲染HTML结构
    $('#container').html(htmlStr)
</script>

模板基本原理

基本语法

RegExpObject.exec(string) 函数用于检索字符串中的正则表达式的匹配

var str = 'hello'
var pattern = /o/
// 输出的结果["o", index: 4, input: "hello", groups: undefined]
console.log(pattern.exec(str))

分组

正则表达式中 ( ) 包起来的内容表示一个分组，可以通过分组来提取自己想要的内容

var str = '<div>我是{{name}}</div>'
 var pattern = /{{([a-zA-Z]+)}}/
 var patternResult = pattern.exec(str)
 console.log(patternResult)
 // 得到 name 相关的分组信息
 // ["{{name}}", "name", index: 7, input: "<div>我是{{name}}</div>", groups: undefined]

replace函数

replace() 函数用于在字符串中用一些字符替换另一些字符

var result = '123456'.replace('123', 'abc') // 得到的 result 的值为字符串 'abc456'

简易模板引擎

<div id="user-box"></div>
<script type="text/html" id="tpl-user">
    <div>姓名：{{name}}</div>
    <div>年龄：{{ age }}</div>
    <div>性别：{{  gender}}</div>
    <div>住址：{{address  }}</div>
</script>
<script>
    // 定义数据
    var data = { name: 'zs', age: 28, gender: '男', address: '北京顺义马坡' }
    // 调用模板引擎
    var htmlStr = template('tpl-user', data)
    // 渲染HTML结构
    document.getElementById('user-box').innerHTML = htmlStr
</script>

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)) { // 正则匹配{{}} 为null 结束
    str = str.replace(pattResult[0], data[pattResult[1]]) // 字符替换
  }
  return str
}

XMLHttpRequest

XMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，通过它，可以请求服务器上的数据资源

GET请求

// 1. 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数，指定 请求方式 与 URL地址
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1') // ?id=1 是携带的参数
// 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)
    }
}

查询字符串

查询字符串（URL 参数）是指在 URL 的末尾加上用于向服务器发送信息的字符串（变量）
格式：将英文的 ? 放在URL 的末尾，然后再加上 参数＝值 ，想加上多个参数的话，使用 & 符号进行分隔

?id=1&bookname=西游记

URL编码

encodeURI('黑马程序员') //  编码的函数
// 输出字符串  %E9%BB%91%E9%A9%AC%E7%A8%8B%E5%BA%8F%E5%91%98
decodeURI('%E9%BB%91%E9%A9%AC') // 解码的函数
// 输出字符串  黑马

POST请求

// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open()
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
// 3. 设置 Content-Type 属性（固定写法）
// 在Ajax中会设置
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)
    }
}

JSON

JSON 就是 Javascript 对象和数组的字符串表示法，它使用文本表示一个 JS 对象或数组的信息，因此，JSON 的本质是字符串

JSON的两种结构

对象结构

对象结构在 JSON 中表示为 { } 括起来的内容。数据结构为 { key: value, key: value, … } 的键值对结构。其中，key 必须是使用英文的双引号包裹的字符串，value 的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

数组结构

数组结构在 JSON 中表示为 [ ] 括起来的内容。数据结构为 [ “java”, “javascript”, 30, true … ] 。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

注意事项

①属性名必须使用双引号包裹
②字符串类型的值必须使用双引号包裹
③JSON 中不允许使用单引号表示字符串
④JSON 中不能写注释
⑤JSON 的最外层必须是对象或数组格式
⑥不能使用 undefined 或函数作为 JSON 的值

与JS对象的互转

方法	说明
JSON.parse()	从 JSON 字符串转换为 JS 对象

var obj = JSON.parse('{"a": "Hello", "b": "World"}') // 字符串转换为数据对象 反序列化
//结果是 {a: 'Hello', b: 'World'}
var json = JSON.stringify({a: 'Hello', b: 'World'}) // 数据对象转换为字符串 序列化
//结果是 '{"a": "Hello", "b": "World"}'

封装Ajax函数

XMLHttpRequest Level2

请求限时

xhr.timeout = 3000 //设置等待时间过了这个时间
xhr.ontimeout = function(event){//执行这个回调函数
     alert('请求超时！')
 }

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)
xhr.onreadystatechange = function() {}

// 获取表单元素
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() {}
})

在使用原生的请求表单在上传文件数据时，用默认设置 enctype=“multipart/form-data”，那么请求报文会设置 “Content-Type: multipart/form-data”，但是我们在发送 Ajax 请求时会设置其他的请求报文，就不会去设置他

上传文件

1.定义 UI 结构

<!-- 导入 jQuery -->
<script src="./lib/jquery.js"></script>
<!-- 文件选择框 -->
<input type="file" id="file1" />
<!-- 上传文件按钮 -->
<button id="btnUpload">上传</button>
 <br />
<img src="./images/loading.gif" alt="" style="display: none;" id="loading" />

2.验证是否选择了文件

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

3.向 FormData 中追加文件

var fd = new FormData()
fd.append('avatar', files[0])

4.使用 xhr 发起上传文件的请求

// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数，指定请求类型与URL地址。其中，请求类型必须为 POST
xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
// 3. 发起请求
xhr.send(fd)
//监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText)
    if (data.status === 200) { // 上传文件成功
      // 将服务器返回的图片地址，设置为 <img> 标签的 src 属性
      document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
    } else { // 上传文件失败
      console.log(data.message)
    }
  }
}

使用jQuery发起上传文件的请求

$.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)
    }
})

Ajax请求开始：ajaxStart(callback)

$(document).ajaxStart(function() { // 会监听当前文档内所有的 Ajax 请求
     $('#loading').show() // 图片显示
 })

Ajax请求结束：ajaxStop(callback)

$(document).ajaxStop(function() { // 请求结束执行
     $('#loading').hide() // 图片隐藏
})

Axios

Axios 是专注于网络数据请求的库

get请求

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

// 请求的 URL 地址
var url = 'http://www.liulongbin.top:3006/api/get'
// 请求的参数对象
var paramsObj = { name: 'zs', age: 20 }
// 调用 axios.get() 发起 GET 请求
axios.get(url, { params: paramsObj }).then(function(res) {
     // res.data 是服务器返回的数据
     var result = res.data
     console.log(res)
})

post请求

axios.post(‘url’, { /参数/ }).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请求

axios({
    method: 'GET',
    url: 'http://www.liulongbin.top:3006/api/get',
    params: { // GET 参数要通过 params 属性提供
        name: 'zs',
        age: 20
    }
}).then(function(res) {
    console.log(res.data)
})

axios({
    method: 'POST',
    url: 'http://www.liulongbin.top:3006/api/post',
    data: { // POST 数据要通过 data 属性提供
        bookname: '程序员的自我修养',
        price: 666
    }
}).then(function(res) {
     console.log(res.data)
})

同源策略

浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互

同源

同源是两个页面的协议，域名和端口都相同，则两个页面具有相同的源

跨域

非同源反之，则是跨域

JSONP

JSONP (JSON with Padding) 是 JSON 的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题
由于浏览器同源策略的限制，网页中无法通过 Ajax 请求非同源的接口数据。但是

自定义JSONP

<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=zs&age=20"></script> // 查询字符串 callback = success 指定调用success函数
// 响应回来的是 success{ massage: "JSONP响应成功",data: { name: 'zs' , age: '22'} }

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

jQuery的JSONP

是通过

$.ajax({
    url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
    // 如果要使用 $.ajax() 发起 JSONP 请求，必须指定 datatype 为 jsonp
    dataType: 'jsonp', // 会自动携带一个 callback=jQueryxxx 
    // 发送到服务端的参数名称，默认值为 callback
    jsonp: 'callback',
    // 自定义的回调函数名称，默认值为 jQueryxxx 格式
    jsonpCallback: 'abc',
    success: function(res) {
       console.log(res)
    }
 })

防抖

防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时

var timer = null                    // 1. 防抖动的 timer

function debounceSearch(keywords) { // 2. 定义防抖的函数
    timer = setTimeout(function() { // 定时函数
    // 发起 JSONP 请求
    getSuggestList(keywords)
    }, 500)
}

$('#ipt').on('keyup', function() {  // 3. 在触发 keyup 事件时，立即清空 timer
    clearTimeout(timer)
    // ...省略其他代码
    debounceSearch(keywords) // 重新创建定时函数
})

节流

节流策略（throttle），顾名思义，可以减少一段时间内事件的触发频率。

$(function() {
  var angel = $('#angel')
  var timer = null // 1.预定义一个 timer 节流阀
  $(document).on('mousemove', function(e) {
    if (timer) { return } // 3.判断节流阀是否为空，如果不为空，则证明距离上次执行间隔不足16毫秒
    timer = setTimeout(function() {
      $(angel).css('left', e.pageX + 'px').css('top', e.pageY + 'px')
      timer = null // 2.当设置了鼠标跟随效果后，清空 timer 节流阀，方便下次开启延时器
    }, 16)
  })
})

HTTP

HTTP协议

（主体）+（内容）+（方式） (服务器+客户端) + (内容) + (响应)

通信协议

HTTP（规则）因此网页内容的传输协议又叫做超文本传输协议

HTTP请求消息

请求行、请求头部、空行和请求体 4 个部分组成

HTTP响应消息

状态行、响应头部、空行和响应体 4 个部分组成

HTTP请求方法

GET（查询）POST（新增）PUT（修改）DELETE（删除）

HTTP相应状态码

状态码	英文名称	说明
200	ok	请求成功
201	Created	已创建
301	MovedPermanently	永久移动
404	Not Found	服务器无法根据客户端的请求找到资源（网页）。
500	Internal Server Error	服务器内部错误，无法完成请求