问题引入

在学习Ajax技术之前，我们先回顾一下之前，客户端和服务器是如何通讯的呢？我们客户端和服务器端的通讯往往是在浏览器的地址栏输入一个地址后或者点击一个a链接之后，浏览器帮我们发送http请求，去找服务器要对应的数据（html文本）；然后服务器接受请求，返回对应的数据，最后浏览器在将获取的数据在页面显示（页面渲染html–显示界面）。但是往往这个过程是会导致整个页面的刷新（网速比较卡、等待时间很长），相对来说用户体验不怎么友好。

这样的无跳转刷新，在有些时候是十分必要，例如 当用户在优酷观看VIP试看视频的过程中，试看完毕后，突然需要登录账号完成一些操作，而如果登录验证的过程必须跳转到服务器中才能完成，那么页面就会刷新，等跳转回来 又是长时间的广告，还要手动定位到之前播放的位置，给用户的访问带来极大的不便 ，因此在这里，一把会做一个弹框，做无跳转的登录。或者有的时候在看视频的时候，需要进行留言处理，也是需要进行无刷新完成的。

留言

网易云音乐

总之，很多时候用户只想更新页面的局部内容，而不是刷新整个页面，那我们是否可以在页面不刷新的情况下，还可以和服务器进行通讯，获取数据呢？

那什么是Ajax技术呢？

口语化定义-面试-日常用语

Ajax就是一门在浏览器不刷新的情况下，还可以和服务器进行通讯，数据传输的技术（一般数据传输的格式满足两种：1. xml 相对比较少 2. json 格式很多）。

注意1：客户端和服务器端进行通信的时候，其本质只能用文本做信息的传递，只是这个文本满足一定的人为规定的数据的格式，我们才有了XML传递或者json传递，以及jsonp传递。

注意2：Ajax技术是数据浏览器的技术，不同的浏览器对其有不同的实现方式(w3c IE低版本678)。js也是属于浏览器的技术（浏览器一个js解析环境）。浏览器也开放了一定的接口供js去操作Ajax。

官方定义

ajax全称 Async Javascript And XML（异步的JavaScript和XML），它是不指代某个特定的技术，主要有如下的技术一起组成：

Async ：指AJAX能够创建异步进程的请求

Javascript：AJAX实现的主体，就是用JS来实现的AJAX，js里面存在一个XMLHttpRequest构造函数

XML：一种数据格式，用户AJAX请求中客户端和服务器交换数据，除此以外还有JSON

现在所有局部刷新、无刷新操作 都叫”ajax”，它是使得JS能够同浏览器一样请求服务器，并且获取返回结果。

论文：（最原始的定义）

ajax发展历史

AJAX诞生于1998年，同期的互联网技术还有XML和CSS2.0，允许客户端发送请求到服务器的第一个应用来自于微软的Outlook Web Access开发小组，尔后称为IE4.0的一部分，并在IE5中开始运用。

AJAX真正被广泛认识是在2005年，伴随着一些大型互联网公司的产品中开始出现ajax，例如谷歌的邮箱产品Gmail 内置了一个Gtalk的网页聊天工具，聊天的过程中需要反复不断的刷新数据 而又不能跳转 这就是引起了人们好奇 也使得原本不太受关注的ajax得到了人们的青睐。

Ajax常见使用场景

1. Ajax技术一般用在账户注册时候用户名和邮箱是否重复检查
2. 还可以实现一种按需加载的布局加载数据的效果，瀑布流布局，按需加载
3. 无刷新分页显示数据
4. 无刷新留言
5. 无刷新登录…..

例如：

http://reg.email.163.com/unireg/

http://36kr.com/

http://www.iterduo.com/

网易邮箱注册

滚动加载

瀑布流布局

文档：

http://www.zhangxinxu.com/wordpress/2012/03/%E5%A4%9A%E6%A0%8F%E5%88%97%E8%A1%A8%E5%8E%9F%E7%90%86%E4%B8%8B%E5%AE%9E%E7%8E%B0%E7%9A%84%E7%80%91%E5%B8%83%E6%B5%81%E5%B8%83%E5%B1%80-waterfall-layout/

