一.昨天内容回顾

  1. 创建ajax对象

a) 主流浏览器  new  XMLHttpRequest();

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

  1. 常用属性和方法

属性:responseText/responseXML   readyState  onreadystatechange

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

  1. get请求和post请求

get请求:

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

post请求:

传递参数send(参数)

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

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

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

  1. 异步、同步请求

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

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

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

  1. 无刷新分页效果实现

① 传统分页效果实现

② ajax去封装传统分页

  1. xml接收和处理

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

ajax属性 responseXML 接收xml信息

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

  1. 缓存处理

① 给请求的地址设置随机数

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

JSON

1. 什么是json

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

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

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

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

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

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

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

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

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

http://php.weather.sina.com.cn/iframe/index/w_cl.php?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信息如下图:

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

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

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

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

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

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

   
 

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

2.4 javascript接收处理json信息

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

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

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

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

服务器端json接口数据:

3. json改造ajax无刷新分页

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

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

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

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

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

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

二.无刷新表单信息提交

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

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

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

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

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

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

1. 收集表单信息

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

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

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

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

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

实现效果:

总结:

  1. json数据交换格式

php生成/解析json:

json_encode()

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

JS解析json:

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

  1. json改造ajax无刷新分页

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

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

  1. FormData快速收集表单信息

var fd = new FormData(form标签的元素节点对象)

2. ajax无刷新附件上传

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

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

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

附件上传相关技术点:

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

​ error:

​ 0---->ok

​ 1---->大小超出php.ini限制

​ 2---->大小超出MAX_FILE_SIZE表单域限制

​ 3---->附件只上传了一部分

​ 4---->没有上传附件

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

收集附件信息:

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

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

FormData收集到普通表单域 和 上传文件域信息:

客户端具体实现:

服务器端代码:

2.1 使用FormData注意:

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

② 在form标签里边无需设置enctype=”multipart/form-data”属性(即使有上传文件域也不需要设置)

③ ajax通过post方式传递FormData的数据不需要设置setRequestHeader()方

④ 普通表单域的特殊符号无需编码

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

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

3.2 进度条具体设置

onprogress事件每间隔100ms左右就执行一次:

onprogress感知附件上传情况:

进度条客户端实现:

. ajax聊天室

1. 分析

买火车票,在电脑上下单,在手机上支付宝支付,支付成功后,电脑上也显示支付成功。

利用”反向推技术”。 电脑浏览器不间断向服务器发起请求判断车票是否有付款。

如果手机付款成功,则电脑上会立即显示订单支付成功的状态。

反向推技术就是轮询技术,在客户端每间隔一定时间就去完成一定的任务。

2. 及时显示聊天消息

每间隔2s就获取一次聊天消息,但是不要获取重复的数据。

解决:把已经获取消息的最大id值 回传给服务器端,并做“对比”查询。

给消息表写入数据:

服务器端获取最新的聊天消息:

客户端ajax获取并显示最新聊天消息:

3. 发表聊天信息

客户端代码:

服务器端代码:

4. 聊天室优化

4.1 设置滚动条,避免信息溢出(高度height/溢出属性overflow)

效果:

4.2 追加新的聊天内容的时候,滚动条始终在最下边显示

div.scrollHeight   获得div高度(包括滚动高度)

div.scrollTop = div.scrollHeight      设置滚动条卷起的高度

四.天气预报设置

讲解内容:

① ajax不能跨域访问(可以利用php代码)

② 天气预报显示原理

浏览器由于安全方面的问题,禁止ajax跨域请求其他网站的数据。

解决:利用本域php代理间接获得其他网站的数据。

** **

天气信息获取注意事项****

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

ip地址------->城市------->城市编码

① 通过ip地址 获得 城市信息

http://ip.taobao.com/service/getIpInfo.php?ip=9.9.9.9

② 通过城市 获得 城市编码

③ 通过城市编码 获得天气信息

http://www.weather.com.cn/adat/sk/城市编码.html

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

总结:

  1. ajax实现附件上传

FormData收集上传的附件信息

ajax负责把附件传递给服务器

  1. 大附件上传进度条显示

ajax对象-->upload成员-->onprogress事件

100ms就执行一次

并通过事件对象感知附件上传情况

  1. 聊天室

ajax使用

  1. 天气预报显示使用

ajax是不能跨域请求的,可以利用php代理实现

天气预报原理(ip--->城市--->城市编码)

