博客列表 >0302作业+Json与Ajax的相关内容+10期线上班

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

江川林
江川林原创
2020年03月16日 20:56:30685浏览
关于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>

朱老师格式已修改

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议