Javascript之 Ajax 与 JSON
AJAX 概念
AJAX 全名是“Async JavaScript and XML”,直译为“异步加载 JavaScript 和 XML”,
它的内容为“JS 发请求和收响应”。AJAX里的“X”就指代XML。但由于时代变迁,JSON逐渐取代了XML。
1. AJAX 是浏览器的功能
浏览器可以发送请求,接收响应,浏览器在 window 上加了一个 XMLHttpRequest 函数,
用这个构造函数(类)可以构造一个对象 Node.js,JS 通过它实现发送请求,接收响应
2. 对 AJAX 的理解
AJAX 的内容不影响着后端代码的书写,是前端里面的操作。
AJAX 是把写在 HTML 中有相关路径内容,转移到 JS 里,HTML 里面做一个标记或者不做,当有请求时再给它显示出来到 HTML。
AJAX 可以做到轻量级的请求。
封装AJAX
第一步,创建 XMLHttpRequest对象
function ajax(method, url, callback, data, flag){ var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest();//兼容IE }else{ xhr = new ActiveXObject('Microsoft.XMLHttp'); } }
第二步
xhr.onreadystatechange=function(){ if(xhr.readyState==4){ //监听状态 if(xhr.status==200){ //监听状态码 callback(xhr.responseText); }else{ console.log('error'); } } }
第三步
method = method.toUpperCase(); if (method == 'GET') { var date=new Date(), timer=date.getTime(); //date.getTime()返回 距1970年1月1日的 毫秒数 //获取到 时间戳 xhr.open(method,url+'?'+data+'&timer'+timer,flag); //打开 xhr.send(); //发送数据 }else if (method='POST') { xhr.open(url,method,flag); xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); xhr.send(data); }
JSON 概念
JSON 是一门语言,跟 HTML、CSS、XML、JS 一样,是一门独立的语言
JSON 不是编程语言,是标记语言,跟 HTML、XML、Markdown 一样,用来展示数据
JSON 的写法继承于JS中的对象的写法,可以说是一种有严格书写规范的用于传输数据的
对象。
JSON 语法
JSON 支持的数据类型
- string -- 只支持双引号,不支持单引号和无引号
- number -- 支持科学计数法
- bool -- true 和 false
- null -- 没有 undefined
- object
- array
- // 就这六种,注意跟 JS 的七种数据类型区别开来
不支持函数,不支持变量,也不支持引用
JSON 的使用
五个步骤:
- 创建 HttpRequest 对象(全称是 XMLHttpRequest)
- 调用对象的 open 方法
- 监听对象的 onreadystatechange 事件
- 调用对象的 send 方法(发送请求)
- 查验收到的信息 status
window.JSON
1. JSON.parse
将符合 JSON 语法的字符串转换成 JS 对应类型的数据,JSON 字符串 => JS 数据,由于 JSON 只有六种类型,
所以转成的数据也只有 6 种,如果不符合 JSON 语法,则直接抛出一个 Error 对象,一般用 try catch 捕获错误。
2. JSON.stringify
是 JSON.prase 的逆运算,JS 数据 => JSON 字符串,由于 JS 的数据类型比 JSON 多,所以不一定能成功,如果失败,就抛出一个 Error 对象。