js通过AJAX绑定数据四部曲

var data;
//1、创建AJAX实例
var xhr = new XMLHttpRequest();
//2、打开一个路径:请求方式，请求路径，同异步（false：同步；true：异步）
xhr.open("get","path",false);
//3、监听状态
xhr.onreadystatechange = function(){//如果状态是4，并且xhr.status状态码是以2开头的，表示数据已经请求成if(xhr.readyState===4&&/^2\d{2}/.test(xhr.status)){data = xhr.responseText;}
}
//4、发送请求
xhr.send();

通过AJAX获取的数据是JSON格式的字符串，需要通过JSON.parse()方法将JSON字符串转换为JSON对象。

json是一种数据格式，不是数据类型
json格式的对象属性名必须使用双引号括起来，不能用单引号括起来,因为通过JSON.parse将该字符串转换为对象时会报错

var obj = {"a":1};//json格式的对象
var str = '{"a":1}';//json格式的字符串
//----------------------//
var obj = "{'a':1}";
console.log(JSON.parse(obj));//Uncaught SyntaxError: Unexpected token ' in JSON at position 1 at JSON.parse (<anonymous>)

JSON是window下的一个属性名，它的属性值是一个对象。存在两个方法
- JSON.parse()将json格式的字符串转化为json格式的对象
- JSON.stringify()将json格式的对象(普通对象也可以)转换为json格式的字符串

注意： 利用JSON的这两个方法可以实现深克隆，但是这种克隆存在缺陷，因为它只能克隆比较简单的对象，当对象的属性值是函数或是undefined时不能进行克隆

var obj = {a:1,b:{c:2}};
var newObj = {};
// 利用循环克隆对象是浅克隆，因为在改变一个一个对象的值时另一个对象的值可能修改
for(var key in obj){newObj[key] = obj[key];
}
console.log(newObj);//{a:1,b:{c:2}}
obj.b.c = 100;
console.log(newObj);//{a:1,b:{c:100}}
// 对对象进行深克隆：当改变原有对象的值时，不会影响新克隆的对象；新对象中的空间地址和原来指向不同的地址空间
var newObj = JSON.parse(JSON.stringify(obj));
var obj9 = {a:1,b:undefined,c:null,d:function(){}};
var obj8 = JSON.parse(JSON.stringify(obj9));
console.log(obj8);//{a: 1, c: null}

js通过AJAX绑定数据四部曲相关推荐

ajax绑值,vue.js使用ajax绑定数据之post方法
[HTML] 纯文本查看复制代码发送AJAX请求 window.οnlοad=function(){ new Vue({ el:'#itany', data:{ user:{ name:'alic ...
Python调用，爬虫JS逆向——ajax类型数据，数据加密获取步骤和方法（二）
Python调用,爬虫JS逆向--动态数据 JS逆向-ajax加密数据加密数据是无法通过在后台找到接口进行请求来获取数据目标网站:https://jzsc.mohurd.gov.cn/data/c ...
原生js实现双向绑定数据，实现前端提交到后台
问题项目开发遇到一个问题,就是在提交到后台的时候遇到一个请求甲方数据,来实现在添加数据的时候,将请求到甲方的数据展示在前端页面,让甲方看到他到底添加了哪些数据.因此,使用到了双向绑定,来显示弹框中我 ...
Chart.js使用及ajax获取数据
图表插件Chart.js使用插件简介安装插件简介 chart.js是一个优秀的开源图表处理插件,内置条形,折现,雷达,时间刻度等等图表渲染. 安装 chart.js官网. 我这里使用2019年3 ...
ajax (阿贾克斯)----------- js 向后端索要数据的方式(技术)
ajax + js 向后端索要数据的方式(技术) 基本步骤 1. 创建ajax 对象 const xhr = new XMLHttpRequest() 2. 配置本次的请求信息 xhr.open(请 ...
D3.js系列——初步使用、选择元素与绑定数据
D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可 ...
php js获取表单内容,jquery form表单获取内容以及绑定数据_javascript技巧
在日常开发的过程中,难免会用到form表单,我们需要获取表单的数据保存到数据库,或者拿到后台的一串json数据,要将数据绑定到form表单上,这里我写了一个基于jquery的,formHelp插件,使 ...
JS实现的ajax发送数据重复
最近在做一个网页聊天室,但是在用ajax实现异步处理的时候,向服务器发送数据发送了两次,导致,我说一句会有两句回复. 先来看一下代码,问题主要还是出现在前端: <form id="da ...
d3.js中选择元素和绑定数据
回顾一下如何选择元素在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.selectAll():是选择指定元素的全部这两个函数返回的结果称为选择集. ...

js通过AJAX绑定数据四部曲

js通过AJAX绑定数据四部曲相关推荐

最新文章

热门文章