JavaScript-初识ajax、ajax封装、及json对象使用(上)
JavaScript-初识ajax、ajax封装、及json对象使用(上！)
一、初识ajax
1.什么是ajax呢
ajax 的全称是Asynchronous JavaScript and XML，其中， Asynchronous 是异步的意思,指的是异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
ajax是一种无需重新加整个网页的情况下，能够更新部分网页的技术
实时跟数据库做交互用的技术。 在不重新加载页面的情况下
通过后台与服务器进行少量的数据交换。ajax可以使网页实现异步更新，这意味着可以在不重新加载网页的情况下，对网页进行部分更新。
| ajax所包含那些技术呢 |
|---|
| 1.使用CSS和XHTML来表示。 |
| 2. 使用DOM模型来交互和动态显示。 |
| 3.使用XMLHttpRequest来和服务器进行异步通信。 |
| 4.使用javascript来绑定和调用。 |
2.ajax原理
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步 请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。
3.ajax请求如何实现
1.创建一个 ajax 对象
// IE9及以上
const xhr = new XMLHttpRequest()
// IE9以下
const xhr = new ActiveXObject('Mricosoft.XMLHTTP')
-
上面就是有了一个 ajax 对象
-
我们就可以使用这个 xhr 对象来发送 ajax 请求了
2.设置表单请求方式和路径
xhr.open("GET", "https://api.apiopen.top/getJoke?page=1&count=2&type=video");
// xhr 对象中的 open 方法是来配置请求信息的
// 第一个参数是本次请求的请求方式 get / post / put / ...
// 第二个参数是本次请求的 url
// 第三个参数是本次请求是否异步，默认 true 表示异步，false 表示同步
// xhr.open('请求方式', '请求地址', 是否异步)
3.发送请求数据
xhr.send();
4.监听后台是否返回数据
xhr.onreadyStateChange = function () {
// 每次 readyState 改变的时候都会触发该事件
// 我们就在这里判断 readyState 的值是不是到 4
// 并且 http 的状态码是不是 200 ~ 299
if (xhr.status == 200 && xhr.readyState == 4) {
// 这里表示验证通过
// 我们就可以获取服务端给我们响应的内容了
}
}
/*ajax 状态码
ajax 状态码 - xhr.readyState
是用来表示一个 ajax 请求的全部过程中的某一个状态
readyState === 0： 表示未初始化完成，也就是 open 方法还没有执行
readyState === 1： 表示配置信息已经完成，也就是执行完 open 之后
readyState === 2： 表示 send 方法已经执行完成
readyState === 3： 表示正在解析响应内容
readyState === 4： 表示响应内容已经解析完毕，可以在客户端使用了
这个时候我们就会发现，当一个 ajax 请求的全部过程中，只有当 readyState === 4 的时候，我们才可以正常使用服务端给我们的数据
所以，配合 http 状态码为 200 ~ 299
一个 ajax 对象中有一个成员叫做 xhr.status
这个成员就是记录本次请求的 http 状态码的
两个条件都满足的时候，才是本次请求正常完成
readyStateChange
在 ajax 对象中有一个事件，叫做 readyStateChange 事件
这个事件是专门用来监听 ajax 对象的readyState 值改变的的行为
也就是说只要readyState 的值发生变化了，那么就会触发该事件
所以我们就在这个事件中来监听 ajax 的readyState 是不是到 4 了*/
上述完整代码
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返回出去
}
};
}
测试是不是能够调用，输出参数试一下喽
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<script src="../js文件/ajax.js">script>
<script>
//https://api.apiopen.top/getJoke?page=1&count=2&type%20video
//实时段子地址
var url = "https://api.apiopen.top/getJoke?page=1&count=2&type=video";
getAjax(url,function(xhr){
//将json对象转化为对象
/* JSON.parse()是Javascript中一个常用的 JSON 转换方法，JSON.parse()可以把JSON规则的字符串转换为JSONObject，JSON.parse()很方便，并且几乎支持所有浏览器 */
var dataobj = JSON.parse(xhr.response);
console.log(dataobj);
});
script>
body>
html>
为了方便使用，我们把要传递的对象拼接成为这样一个字符串
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;
}
}
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<script src="../js文件/ajax.js">script>
<script>
var url = "https://api.apiopen.top/getJoke";
var data = {
page:1,
count:9,
type:"vidio"
}
getAjax(url,data,function(xhr){
var dataobj = JSON.parse(xhr.response);
console.log(dataobj);
});
script>
body>
html>
三、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" }
3、JSON对象 转化为 JSON数组
let jsonObj = {
'name':'coco', 'age':18,'sex':'female'};
function objToArray(array) {
var arr = [];
for (var i in array) {
var o={
};
o[i]=array[i];
arr.push(o);
}
return arr;
}
let jsonArr = objToArray(jsonObj);
console.log(jsonArr );
4、JSON数组 转化为 JSON对象
var arr = ['coco', 18, 'female'];
var json= {
};
for (var i = 0; i < arr.length; i++) {
json["属性" + i] = arr[i];
}
let jsonObj= JSON.stringify(json);
console.log(jsonObj);