Json学习笔记的更多相关文章

  1. JSON 学习笔记

    学习使用json过程随笔: json数组格式 var employees = [ { "firstName":"Bill" , "lastName&q ...

  2. JSON学习笔记一 —— 一些与移动端交互产生JSON数据的方法

    /**     * 测试的返回JSon方法,正式的不会用     * @author MrHandler     * @param reqCode     * @param joinStr     * ...

  3. Newtonsoft.Json学习笔记

    Newtonsoft.Json,一款.NET中开源的Json序列化和反序列化类库(下载地址http://json.codeplex.com/). 下面是Json序列化和反序列化的简单封装: /// & ...

  4. Ajax+JSON学习笔记(二)

    来源:http://www.imooc.com/learn/250 readyState属性 0:请求未初始化,open还没有调用 1:服务器连接已建立,open已经调用了 2:请求已接受,也就是接收 ...

  5. JSON学习笔记-5

    JSON.parse() 1.从服务器接受数据进行解析(一般是字符串) 2.解析前要确保你的数据是标准的 JSON 格式,否则会解析出错.可以使用线工具检测:https://c.runoob.com/ ...

  6. JSON学习笔记-4

    JSON 数组 1.访问数组 1.一次访问一个嵌套内容值var myObj, x; myObj = { "name":"网站", , "sites&q ...

  7. JSON学习笔记-3

    JSON 对象 1.对象语法 JSON 对象使用在大括号({})中书写. 对象可以包含多个 key/value(键/值)对. key 必须是字符串,value 可以是合法的 JSON 数据类型(字符串 ...

  8. JSON学习笔记-2

    JSON的语法 1.JSON 数据的书写格式是:名称/值对. "name" : "我是一个菜鸟" 等价于这条 JavaScript 语句: name = &qu ...

  9. JSON学习笔记-1

    1.什么是JSON? JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式.它基于 ECMAScript (欧洲计算机协会制定的js规范)的一 ...

随机推荐

  1. Ubuntu16.04 LTS下apt安装WireShark

    Ubuntu16.04 LTS下apt安装WireShark 安装与配置 首先通过apt安装WireShark: $ sudo apt install wireshark 会同时安装许多的依赖包,其中 ...

  2. [Top-Down Approach] Chatper 3 Notes

    这里留下空白,提醒自己,第一章第二章尚待整理回顾. 此处缺了3.6/3.7两节拥塞控制的内容

  3. 一段可以使用的 hibernate获得对象->action存入List->jsp页面用<s:iterator>迭代的代码

    SelectAction.java @SuppressWarnings("serial") @Component("selectAction") @Scope( ...

  4. 在CS代码页获取input输入框内肉----.net学习点滴

    想在后台cs页面得到前台页面aspx中html控件input输入的值.通过访问input输入框的name属性值获取. 解决方法如下: 1.用Request["user"].toSt ...

  5. Drupal8开发教程:模块开发——创建新页面

    之前我们已经通过<Drupal8开发教程:认识.info.yml文件>对模块的YAML文件有了了解,今天我们来看如何通过模块开发的方式添加一个新的页面. 在 Drupal 7 中,通过模块 ...

  6. Qt 日志宏

    随便写了一个日志帮助的宏,既可以如同qDebug()一般在调试时输出信息,也可以在输出文本文件 #ifndef LOG_H #define LOG_H #include <QDir> #i ...

  7. CM 0313 Review

    中午无聊看了贴吧,看到有人截图说CM有爱的故事.看到SE03CH13,觉得图有点印象,似乎我很是记得这一集.于是刚才看了一下,嗯,果然记得.是我头一次翻译美剧的时候,7年前. 剧情还可以吧,剧中的Ji ...

  8. 简单浮点数除法模拟-hdu-4493-Tutor

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4493 题目意思: 给小数点后两位的12个月的工资,求出平均工资,输出离小数点后第二位最近的两位小数, ...

  9. docker~save与load的使用

    回到目录 对于没有私有仓库来说,将本地镜像放到其它服务器上执行时,我们可以使用save和load方法,前者用来把镜像保存一个tar文件,后台从一个tar文件恢复成一个镜像,这个功能对于我们开发者来说还 ...

  10. Springboot学习记录1--概念介绍以及环境搭建

    摘要:springboot学习记录,环境搭建: 官方文档地址:https://docs.spring.io/spring-boot/docs/current-SNAPSHOT/reference/ht ...