本文介绍: 文章目录一、XMLHttpRequest的基本使用1.1什么是XMLHttpRequest1.2使用xhr发起GET请求1.3 了解xhr对象readyState属性1.4使用xhr发起带参数的GET请求1.5查询字符串1.6 URL编码解码1.7 使用xhr发起POST请求二、数据交换格式2.1什么是数据交换格式2.2 XML2.3JSON三、封装自己的Ajax函数3.1定义options参数选项3.2 处理data参数一、XMLHttpRequest的基本使用1.1什么是XMLHttpRequ

一、XMLHttpRequest的基本使用

1.1什么是XMLHttpRequest

XMLHttpRequest(简称xhr)是浏览器提供的Javascript对象通过可以请求==服务器上的数据资源。==之前所学的jQuery中的Ajax函数,就是基于xhr对象封装出来的。
在这里插入图片描述

1.2使用xhr发起GET请求

步骤
(1)创建xhr对象
(2)调用xhr.open()对象
(3)调用xhr.send()对象
(4)监听xhr.onreadystatechange事件

<script&gt;
    var xhr = new XMLHttpRequest()
    xhr.open('GET','http://127.0.0.1:4523/mock2/813627/15864648')
    xhr.send()
    xhr.onreadystatechange = function (){
        if(xhr.readyState === 4 &amp;&amp; xhr.status === 200){
            console.log(xhr.responseText)
        }
    }
</script&gt;

1.3 了解xhr对象的readyState属性

XMLHttpRequest对象的readyState属性用来表示当前Ajax请求所处的状态每个Ajax请求必然处于以下状态中的一个

在这里插入图片描述

1.4使用xhr发起带参数的GET请求

使用xhr对象发起带参数的GET请求时,只需要调用xhr.open期间,为URL地址参数即可

xhr.open('GET','http://127.0.0.1:4523/mock2/813627/15864648?id=8677077509400698')

这种在URL地址后面拼接的参数,叫做查询字符串

1.5查询字符串

1.什么是查询字符串
定义查询字符串是指在URL的末尾加上用于服务器发送信息字符串变量
格式:将英文的?放在URL的末尾然后再加上参数=值,想加上多个参数的话,使用&amp;符号进行分隔。以这个形式,可以将想要发送给服务器的数据添加到URL中。
在这里插入图片描述
2 GET请求携带参数的本质
无论使用$.ajax()还是使用$.get()又或者直接使用xhr对象发起GET请求,当需要携带参数的时候本质上都是直接将参数以查询字符串的形式,追加到URL地址的后面,发送服务器的。
在这里插入图片描述

1.6 URL编码解码

1.什么是URL编码
URL地址中,只允许出现英文相关字母,标点符号数字,因此在地址中不允许出现中文字符。如果出现中文字符必须进行编码
URL编码原则使用安全的字符,去表示安全的字符
通俗就是用英文字符去表示英文字符
在这里插入图片描述
2.如何对URL进行编码解码❤️

浏览器提供了URL编码与解码的API,分别是
encodeURI()编码的函数
decodeURI()解码的函数
在这里插入图片描述

<script&gt;
  var str = '我爱你'
  var str2 = encodeURI(str);
  console.log(str2)
  console.log('----------------')
  var str3 = decodeURI('%E6%88%91%E7%88%B1%E4%BD%A0')
  console.log(str3)
</script&gt;

在这里插入图片描述
3.URL编码的注意事项
由于浏览器会自动URL地址 进行编码操作,因此,大多数情况下
程序员需要关心URL地址的编码与解码操作

1.7 使用xhr发起POST请求

(1)创建xhr对象
(2)调用chr.open()函数
(3)设置Content-Type属性固定写法
(4)调用xhr.send()函数,同时指定发送的数据
(5)监听xhr.onreadystatechange事件
在这里插入图片描述

 //1.创建xhr对象
  var xhr = new XMLHttpRequest()
  // 2.调用 open 函数
  xhr.open('POST','http://127.0.0.1:4523/mock/813627/pet')
  // 3.设置属性
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
  // 4.调用send
  xhr.send('name = dog &amp; status = sold')
  // 5.监听事件
  xhr.onreadystatechange = function (){
    if(xhr.readyState === 4 &amp;&amp; xhr.status === 200 ){
      console.log(xhr.responseText)
    }
  }
</script&gt;

二、数据交换格式

2.1什么是数据交换格式

数据交换格式就是服务器客户端之间进行数据传输与交换的格式
前端经常用的两种数据交换格式是XML和JSON需要终点学习JSON
在这里插入图片描述

2.2 XML

1.什么是XML
XML的英文就是扩展标记语言因此与HTML类似
也是一种标记语言
在这里插入图片描述
2.XML与HTML的区别
HTML被用来描述网页上的内容,是网页内容的载体
XML被设计用来传输存储数据,是数据的载体在这里插入图片描述

3.XML的缺点
(1)格式臃肿,和数据无关的代码较多
(2)JS解析麻烦

2.3JSON

1.什么是JSON
即JS对象表示法就是JS对象和数组的字符串表示法它使用文本表示 一个JS对象或数组信息,因此,JSON的本质是字符串
作用:一种轻量级文本数据交换格式,在作用上类似于XML,专门用于存储传输数据,但是比XML更好
2.JSON的两种结构
对象结构:对象结构在JSON中表示为{}括起来的内容,数据结构为{key:value,key:value,…}的键值结构。其中,key必须是使用英文的双引号包裹的字符串,value数据类型可是数字,字符串、布尔值null数组,对象

在这里插入图片描述
数组结构使用[]括起来的内容,数据结构为[“java”,true,30…]
数组中可以数字,字符串,布尔值null,对象
在这里插入图片描述
3.JSON使用注意事项
在这里插入图片描述
作用:在计算机网络之间传输数据

4.JSON和JS对象的关系
JSON是JS对象的字符串表示法
在这里插入图片描述
5.JSON和JS对象的互转
实现JSON字符串转换为JS对象,使用JSON.parse()方法

<script>
  var jsonstr = '{"a": "hello","b":"world"}'
  var obj = JSON.parse(jsonstr)
  console.log(obj)
</script>

JS对象转换为JSON字符串,使用JSON.stringify()
在这里插入图片描述
6.序列化和反序列
把数据对象转换字符串叫做序列例如调用JSON.stringify()叫做JSON序列
把字符串转换为数据对象叫做序列

三、封装自己的Ajax函数

3.1定义options参数选项

在这里插入图片描述

3.2 处理data参数

data对象,转换成查询字符串的格式,从而提交服务器
在这里插入图片描述

原文地址:https://blog.csdn.net/qq_52986400/article/details/123919499

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_28010.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注