下一个永远是惊喜（永远不知道下一个商品是否是最好的？）

花瓣网：http://huaban.com/all/

远古时代的无刷新技术

在没有ajax技术的时候，如何实现客户端和服务器进行无刷新的通信呢？

答：思考，如果要完成这个操作：

1. 必须要进行网络通信
2. 同时还可以接收到服务器端的响应

解决：

答：思考在前端里面那些技术是可以发送网络请求？

1. ajax可以（不使用）
2. img标签、link标签、script标签（js、执行）（都具有src 、href 属性都可以发送网络请求）
3. 网页嵌套iframe（页面放一个，显示出来，穿件隐身衣）【无刷新文件上传，如果是兼容低版本的IE做文件上传】（自行百度学习）

知道：可以使用script标签来完成网络请求？

客户端代码：

服务器端代码：

浏览器效果：

jQuery基本使用

jQuery是什么？

官网：http://jquery.com/

jQuery主要是帮我们做js代码的简化操作。

原始：

1. 获取某个元素 document.getElementById(‘div1’)
2. 获取内容 document.getElementById(‘div1’).innerHTML

通过上面的操作既麻烦、也存在兼容性问题（低版本IE和现代浏览器不兼容）

有人试想是否可以做一个工具库，可以简化操作。提出来jQuery（javascript + query）主要地方在于DOM元素的获取，自己进行操作（1. 获取dom元素的值 2. 设置css样式….）

简化：

