Ajax-基础-02

Posted caoqh

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax-基础-02相关的知识,希望对你有一定的参考价值。

二.JSON

1. 什么是json

json: javascript  object  notationjs对象符号),其是一种数据交换格式xml也是数据交换格式,json对比xml的生成和处理要更加方便。

因此在许多领域,json正逐步取代xml的使用。

 技术图片

天气预报接口数据需要通过一定的格式组织并提供出来,该数据格式最好还是各个语言都可以识别的,因此xmljson就被应用上了。

 技术图片

2. json的使用

2.1 javascript里边json体现

jsonjavascript里边就是字面量对象

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

2.2 通过php生成json信息

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

 技术图片

 

 技术图片

2.3 php处理json信息

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

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

 技术图片 

2.4  javascript接收处理json信息

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

 技术图片

3. json改造ajax无刷新分页

 技术图片

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

那么我们的数据就可以通过json格式传递回来(之前是html标签格式)

 技术图片

技术图片

 

技术图片

 

 

 

json使用的好处:

ajax的使用是对 带宽、用户等待时间、服务器资源 有节省

json的使用是在ajax的基础上对 带宽、用户等待时间、服务器资源 的进一步去节省。

无刷新表单信息提交

1. 收集表单信息

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

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

技术图片

 

 

 技术图片

 

 总结:

  1. json数据交换格式

php里边:json_encode()  json_decode();

javascript里边:eval()处理接收到json字符串

  1. json改造无刷新分页
  2. 利用FormData实现表单信息快速收集

 技术图片

 

 技术图片

 

 技术图片

 

 

2. ajax实现附件上传

<form  enctype=”multipart/form-data”>

<input  type=”file”>

服务器端:$_FILES接收附件信息(name/error/size/type/tmp_name)

move_uploaded_file(临时附件,真实附件路径名);

 

 

收集附件信息:

dom方式只可以收集普通的表单域信息,并且浏览器由于安全方面的限制也禁止通过javascript语言操作本地文件。

可以利用FormData实现附件信息的收集,普通表单域  上传文件域 均可以收集。

 

 

 

 

2.1 使用FormData注意:

① 每个表单域必须有name属性

② form标签里边无需设置enctype=”multipart/form-data”属性(即时有上传域)

③ ajax传递FormData的数据不需要设置setRequestHeader()函数

3. 上传大附件进度条设置

3.1 php.ini开放大附件上传限制

 技术图片

 

技术图片

 

 

 技术图片

 

 

 技术图片

 

 技术图片

 

 技术图片

 

 技术图片

. ajax聊天室

1. 分析

 技术图片

2. 及时显示聊天内容

CREATE TABLE `message` (

  `id` int(11) NOT NULL AUTO_INCREMENT,

  `msg` text,

  `sender` varchar(32) NOT NULL DEFAULT ‘‘,

  `receiver` varchar(32) NOT NULL DEFAULT ‘‘,

  `color` char(7) NOT NULL DEFAULT ‘‘,

  `biaoqing` varchar(32) NOT NULL DEFAULT ‘‘,

  `add_time` datetime NOT NULL DEFAULT ‘0000-00-00 00:00:00‘,

  PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8

 技术图片

技术图片

 

 

3. 发表聊天信息

 技术图片

 

 

4. 
聊天室优化

① 设置滚动条,避免信息溢出

② 显示聊天内容的时候,滚动条在最下边

divnode.scrollHeight;  获得div元素高度(包括滚动条)

divnode.scrollTop;  设置滚动条卷起高度

 技术图片

 

 技术图片

 

 

 

 

 

五. 天气预报设置

ajax由于浏览器的限制,禁止跨域请求

 

 技术图片

 

解决:利用php代理,跨域请求天气信息

 

 

1. 天气信息获取注意事项:

不同地区需要显示该地区对应的天气信息

获得访问用户的ip地址信息,通过ip地址获得其对应的城市信息

城市信息获得出来还要获得城市的编码信息。

ip------->城市-------》编码

 

www.tianqi.com网站已经把 ip/城市/编码 的关系都给处理好了,可以直接调用获得城市对应的天气信息。

 

 技术图片

 

 

总结:

  1. ajax+FormData实现附件上传
  2. 大附件上传进度条设置

ajax对象.upload.onprogress事件,该事件每间隔0.1s就执行一次,执行过程中可以通过事件对象感知附件的总大小、已经上传大小。

  1. ajax聊天室
  2. 天气预报显示

ajax由于浏览器限制禁止跨域请求(利用php代理解决)

 

作业:

  1. json改造无刷新分页效果

 

以上是关于Ajax-基础-02的主要内容,如果未能解决你的问题,请参考以下文章

Ajax编程基础

Ajax全面基础学习

AJAX基础

AJAX基础

JQueryJQuery基础

AJAX基础教程