0302作业+Json与Ajax的相关内容+10期线上班

关于Json

-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>

朱老师格式已修改