Ajax简介
问题引入
在学习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常见使用场景
- Ajax技术一般用在账户注册时候用户名和邮箱是否重复检查
- 还可以实现一种按需加载的布局加载数据的效果，瀑布流布局，按需加载
- 无刷新分页显示数据
- 无刷新留言
- 无刷新登录…..
例如：
http://reg.email.163.com/unireg/
网易邮箱注册
滚动加载
瀑布流布局
文档：
下一个永远是惊喜（永远不知道下一个商品是否是最好的？）
远古时代的无刷新技术
在没有ajax技术的时候，如何实现客户端和服务器进行无刷新的通信呢？
答：思考，如果要完成这个操作：
- 必须要进行网络通信
- 同时还可以接收到服务器端的响应
解决：
答：思考在前端里面那些技术是可以发送网络请求？
- ajax可以（不使用）
- img标签、link标签、script标签（js、执行）（都具有src 、href 属性都可以发送网络请求）
- 网页嵌套iframe（页面放一个，显示出来，穿件隐身衣）【无刷新文件上传，如果是兼容低版本的IE做文件上传】（自行百度学习）
知道：可以使用script标签来完成网络请求？
客户端代码：
服务器端代码：
浏览器效果：
jQuery基本使用
jQuery是什么？
jQuery主要是帮我们做js代码的简化操作。
原始：
- 获取某个元素 document.getElementById(‘div1’)
- 获取内容 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(){ // 事件回调函数 });
目前主要存在三个大的版本。
- x系列 [工具库代码有点大，做兼容]
- x系列
- x系列
这三个版本的使用的方式都是一样的，但是需要注意：2.x之后的版本不在兼容IE678。
为什么要使用jQuery呢？
从官网logo上的标语我们可以看到 write less, do more。 可以得知jQuery可以让我们用最少的代码完成最多的功能。
- 提供了强大的选择器，可以快速的选取页面上的DOM元素
- 提供了众多的方法
- 强大的链式操作
- 对浏览器的兼容性做了处理
- …………
设计：less is more
选择器-内容-样式
从jQuery的字面意思理解： jQuery = javascript + Query，由此可以看出jQuery的强大之初在于其选择器，即强大的DOM节点查询。同时需要注意的是，jQuery的选择器基本和Css的选择器一样。
主要学习两个选择器
- id选择器
- 类选择器
id选择器
代码：
注意：这里通过 $(‘#container’) ID选择器选择DOM元素，返回值是一个对象，可以调用jQuery为对象提供的方法。
效果
类选择器
代码：
效果：
事件操作
代码：
效果
ajax入门使用
Ajax的使用，满足如下的步骤：
- 实例化一个Ajax对象
- 设置一个回调函数，帮我们处理后台返回的数据，当对象的一个属性readyState == 4 就可以操作数据了
- 设置一个URL地址，并设置http的请求方式（get、post）
- 发送请求
实操-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低版本下。
- IE的实现方式不一样（IE下存在兼容性的问题）（到时候我们不会写原生的ajax，使用jQuery提供的ajax工具方法）
- IE下的GET提交的缓存问题（火狐 ctrl+f5）和参数中文（编码）的问题
IE6下测试XMLHttpRequest
一般在IE6下直接使用new XMLHttpRequest是不可以的，会保错，需要我们书写兼容性的代码。
网上找一个就行：
通过测试可以正常
函数文件位置：
IE6下get缓存问题
- 引入ajax.js函数，ajax函数调用
- demo6.php服务器代码
- 在IE下存在一个缓存的问题，一般如果URL地址不变的情况下，IE是不会在发送http请求
一般解决方式：1. 在URL地址后面加一个随机数 2. 或者是加上一个时间戳
代码：
效果：
IE6下get中文问题
1. 中文的问题（注意：在IE6下不能得到正常的传递）
解决：对中文的字符进行编码后进行传输
encodeURIComponent函数
- 客户端代码，引入ajax.js，调用ajax函数
- 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属性感知其变化。
效果
- 总结：在使用xhr.readyState感知变化的过程中，可以看到从1变到4。在状态变为4的时候，我们可以使用xhr.responseText属性获取服务器返回的数据信息
客户端代码
demo9.php服务器端代码：
浏览器效果
注意：
- 在下面的回调处理函数里面的 xhr.readyState属性的值可以从 0 到 4 ，存在有4种变化，5个状态。
- 只有当状态成为4的时候，才可以获取到服务器返回的数据，服务器返回的数据会在对象的responseText属性或者是responseXML属性，如果请求的地址是一个XML文件，则会存放到该属性，其他的都是放到responseText属性里面。
xhr.onreadystatechange = function(){
// 服务器的数据何时可以正常的返回
console.log( xhr.readyState );
}
服务器返回的数据的概念
什么叫服务器返回的数据？
答：在ajax和服务器进行通信过程中，服务器肯定要返回点数据给ajax对象，那么主要存在以下四种返回数据。
PHP脚本返回HTML
- 如果是请求的一个php文件URL地址（data.php），该脚本里面可以直接包含一段html代码，代表服务器返回的数据
客户端
demo10.php 服务端脚本
浏览器效果
PHP脚本输出变量数据
- 如果是请求的一个php文件URL地址，脚本里面存在输出内容（echo 、var_dump 、print_r），代表服务器返回的数据
客户端
demo11.php 服务端脚本
浏览器效果
请求文本文件
- 如果请求的是一个其他类型的文件URL地址，一般是文本文件，以如下格式结尾的文件.txt 、.html 、.htm 、.xhtml、 .shtml、json，里面的内容代表服务器返回的数据
客户端
top250.json 服务端脚本
浏览器效果
返回xml格式数据
- 还可以请求一个XML文件URL地址，但是需要注意：这个时候接受服务器返回的数据，一般使用responseXML属性获取，是一个文档对象。
客户端
xml.xml服务器端代码
浏览器效果
注意：现在一般来说我们很少使用xml（难用，但是底层的效率还是很高，有些业务，是必须使用xml，银行金钱相关的业务，接口必须使用xml，xml存在DTD进行文档类型约束）作为数据传输格式（以前没有出现json的时候，都是使用的xml，但是现在基本所有的 项目的数据交互格式都是使用json，因为多种语言都对json进行支持，可以在多种语言之间会使用json作为官方的数据交互媒介 PHP支持json c语言 java支持json js支持json）。
Ajax案例-会员模块-curd-作业
功能需求
- 在添加的时候做用户名唯一性检查
- 做数据展示做一个无刷新分页
- 做删除的时候做Ajax无刷新删除 + 事件代理完成、事件委托
