AJax技术

Json学习笔记,json学习

字号+ 作者:H5之家 来源:H5之家 2017-01-05 14:00 我要评论( )

Json学习笔记,json学习 一.昨天内容回顾 创建ajax对象 a) 主流浏览器 new XMLHttpRequest(); b) IE浏览器 new ActiveXObject

Json学习笔记,json学习 一.昨天内容回顾 创建ajax对象 a) 主流浏览器 new XMLHttpRequest(); b) IE浏览器 new ActiveXObject...

Json学习笔记,json学习 一.昨天内容回顾

  • 创建ajax对象
  • a) 主流浏览器 new XMLHttpRequest();

    b) IE浏览器 new ActiveXObject(“Msxml2.XMLHTTP.6.0”);

  • 常用属性和方法
  • 属性:responseText/responseXML readyState onreadystatechange

    方法:open(方式,url地址,true/false) send() setRequestHeader()

  • get请求和post请求
  • get请求:

    传递参数 url地址后边请求字符串、中文/特殊符号需要编码处理

    post请求:

    传递参数send(参数)

    调用setRequestHeader()把数据组织为xml格式

    中文不需要编码,特殊符号需要编码

    同时可以传递get参数信息,使用$_GET接收

  • 异步、同步请求
  • open(方式,url地址,[异步true]/同步false)

    异步:同一时间允许执行多个进程

    同步:同一时间允许执行一个进程

  • 无刷新分页效果实现
  • ① 传统分页效果实现

    ② ajax去封装传统分页

  • xml接收和处理
  • ajax+javascript合作实现xml的接收和处理

    ajax属性 responseXML 接收xml信息

    文档对象 和 普通元素节点对象 都可以调用getElementByTagName()方法

  • 缓存处理
  • ① 给请求的地址设置随机数

    ② 给动态程序页面设置header头,禁止浏览器缓存

    二.JSON 1. 什么是json

    json: javascript object notation(javascript对象符号)

    其是我们之前学过js的“字面量对象”

    其是一种数据交换格式(之前的xml也是数据交换格式)。

    img

    天气官网服务器对外提供的“门户网站”需要供两部分用户访问:普通大众、企业网站

    其中的企业网站并不会对我们天气网站产生广告效益,其只会白白浪费我们许多流量。

    这样我们需要做优化处理。

    img

    为了方便企业网站使用天气信息,把天气信息专门通过一个”接口”给提供出来,该接口的信息专门是天气信息,数据量可以控制。

    通过接口给企业网站提供天气信息,需要考虑各个企业网站语言如何方便、快速地接收该接收并解析该接口信息。这样接口信息提供出来就需要组织为特定的格式,该格式可以是xml或json。

    接口专门负责提供天气预报信息:

    img

    ?code=js&day=0&city=&dfc=1&charset=utf-8

    之前企业网站需要获得天气信息,通常会把天气预报官网首页的全部信息都给请求回来,但是只是在里边获得很少的天气信息,这样做对带宽、天气官网的服务器、用户等待时间的消耗比较严重。

    这个事件做优化处理:天气预报网站服务器把天气信息做成一个数据接口提供出来,好处是企业网站每次请求天气信息的带宽变小、请求速度加快,天气预报网站服务器的负载得到控制。

    为了各种语言(java/php/.net/javascript)的网站用户方便使用该数据接口,其接口的数据格式最好是大家都可以识别的,因此json/xml就被应用上了。

    json的生成和处理要比xml更加方便,因此在许多领域json正逐步取代xml的使用。

    2. json的使用 2.1 javascript里边json体现

    json在javascript里边就是字面量对象

    var obj = {名称:值,名称:值,名称:function(){}}

    2.2 通过php生成json信息

    json_encode(数组/对象)------------>生成json信息

    json_encode(关联数组)---->json对象

    json_encode(索引数组)---->js数组

    json_encode(索引关联数组)---->json对象

    json_encode(对象)---->json对象

    各数组/对象生成的json信息如下图:

    img

    2.**3 php处理json信息**

    接收到Json信息之后,要解析信息,就要反编码处理:

    json_decode(json信息,boolean); 反编码json信息

    对json字符串信息进行反编码,变为当前语言可以识别的信息。

    json_decode(json字符串,true)--->array

    json_decode(json字符串,[false])--->object

    img

    纯json字符串反编码操作注意:单引号,并且要加true!

    img

    2.4 javascript接收处理json信息

    ajax获得接口信息,javascript本身处理json信息

    通过eval()把接收的json字符串变成真实的对象信息

    如何把一个js的字符串变为object对象:

    img

    ajax和javascript合作实现json信息接收处理:使用eval函数

    img

    服务器端json接口数据:

    img

    3. json改造ajax无刷新分页

    img

    img

    img

    img

    img

    ① ajax的每次请求都要从服务器获得三部分信息,对 带宽、服务器资源、用户等待时间 等资源都要占据三份,我们要做优化:把不发生变化的css样式、html标签 放到客户端手动生成,从而减轻服务器端的工作、减轻带宽浪费。

    ② 每次回来的分页数据是“整个一个大的部分”,数据的解析、拆分非常不灵活

    此时服务器端数据可以通过json格式传递回来(之前是html标签格式)

    img

    二维数组生成json信息的效果:

    img

    在服务器端把数据组织为json格式提供出来,在客户端解析json并把信息组织到html标签里边用于显示:

    img

    在设置遍历数据库信息的时候可以加上标签到分页上。Nmpk在页面上。

    二.无刷新表单信息提交

    表单:登录系统、注册会员都有表单

    传统的form表单页面实现submit提交的时候,浏览器会根据form标签的action属性值做页面跳转。

    页面经常跳转会降低用户体验效果

    有的网站有需求:登录或注册表单提交的时候,实现无刷新方式信息的传送。以便提高用户体验

    传统方式dom+ajax无刷新收集、提交form表单信息:

    img

    页面没有刷新,就把数据提交给服务器:

    img

    1. 收集表单信息

    传统方式收集表单信息,需要写许多重复的代码(document.getElementById)和拼装长串的请求信息,非常不方便开发、维护。

    那么我们要使用新技术FormData实现数据收集。

    利用新技术FormData表单数据对象,可以实现快速收集表单信息。

    FormData是html5的新技术,在主流浏览器都可以正常使用。

    利用FormData收集数据:(evt和return false都可以阻止浏览器表单提交动作)

    img

    实现效果:

    img

    总结:

  • json数据交换格式
  • php生成/解析json:

    json_encode()

    json_decode(json字符串,true/[false])

    JS解析json:

    eval(“var 名称=”+json字符串)

  • json改造ajax无刷新分页
  • 之前ajax分页:服务器通过html标签组织一个“整个的分页”数据回来,该数据不能灵活拆分,内部还有许多固定的内容(html标签和css样式)

    json改造:只从服务器获得数据信息、信息是通过json对象回来的其解析和处理非常灵活。

  • FormData快速收集表单信息
  • var fd = new FormData(form标签的元素节点对象)

    2. ajax无刷新附件上传

    dom可以获取普通表单域信息,并可以直接提交给服务器

    javascript实现附件信息抓取,之前浏览器技术由于有安全方面的限制,也不允许通过js抓取附件信息。

    FormData可以实现普通表单域 和 上传文件域 信息的收集。

    附件上传相关技术点:

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • Ajax 学习总结

      Ajax 学习总结

      2017-01-05 14:00

    • Ajax学习感悟

      Ajax学习感悟

      2017-01-05 13:03

    • 学习.net与ajax的详细案例总结

      学习.net与ajax的详细案例总结

      2017-01-05 13:02

    •  ajax学习札记(五)

      ajax学习札记(五)

      2016-12-26 15:02

    网友点评