JavaScript-初识ajax、ajax封装、及json对象使用(上)

上述完整代码

var xhr = new XMLHttpRequest();

xhr.open(“GET”, “https://api.apiopen.top/getJoke?page=1&count=2&type=video”);

xhr.send();

xhr.onreadystatechange = function() {

if (xhr.status == 200 && xhr.readyState == 4) {

var dataobj = JSON.parse(xhr.response);

console.log(dataobj)

}

};

ps：发送一个带有参数的 get 请求

• get 请求的参数就直接在 url 后面进行拼接就可以

const xhr = new XMLHttpRequest()

// 直接在地址后面加一个 ?，然后以 key=value 的形式传递

// 两个数据之间以 & 分割

xhr.open(‘get’, ‘./data.php?a=100&b=200’)

​

xhr.send()

• 这样服务端就能接受到两个参数

• 一个是 a，值是 100

• 一个是 b，值是 200

发送一个带有参数的 post 请求

post 请求的参数是携带在请求体中的，所以不需要再 url 后面拼接

const xhr = new XMLHttpRequest()

xhr.open(‘post’, ‘./data.php’)

​

// 如果是用 ajax 对象发送 post 请求，必须要先设置一下请求头中的 content-type

// 告诉一下服务端我给你的是一个什么样子的数据格式

xhr.setRequestHeader(‘content-type’, ‘application/x-www-form-urlencoded’)

// 请求体直接再 send 的时候写在 () 里面就行

// 不需要问号，直接就是 ‘key=value&key=value’ 的形式

xhr.send(“username=admin&password=123456”);

二、ajax封装

ajax 使用起来太麻烦啦，所以我们干脆将它简单封装成一个方法吧

封装第一步：

ajax.js

function getAjax(httpUrl,callbackFn){

//1.创建一个变量

var xhr = new XMLHttpRequest();

//2设置表单请求方式和路径get post

xhr.open(“GET”,httpUrl);

//3.发送数据

xhr.send();

//4.监听后台是否可以返回数据

xhr.onreadystatechange = function(){

if (xhr.status == 200 && xhr.readyState == 4) {

callbackFn(xhr);//将xhr返回出去

}

};

}

测试是不是能够调用，输出参数试一下喽

为了方便使用，我们把要传递的对象拼接成为这样一个字符串

var url = “https://api.apiopen.top/getJoke”

var data = {

page:1,

count:9,

type:“vidio”

}

var url = “https://api.apiopen.top/getJoke?page=1&count=2&type=video”;

封装第二步

ajax.js

function getAjax(httpUrl,data,callbackFn){

var xhr = new XMLHttpRequest();

//xhr.open(“post”,httpUrl); post封装

//xhr.send(parseDate(data));

xhr.open(“GET”,httpUrl+parseDate(data));

xhr.send();

xhr.onreadystatechange = function(){

if (xhr.status == 200 && xhr.readyState == 4) {

callbackFn(xhr);

}

};

//遍历这个对象的所有属性

function parseDate(data){

var str = “?”;

for(var key in data){

str = str + key+“=”+data[key]+“&”;

}

str = str.substr(0,str.length-1);

return str;

}

}

三、json对象使用

---

JSON：JavaScript 对象表示法（JavaScript Object Notation）。

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快，更易解析。

JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据格式传递。

1.JSON语法规则

数据为 键/值 对；

数据由逗号分隔；

大括号保存对象；

方括号保存数组；

1.1.JSON以 “{” 开始，以 “}” 结束。中间包裹的为Key : Value的数据结构。

{“name”:“sojson”}

{

“type1”: “string”,

“type2”: 31,

“type3”: {“name”:“张三”},

“type4”: [“张三”,“李四”],

“type5”: true,

“type6”: null,

}

1.2JSON的本质

从本质上讲JSON格式的数据就是字符串，JSON格式的数据解析就是对字符串的语义分析

例如：

2、s中 json对象，json字符串，json数组 相互转换

1、JSON对象 转化为 JSON字符串

JSON.stringify()方法进行转换

let obj = {‘name’:‘coco’, ‘age’:18,‘sex’:‘female’};

let str = JSON.stringify(obj);

console.log(str) // “{“name”:“coco”,“age”:18,“sex”:“female”}”;

2、JSON字符串 转化为 JSON对象

• eval()方法进行转换

let jsonObj = eval(‘(’ + jsonStr + ‘)’);

let str = ‘{a:1,b:2}’;

eval(‘(’ + str + ‘)’);

//需要在字符串外包裹一对括号(), {a: 1, b: 2}

• JSON.parse()方法进行转换

// 原生方法

let jsonObj = JSON.parse(jsonStr);

// jquery方法

let jsonObj = $.parseJSON(jsonStr);

var str = ‘{“name”:“coco”, “age”:18,“sex”:“female”}’;

console.log(JSON.parse(str))

//{ name: “coco”, age: 18, sex: “female” }

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦，如果有需要前端校招面试题PDF完整版的朋友可以点击这里即可免费获取，包括答案解析。

道该从何学起的朋友，同时减轻大家的负担。**

[外链图片转存中…(img-0enPMlgL-1713500603580)]

[外链图片转存中…(img-lt4qLCOD-1713500603580)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-03UoDr5W-1713500603580)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

[外链图片转存中…(img-sfZaEfk7-1713500603581)]

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦，如果有需要前端校招面试题PDF完整版的朋友可以点击这里即可免费获取，包括答案解析。

[外链图片转存中…(img-iSMe3UGr-1713500603581)]