-Json是JavaScrpt Object Notation的简写——对象表示法-Json是一种轻量级的用于数据交换与存储的格式化的字符串
Json支持的三种数据类型1,简单值:-数值,字符串,布尔值,null,但是没有undefined2,数组:-由[]包裹3,对象:-由{}包裹
PHP对json处理的函数1,json_encode-将PHP解码成json格式的字符串2,json_decode-将json格式的字符串译码成php对象(第二个参数false)或关联数组(第二个参数true)
JSd对Json数据的序列化用法1,JSON.stringify()-将JS对象解码成json字符串2,JSON.parse()-将Json字符串译码成JS对象
JS与JSON的关联用法-JSON主要是数据的储存和传输,在JS中,可以将JS对象解码成JSON字符串进行传输,服务器接收到请求数据,并处理后,会以JSON的形式返回,这时,我们再将json进行译码,并运用JS对象的属性与方法,将返回的信息渲染到页面中
细说AJAX-AJAX为异步的JavaScript与XML-同步是必须等待上一个请求被处理后,才能进行下一个程序-异步是在上一个程序处理的同时,可以进行后面程序的操作AJAX正式异步的形式,可以用于快速创建动态的网页,并且不用将原网页重新加载。大大的提升了用户体验
在JS中AJAX的操作基本步骤关于GET请求1,创建XHR对象-var xhr = new XMLHttpRequest;2,监听请求回调-xhr.onreadystatechange = function(){①readyState状态和status进行判断}3,设置请求参数-xhr.open(请求类型,请求地址,true);4,发送请求-xhr.send(null);关于post请求1,创建XHR对象-var xhr = new XMLHttpRequest;2,监听请求回调-xhr.onreadystatechange = function(){①readyState状态和status进行判断}3,设置请求参数-xhr.open(请求类型,请求地址,true);4,创建请求头-xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')5,准备请求数据var data = {...}6,发送请求-xhr.send(data);以下为AJAX请求实例及JS与JSON的运用
<script> // 用Ajax进行异步处理,用户与服务器的请求 // 监听表单,让表单数据与服务器请求进行交互 var form = document.querySelector("form"); form.submit.addEventListener('click', check, false); function check() { // 1,创建XHR对象 var xhr = new XMLHttpRequest; // 2,监听请求回调 xhr.addEventListener('readystatechange', response, false); // 3,设置请求参数 xhr.open('POST', 'form.php', true); // 4,设置请求头 xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); // 5,准备请求数据 var data = 'email=' + form.email.value + '&' + 'password=' + form.password.value; // 4,发送请求 xhr.send(data); } function response(ev) { var span = document.querySelector('div').firstElementChild; if (ev.target.readyState === 4) { var user = JSON.parse(ev.target.responseText); switch (user.tips) { case 1: span.innerHTML = user.message + ',正在跳转中... ...'; span.classList.add('success'); document.cookie = 'email=' + form.email.value; setTimeout('location.href="test.php"', 2000); break; case 0: span.innerHTML = user.message + ',请重新输入'; span.classList.add('error'); form.email.focus(); form.email.addEventListener('input', function () { span.innerHTML = null;}, false) break; default: span.innerHTML = '未知错误'; } } }</script>朱老师格式已修改