一．昨天内容回顾

1. 创建ajax对象

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

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

2. 常用属性和方法

属性：responseText/responseXML   readyState  onreadystatechange

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

3. get请求和post请求

get请求：

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

post请求：

传递参数send(参数)

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

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

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

4. 异步、同步请求

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

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

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

 

5. 无刷新分页效果实现

① 传统分页效果实现

② ajax去封装传统分页

6. xml接收和处理

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

ajax属性 responseXML 接收xml信息

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

7. 缓存处理

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

② 给动态程序页面设置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字符串)  

2. json改造ajax无刷新分页

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

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

 

3. 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负责把附件传递给服务器

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

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

100ms就执行一次

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

3. 聊天室

ajax使用

4. 天气预报显示使用

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

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

 

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有