1. 元素获取 $(‘#div1’) // 通过id获取DOM元素

2. 获取元素的值 $(‘#div1’).html() // 获取 id为div1的元素的html值

3. 设置样式 $(‘#div’).css(‘color’, ‘red’); // 设置字体验证

4. 设置样式类 $(‘#div’).addClass(‘box-red’); // 设置一个 .box-red的样式

5. 事件绑定 $(‘#btn1’).click(function(){ // 事件回调函数 });

目前主要存在三个大的版本。

1. x系列 [工具库代码有点大，做兼容]
2. x系列
3. x系列

这三个版本的使用的方式都是一样的，但是需要注意：2.x之后的版本不在兼容IE678。

为什么要使用jQuery呢？

从官网logo上的标语我们可以看到 write less, do more。 可以得知jQuery可以让我们用最少的代码完成最多的功能。

1. 提供了强大的选择器，可以快速的选取页面上的DOM元素
2. 提供了众多的方法
3. 强大的链式操作
4. 对浏览器的兼容性做了处理
5. …………

设计：less is more

选择器-内容-样式

从jQuery的字面意思理解： jQuery = javascript + Query，由此可以看出jQuery的强大之初在于其选择器，即强大的DOM节点查询。同时需要注意的是，jQuery的选择器基本和Css的选择器一样。

主要学习两个选择器

1. id选择器
2. 类选择器

id选择器

代码：

注意：这里通过 $(‘#container’) ID选择器选择DOM元素，返回值是一个对象，可以调用jQuery为对象提供的方法。

效果

类选择器

代码：

效果：

事件操作

代码：

效果

ajax入门使用

Ajax的使用，满足如下的步骤：

1. 实例化一个Ajax对象
2. 设置一个回调函数，帮我们处理后台返回的数据，当对象的一个属性readyState == 4 就可以操作数据了
3. 设置一个URL地址，并设置http的请求方式（get、post）
4. 发送请求

实操-ajax请求和响应

在页面不刷新的请求，现在给服务器进行通信，在客户端如何显示服务器返回的数据？

a. 客户端代码，发送Ajax请求

b. demo1.php后台处理请求

c. 效果: 当在客户端点击【按钮】的时候，会给服务器端发送请求，服务器的输出会作为响应返回给浏览器

实操-ajax传参

传递一定的参数，让ajax接收，然后让Ajax返回一定的信息，供客户端使用。

a. 在客户端编写一定的代码，显示服务器端返回的数据

b. demo2.php服务器端代码

c. 效果

实操-用户名校验

使用Ajax完成一个用户名是否重复的检测

a. 布置一个注册的表单，给用户名input框绑定一个失去焦点的事件，当失去焦点的时候，发送Ajax请求

效果：

b. 编写js代码，完成Ajax请求

c. demo3.php服务器端checkuser.php处理请求

效果：

Ajax之GET常见问题-面试问题

简介

Ajax常见的问题：主要是出现在IE低版本下。

1. IE的实现方式不一样（IE下存在兼容性的问题）（到时候我们不会写原生的ajax，使用jQuery提供的ajax工具方法）

1. IE下的GET提交的缓存问题（火狐 ctrl+f5）和参数中文（编码）的问题

IE6下测试XMLHttpRequest

一般在IE6下直接使用new XMLHttpRequest是不可以的，会保错，需要我们书写兼容性的代码。

网上找一个就行：

通过测试可以正常

函数文件位置：

IE6下get缓存问题

1. 引入ajax.js函数，ajax函数调用

1. demo6.php服务器代码

1. 在IE下存在一个缓存的问题，一般如果URL地址不变的情况下，IE是不会在发送http请求

一般解决方式：1. 在URL地址后面加一个随机数 2. 或者是加上一个时间戳

代码：

效果：

IE6下get中文问题

1. 中文的问题（注意：在IE6下不能得到正常的传递）

解决：对中文的字符进行编码后进行传输

encodeURIComponent函数

1. 客户端代码，引入ajax.js，调用ajax函数

1. demo7.php服务器端代码

效果

Ajax之POST常见问题

如何使用Ajax完成post提交？

答：在使用Ajax做post提交的时候，需要注意设置一个请求头的概念，并且这个请求头必须在open方法之后，send方法之前设置。POST请求头的设置无论是w3c还是IE都需要设置，并且在IE下中文也不用进行编码。

文档：http://www.w3school.com.cn/tags/att_form_enctype.asp

设置传输编码：application/x-www-form-urlencoded（表单做post提交 encrypt）

1. 在Ajax对象的open方法之后设置请求头即可，并且post提交的数据要写成一个字符串作为参数传递个send方法。

Ajax手册学习

手册解释

手册位置：

手册参数：

这个手册里面只要了解三个属性，两个常见方法。

Ajax状态变化

在使用ajax和服务器进行通信过程中，ajax的状态会产生一个变化，例如ajax对象产生，ajax发送请求，ajax对象成功获取服务器的响应….. 我们可以通过该对象 readyState 属性进行捕获，属性值有0-4 五个值，四种变化。我们可以捕获其变化，当状态变化的时候， onreadystatechange 对应的回调函数会自动进行触发。

1. 当我们使用Ajax去和服务器进行交互的过程，Ajax对象的状态是会发生变化的，我们可以使用xhr.readyState属性感知其变化。

效果

1. 总结：在使用xhr.readyState感知变化的过程中，可以看到从1变到4。在状态变为4的时候，我们可以使用xhr.responseText属性获取服务器返回的数据信息

客户端代码

demo9.php服务器端代码：

浏览器效果

注意：

1. 在下面的回调处理函数里面的 xhr.readyState属性的值可以从 0 到 4 ，存在有4种变化，5个状态。
2. 只有当状态成为4的时候，才可以获取到服务器返回的数据，服务器返回的数据会在对象的responseText属性或者是responseXML属性，如果请求的地址是一个XML文件，则会存放到该属性，其他的都是放到responseText属性里面。

xhr.onreadystatechange = function(){

// 服务器的数据何时可以正常的返回

console.log( xhr.readyState );

}

服务器返回的数据的概念

什么叫服务器返回的数据？

答：在ajax和服务器进行通信过程中，服务器肯定要返回点数据给ajax对象，那么主要存在以下四种返回数据。

PHP脚本返回HTML

1. 如果是请求的一个php文件URL地址（data.php），该脚本里面可以直接包含一段html代码，代表服务器返回的数据

客户端

demo10.php 服务端脚本

浏览器效果

PHP脚本输出变量数据

1. 如果是请求的一个php文件URL地址，脚本里面存在输出内容（echo 、var_dump 、print_r），代表服务器返回的数据

客户端

demo11.php 服务端脚本

浏览器效果

请求文本文件

1. 如果请求的是一个其他类型的文件URL地址，一般是文本文件，以如下格式结尾的文件.txt 、.html 、.htm 、.xhtml、 .shtml、json，里面的内容代表服务器返回的数据

客户端

top250.json 服务端脚本

浏览器效果

返回xml格式数据

1. 还可以请求一个XML文件URL地址，但是需要注意：这个时候接受服务器返回的数据，一般使用responseXML属性获取，是一个文档对象。

客户端

xml.xml服务器端代码

浏览器效果

注意：现在一般来说我们很少使用xml（难用，但是底层的效率还是很高，有些业务，是必须使用xml，银行金钱相关的业务，接口必须使用xml，xml存在DTD进行文档类型约束）作为数据传输格式（以前没有出现json的时候，都是使用的xml，但是现在基本所有的 项目的数据交互格式都是使用json，因为多种语言都对json进行支持，可以在多种语言之间会使用json作为官方的数据交互媒介 PHP支持json c语言 java支持json js支持json）。

Ajax案例-会员模块-curd-作业

功能需求

1. 在添加的时候做用户名唯一性检查

1. 做数据展示做一个无刷新分页

1. 做删除的时候做Ajax无刷新删除 + 事件代理完成、事件委托

PHP语法（四）

包含文件

1. include和require：包含多次
2. include_once和require_once：包含一次
3. 包含文件就相当于将包含文件中的代码拷贝粘贴到PHP页面中（魔术常量除外，魔术常量显示所在文件的文件信息），所以后缀是.html的包含文件中的PHP代码被文件包含后也是会执行的。

路径

路径分为绝对路径和相对路径

绝对路径：从盘符开始 c:\aa\bb.txt

相对路径：从当前文件所在的目录开始 aa\bb.txt ../aa.txt

../表示上一级目录 ./当前目录

区别：

./就表示在当前目录下找

不带./受include_path配置的影响

作用：将项目中的包含文件统一放置到指定目录内，然后利用include_path指向这个目录。可以提高安全性，也可以不用写很长的地址字符串。

include_path的值可以写多个路径，从前往后找文件。

set_include_path(“F:\www1;d:\www2;c:\”);

获取虚拟目录地址

文件包含

路径中“/”和“\”的区别

/：斜杠，用于web路径 http://www.php.com/aa/bb/index.html

\：反斜杠 用于文件物理地址路径 C:\aa\bb\index.html

在windows中可以相互混淆，但是在Linux中不可以，Linux中严格区分。

函数

函数是一个固定的代码块，也称为子程序，一个函数可以被多次调用，函数可以很好的实现计算机的模块化编程。

定义语法

function 函数名(参数1,参数2,…){

//函数体

}

函数的命名规则：

1. 以字母、下划线开头，后面跟的是字母、数字、下划线
2. 函数名不区分大小写（JS是区分大小写的）

调用函数

通过函数名来调研函数。

例题：打印斐波那契数列

参数的概念

函数括号里面的数称为参数

参数分为形式参数和实际参数

形式参数没有具体的值，只起一个形式的作用，用来告诉调用者需要传递几个参数给函数。函数定义时候的参数是形式参数

实际参数：函数调用的时候传递给函数的参数。

可变函数

将函数名保持在变量中。

<?php

function fun1() {

echo ‘处理一年级的事情<br>’;

}

function fun2() {

echo ‘处理二年级的事情<br>’;

}

function fun3() {

echo ‘处理三年级的事情<br>’;

}

function fun($grade) {

$f=’fun’.$grade; //可变函数

$f();

}

fun(1);

fun(2);

fun(3);

匿名函数

没有名字的函数，PHP5.3以后才支持的。

函数的传值与传址

默认情况下，函数参数传递是值传递，在定义函数的时候参数前面加上“&”表示地址传递。

脚下留心：如果函数的参数是引用传递，调用函数的时候不能直接写值，只能写变量，因为地址总是保存在变量中。

参数的默认值

如果参数有默认值的情况下，传递了参数就使用传递的值，没有传递参数就使用默认值。

注意事项

1. 默认值必须在一个存在的值，不能用变量来代替

1. 常量可以做默认值

1. 在定义函数的时候，没有默认值的参数写前面，有默认值的参数写后面。
2. 形参合实参不匹配

• 1. 实际参数少于形式参数，报错，没有对应值的参数为null
  2. 实际参数少于形式参数，只取前面对应的值。

传递不确定参数

在js中通过arguments关键字来获取传递的参数。

判断函数是否存在

return

作用1：在函数中使用

1. 终止函数的执行
2. 从函数内部将数据返回出来

作用2：在页面中使用

第一步：创建9-config.php

<?php

return array(

‘host’=>’lolcalhost’,

‘username’=>’root’,

‘pwd’=>’root’

);

第二步：在9-demo.php页面中包含9-config.php

<?php

$config=require ‘./9-config.php’;

var_dump($config);

作用：用来做框架的配置文件。

作用3：终止脚本的执行

终止脚本的执行的方法

1. return
2. exit——等同于die
3. die

区别：

1. return只能终止当前脚本，如果包含文件中含有return，只能终止包含文件。
2. exit和die用来终止所有脚本执行
3. exit和die后面都能跟参数（程序中有一个潜规则，没有参数用exit，有参数用die）。

测试

1. 写一个包含文件

echo ‘包含文件开始<br>’;

return;

echo ‘包含文件结束<br>’;

1. 写一个测试文件

1. 将return换成exit或die，运行结果

变量的作用域

1. 全局变量：作用范围在函数的外部
2. 局部变量：作用范围在函数内部
3. 超全局变量：在整个页面访问（函数内，函数外都能访问）

在函数内部使用全局变量

方法一：使用$GLOBALS

例题：

例题一：

例题二：

方法二：使用global关键字

注意：只有变量有作用域的概念，常量没有作用域的概念

方法三：匿名函数use()

use()将匿名函数外部的变量引入到匿名函数的内部。

练习

变量的生命周期

全局变量声明的时候产生，页面执行完毕后销毁

局部变量调用函数的时候产生，函数执行完毕销毁。

静态变量程序加载的时候产生，只被初始化一次，页面执行完毕销毁

静态变量（static）

静态变量一般指的是局部静态变量，PHP中没有全局的静态变量，因为全局的静态变量就是全局变量。

注意：静态变量是有作用域的

递归

在函数的内部自己调用自己。

递归的要素

1. 递归点：函数内部调用自己的地方
2. 递归出口：递归结束

例题：用递归实现从1加到任意一个数

例题：打印前十个斐波那契数列

第n个斐波那契数等于第n-1和n-2的和

<?php

/**

*$n是第n个斐波那契数

*/

function fun($n) {

if($n==1 || $n==2) {

return 1;

}

return fun($n-1)+fun($n-2);

}

//打印前10个斐波那契数列

for($i=1;$i<=10;$i++)

echo fun($i),’&nbsp;’;

/**

*分析第四个斐波那契数

fun(4) =fun(3)+fun(2)

=fun(2)+fun(1)+1

=1+1+1

=3

*/

?>

算法：二分法查找

1. 前提：一个有序的数组
2. 功能：在有序的数组中查找是否存在某个数

在1,5,9,12,56,78,102数组中查找102

第一步：找出数组中间的数12，12<102，在12右边查找

第二步：剩下的数据有56,78,102，找中间的数是78，78<102，在78的右边找

第三步：剩下的数据有102，找到了。

实现代码

<?php

/**

*@param $array array 查找的数组

*@param $min int 最小下标

*@param $max int 最大下标

*@param $search number 查询的数字

*/

function binary($array,$min,$max,$search) {

while($min<=$max){

$mid=floor(($min+$max)/2); //计算中间元素的下表

if($array[$mid]==$search) //找到查找的元素

{

return $mid; //返回下标

}

elseif($array[$mid]<$search) { //查找的元素比中间值大

$min=$mid+1; //更改最小下标值

}

else {

$max=$mid-1; //更改最大下标值

}

}

return -1; //没有找到

}

$num=array(1,5,9,12,56,78,102);

echo binary($num,0,count($num)-1,8),'<br>’;

作业：

1. 猴子吃桃子，第一天吃了一半又多吃一个，第二天一样，到第十天就剩下一个桃子，请问原来有几个桃子？
2. 用递归实在二分法